Fuselage: A Front-End Framework

Fuselage is a sass-based, mobile-first front-end framework aimed at developer productivity and structural composability. With a sensible grid, refreshing typography, and nifty features, it's a great starting point for almost any project.

Although the world may not need another front-end framework, it became apparent over the years that I personally needed one. I needed to form opinions on the liberties that other frameworks take, recreate some common conventions with my own optimizations, and control dependencies. If it only ends up being used on my own projects, I sill consider it a successful endeavor. As you may have guessed, this site is built using Fuselage. I am proud to say it currently has no javascript dependencies .

Visit project site

Typography

The typographic style and vertical rhythm was most important to me in this framework. Individual letterforms articulated into words form the backbone of web content as we know it. The font-size, font-weight, and vertical rhythm needed to be just right, as well as customizable. Typesetting in printed materials is the basis of web typography, and it carries many useful correlations that we can apply to styling words on the web. Where the space between lines (leading) was set before each run on a printing press, a web framework can similarly control that value dynamically, giving us more control over our type. Other bits of inspiration can be gleaned from the conventions developed in journalistic materials, where information has been organized into articles for many years. Headlines, bylines, decks (introductory paragraphs), and headings are all conventions that are well-established and helpful in improving online reading experiences.

Individual letterforms articulated into words form the backbone of web content as we know it.

My graphic design roots would never allow me to overlook the important details of carefully crafted type. In the context of a web framework, however, type doesn’t stay put. It needs to change size, typeface, spacing, and weight, but should do so in a predictable manner that yields consistently engaging type. Fuselage does just this.

Modular Scale

I leaned on Tim Brown’s thoughts regarding the creation of more meaningful type on the web through the use of modular scale and ratios. This methodology allowed me to translate my high standards in typesetting to the web. I collected the following ratios as a starting point for the foundation of my typographic system.

Typographic scaffolding

The default scale is the golden ratio (1.618043), but can be adjusted easily. This ratio, combined with the chosen font-size (defaulted to 18px), constructs the entire typographic system —headlines, headings, subheadings, bylines, decks, captions, definitions, blockquotes, leading (space between lines) —the whole project. It also sets the visual spacing for all of the other visual elements controlled by the framework such as buttons, forms, tables, grid, and other helpers. You can find the full documentation for typography within Fuselage on the project site.

Media Queries

Adopting a “mobile-first” mentality for user experience design is a trendy thing to do, but it also offers some major advantages. Content must be leaner, and priorities must be established. Oftentimes this means the design has more thought put into it, and a consistent experience is had across a much larger user base.

How this played out in Fuselage was fairly straightforward; namespaces were assigned across an array of breakpoints, from very small to very large. These namespaces are prepended to class names within fuselage to create the full spectrum of styles needed for a fully responsive project. The following table outlines the namespaces and and their values.

Widths i.e. Grid

Every good framework has a useful grid, and Fuselage is no different. Its mobile-first, nestable grid system, referred to as widths gives you a robust skeleton to hold your project together. The class names are human-friendly and fractional, rather than columned like Foundation or Bootstrap. The entire system handles responsive design beautifully, and new subdivisions can be created easily using provided mixins. Shown in Figure 1, the widths system is understandable and clean. I took inspiration from Harry Roberts regarding the use of fractions over columns.

<div class="row">
    <div class="column one-whole medium-one-half large-two-thirds">
        <p>a</p>
        <div class="row">
            <div class="column one-whole large-one-third">
                <p>a.a</p>
            </div><!-- /.row -->
            <div class="column one-whole large-two-thirds">
                <p>a.b</p>
            </div><!-- /.row -->
        </div><!-- /.row -->
    </div><!-- /.column -->
    <div class="column one-whole medium-one-half large-one-third">
        <p>b</p>
        <div class="row">
            <div class="column one-half large-one-third">
                <p>b.a</p>
            </div><!-- /.row -->
            <div class="column one-half large-two-thirds">
                <p>b.b</p>
            </div><!-- /.row -->
        </div><!-- /.row -->
    </div><!-- /.column -->
</div><!-- /.row -->

Here’s the output.

Tables

Displaying tabular data is best done using tables, but <table>s are notoriously troublesome when it comes to responding to different viewport sizes. Therefore, a must-have in Fuselage was beautiful, fully responsive tables —without javascript.

Solutions created out of this mindset might very well foster some very hacky code, but I feel that the CSS is rather elegant. It makes use of data attributes and :nth-of-type selectors to pull in the necessary information for tables with a large number of columns. The state —that is, the responsive view or the normal view— of the table is controlled using the same media queries as the rest of the project, meaning the developer decides in advance where the table should break out of its responsive view. There are a few examples of tables in this article, but the full documentation for tables can be found on the project’s site. The following table is achieved by adding the medium-responsive class to the <table> element, which breaks the table out of the responsive view at the medium media query. Test it by changing your browser width.

Buttons

Buttons take on many different forms, colors, shapes, and sizes. Fuselage creates a composable way to create buttons through modifying classes. These classes can imply color: primary, secondary, tertiary, success, warn, alert. Or they can modify the size: tiny, small, large, extended. They can also be rounded, disabled, filled, or any combination thereof. New buttons can be made easily using some handy mixins, all of which are documented on the project site. Here are some examples.

Primary Tiny Secondary Small Tertiary Medium Success Large

Warn Rounded Filled Secondary Disabled

Alert Extended

Forms

The composable core infrastructure of Fuselage easily accommodates powerful and ready-made responsive forms. The same simple grid translates well into creating robust forms. Here’s an example.

Final Thoughts

This project is still being actively maintained, and tends to change based on my needs or desires. I do, however, keep detailed release notes, and avoid making backward-breaking changes. I would love to know if anyone out there finds any value in this project, has any feedback, or would just like to start a conversation about anything written here. Feel free to reach out here, on GitHub, or on Twitter The goal at the outset of this project was to create a straightforward, composable base on which projects can build upon. It has been enjoyable to see that ideal play out as I have used it for my own projects to great success.

Learn about Fuselage –a composable and mobile-first front-end framework I built using @SassCSS https://t.co/MV5yLHIx11

— Rand Seay (@randseay) October 27, 2015