Breakpoints

SCFFLD uses four different breakpoints. These breakpoints are called Diminuitive, Small, Medium, and Large. The screen size for each of these breakpoints is listed below.

The Code:

           
           // Diminuitive
           /* This styles from this class apply
            * to all breakpoints starting
            * with mobile devices
            */
           
           // Small
           @media screen and (min-width:600px) {
               ...styles here...
           }
           
           // Medium
           @media screen and (min-width:900px) {
               ...styles here...
           }
           
           // Large
           @media screen and (min-width:1200px) {
               ...styles here...
           }
       

Box Class

The first is the .box class. This class is a container for your grid that will be the full width of the screen. The contents of this box will span the full width of the screen, which is great for hero images, navigations, and other such things.

The Code:

        
    <div class="box">box</div>
       

 

The second class is .box-container. This is a container that will be full width for the diminuitive screen, and decrease as the screen gets wider. This would be good for content such as blog posts or just text that you don't want to reach from one side of the screen to the other.

box-container

The Code:

        
    <div class="box-container">box-container</div>
       

Basic Grid

To make responsive design simple but effective, SCFFLD utilizes a mobile first grid. Rather than using 12 columns like most grids or frameworks, SCFFLD uses percentages which allows for any number of combinations. It also means you can make just about any division you want whether it's thirds, fourths, fifths, and so on. For the grid to work, you will need to place the grid elements inside a .box or .box-container. Within this container, everything will default to 100% width. to change this, simply apply a class for the desired breakpoint and width. For our example, we're applying classes for the diminuitive (mobile) screens. To target this screen size, your grid class will begin with the letter "d". Next we will add the percentage width we'd like to use. Our class for a 90% width container on a diminuitive (mobile) screen should look like this: .d-90

The Code:

         
    <div class="box">
        <div class="d-100">d-100</div>
        <div class="d-10">d-10</div>
        <div class="d-90">d-90</div>
        <div class="d-20">d-20</div>
        <div class="d-80">d-80</div>
        <div class="d-30">d-30</div>
        <div class="d-70">d-70</div>
        <div class="d-40">d-40</div>
        <div class="d-60">d-60</div>
        <div class="d-50">d-50</div>
        <div class="d-50">d-50</div>
        <div class="d-60">d-60</div>
        <div class="d-40">d-40</div>
        <div class="d-70">d-70</div>
        <div class="d-30">d-30</div>
        <div class="d-80">d-80</div>
        <div class="d-20">d-20</div>
        <div class="d-90">d-90</div>
        <div class="d-10">d-10</div>
        <div class="d-100">d-100</div>
        <div class="d-25">d-25</div>
        <div class="d-50">d-50</div>
        <div class="d-25">d-25</div>
        <div class="d-33">d-33</div>
        <div class="d-33">d-33</div>
        <div class="d-33">d-33</div>
    </div>
        

Offset Columns

You can also use offsets with SCFFLD. To make things fast and simple, the only thing required to do this is to add a second number to the class you're already using. Just as before, we will begin our grid class with the screen size indicator. In this example, we'll be using diminuitive (mobile) screen sizes, so our class will begin with .d. This is also a percentage. For our example, we'll create an element that has a width of 80% with an offset of 20%. To accomplish this, we will add the amount of the offset followed by the width. Our class should now look like this: .d-20-80.

The Code:

         
    <div class="box">
        <div class="d-10-90">d-10-90</div>
        <div class="d-20-80">d-20-80</div>
        <div class="d-25-75">d-25-75</div>
        <div class="d-30-70">d-30-70</div>
        <div class="d-33-66">d-33-66</div>
        <div class="d-40-60">d-40-60</div>
        <div class="d-50-50">d-50-50</div>
        <div class="d-60-40">d-60-40</div>
        <div class="d-66-33">d-66-33</div>
        <div class="d-70-30">d-70-30</div>
        <div class="d-75-25">d-75-25</div>
        <div class="d-80-20">d-80-20</div>
        <div class="d-90-10">d-90-10</div>
        <div class="d-25-50">d-25-50</div>
        <div class="d-25">d-25</div>
    </div>
        

Multiple Classes

With SCFFLD, you can also assign different widths and offsets for each breakpoint. It is worthwhile to note that by default each element in the .box element is 100%. Because of this, if an element is not given a width it will be full width. In addition since SCFFLD is a mobile first grid, the classes assigned carry over to the next breakpoint if another is not assigned. What this means is that if we look at our elements below, the have the classes s-50 m-25. Since there is no d class, all of these elements will be full with for the smallest screen size. We have widths assigned for the small and medium sized screens. We do not have any l classes assigned either, it will inherit the width from the last assigned class. In the example below, the last highest breakpoint with a class assigned was m-25. The large screen will inherit the 25% width and effectively have a l-25 class.

The Code:

         
    <div class="box">
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
        <div class="s-50 m-25">s-50 m-25</div>
    </div>
        

Text Styles

Below are the styles used for the various headings and text displayed in a web page. These font sizes change as the screen size gets smaller to be more appropriate for each screen size. By default, SCFFLD uses the Lato font available through Google Fonts. Font sizes use an rem unit, so everything will be relative to a font size set at the html level.

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5

This is a paragraph

This is a link

The Code:

     
    <h1>This is an h1</h1>
    <h2>This is an h2</h2>
    <h3>This is an h3</h3>
    <h4>This is an h4</h4>
    <h5>This is an h5</h5>
    <p>This is a paragraph</p>
    <a href="http://iamtimsmith.com" target="_blank">This is a link</a>
        

Input Styles

Item One Item Two Item Three Item Four Click Me!

The Code:

    <form class="s-10-80 m-20-60">
        <input type="text" placeholder="Text Box">
        <select>
            <option>Item One</option>
            <option>Item Two</option>
            <option>Item Three</option>
            <option>Item Four</option>
        </select>
        <textarea></textarea>
        <a class="button" href="#">Click Me!</a>
    </form>  
        

Download

To download and use the framework, simply click the button below and it will take you to the repository to download.

Download