Fractions

Purpose

Fractions is a simple 'quickstart' SASS framework. It makes no assumptions about your project, nor does it prescribe any style, use BEM, SMACCS, SUIT, whatever you like. It does offer a few conventions that after usng a few times you will wonder how you lived without.

Originally requiring the (still great) Bourbon.io mixin library, it is now standalone.

Fractions should almost be thought of as a 'Themeable' CSS reset that lets you optionally utilise a few variable/typography conventions whilst providing access to a bunch of useful and time saving mixins.

Usage

The only required file is fractions-2/utils/mixins. This is because some of the other modules depend on mixins that live here. You will probably always want to include fractions-2/utils/reset as a modern css reset.

The core of the library only has 2 main parts, grid and type. Choose 1, 2 or none of these parts.

Grid

The Grid:

• The grid is basic.
• The grid can do 90% of what you need.
• The grid can't do everything you need.
• The grid has responsive opinions, override/extend as you need.
• If you dont like the grid, dont use the grid.

Disclaimer: You should read over the grid code and understand what it's doing.

Include fractions-2/config/grid at the top of a SASS grid config file (eg src/sass/config/grid) then override any of the default vars that you so wish. Next include fractions-2/modules/grid which will then add the main grid styles to your project.

Structure

The .row container will be max-width'd to your $grid-width variable and centered on the page.

Think of the f-classes as what % width of the row they are going to take up. .f-25 takes a quarter, .f-75 takes three-quarters etc. You can include as many of them inside a row as you like, and they will just wrap to a new line (no gutters included).

<section>
    <div class="row">
        <div class="f-33"></div>
        <div class="f-33"></div>
        <div class="f-33"></div>
        <div class="f-33"></div>
        <div class="f-33"></div>
        <div class="f-33"></div>
    </div>
</section>

The code above will give you a perfect 3-up grid, which will drop to 50% width on tablet, and 100% on mobile.

If you want gutters....do this:

<section>
    <div class="grid-row">
        <div class="f-50"></div>
        <div class="f-50"></div>
    </div>
</section>

Gutter sizes are based off the $sizer variable. $sizer could also be treated as a uniform unit of spacing throughout the site for things like sections and component margins to provide uniformity and some sense of typographical rhythm. (read the code....it uses a nifty oversized row technique to achieve this)

Pro Tip: Think of the f-classes as component containers, not for sizing the components themselves. Don't size any of your components, let them fill the available space.

Type

On med to large scale projects, typography can get complicated. The typography module offers an opinion on how this can be managed by promoting the idea of "Type Factory Mixins", the basic idea goes like this...

1. Include fractions-2/config/type again at the head of a suitable type config (src/sass/config/type sounds good).

2. Override any of the base vars you so wish or just go with the (sensible) defaults. (It is recommended to use the $scalehx vars throughout your CSS to keep type sizing consistent.)

3. Recognise the 2 main 'composer' mixins heading and body. These should map 1 to 1 to the fonts you use in your project. If you use multiple heading fonts, create heading2.

4. Next go about creating the 'Type Factory Mixins'. These are defined once, kept together and can then be used as simple 1-liners throughout the rest of your CSS where needed. An example is below (using defaults from the potentially previoulsy included fractions-2/config/color)

   @mixin text-body($color: $brand, $font-size: $scaleh5, $line-height: 1) { @include body; color: $color; font-size: $font-size; line-height: $line-height; }

Usage in any rule is then as simple as:

.banner-title {
    @include text-body($brand2, $scaleh6, 1.4);
}

...of course, params are optional

.banner-title {
    @include text-body($brand2);
}

The benefits to this approach are considerable. Consistency, ease of use, easy to switch out font-faces, easy to not let your designer run away with font styles. Themeing with the Factory Mixins is also easy, you create factories per theme, and then use the consistent interface in the rest of your code.

Once again, use or don't use this part, or use just the config part and don't include the main fractions-2/modules/type module which offers up a themed 'type reset'.

Build

Build with your normal process. I like Webpack, it allows you to inline fonts, and small sprite images. fractions-2/utils/mixins provides a convenient mixin inline-sprite for this.

Anyway...read the code and explore, there is not a whole lot there but it provides some project consistencies and a starting point for your more advanced needs.