What is Simplify?

Simplify is a minimal CSS framework (so minimal it's only 19,2 kB in size!) written with SASS and Compass. It is ideal for graphic designers who wish to implement a website design themselves and do so in a simple, yet effective manner ( meaning without any front-end devs getting in the way :)

The framework contains basic styling rules for elements, a flexbox-based grid system and a few must-have CSS-only components, which can be easily customized to the designer's preference. To reset browser styles, normalize.css is included in the framework file.

Installation

It is strongly advised to have your own CSS file for any changes that you need to make on the styles instead of editing the simplify.css file directly. If you chose to call it my-style.css then include it in your HTML file like this

 <link rel="stylesheet" href="my-style.css" type="text/css> 

Include from CDN

You can just link the CDN in your html document and you're good to go.

 <link rel="stylesheet" href="https://unpkg.com/simplify.min.css" /> 

Install with npm

Alternatively, you can get the whole package via npm

$ npm install simplify 

Download

You can download the minified css file to include in your projects or get the whole .zip package from Github.

Customize

To customize the Simplify core and compile your own project, you'd need to get SASS and Compass in addition to the master package from above.

The project structure is as follows:

simplify/
├── css/ 
│   ├── simplify.css      
│   ├── simplify.min.css  
│   
├── fonts/ 
│   ...
├── scss/ 
│   ├── styles.scss 
│   └── partials/   
│       ├── _accordion.scss   
│       ├── _base.scss        
│       ├── _breadcrumbs.scss 
│       ├── _button.scss
│       ├── _code.scss
│       ├── _form.scss
│       ├── _grid.scss
│       ├── _image.scss
│       ├── _mixins.scss
│       ├── _nav.scss
│       ├── _normalize.scss
│       ├── _table.scss
│       ├── _typography.scss
│       └── _variables.scss
├── .brackets.json
├── .gitignore
├── .scss-lint.yml
├── LICENSE
├── README.md
└── config.rb
            

Browser Support

Simplify is built with modern browsers in mind and the CSS is prefixed (using the awesome Autoprefixer) for the last two versions of commonly used browsers.

Typography

The beautiful font that was used to build this website is called Poppins by Jonny Pinhorn and provided by Google Fonts. To use it in your own website add the following in your HTML head.

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,700" rel="stylesheet">

You can also download and add the font files to their own folder called poppins in the /fonts sub-direcory of your main project.

Headings use the semantic classes h1 through h6. REMs are used to set the font-size relative to 16px root size as well as line height relative to a 24px base.

Heading H1 46px

Heading H2 36px

Heading H3 28px

Heading H4 22px

Heading H5 18px

Heading H6 16px

<h1>Heading</h1>     <!-- font-size: 2.875rem/46px line-height: 4.5rem/72px -->
<h2>Heading</h2>    <!-- font-size: 2.25rem/36px line-height: 3rem/48px -->
<h3>Heading</h3>    <!-- font-size: 1.75rem/28px line-height: 3rem/48px -->
<h4>Heading</h4>    <!-- font-size: 1.375rem/22px line-height: 3rem/48px -->
<h5>Heading</h5>    <!-- font-size: 1.125rem/18px line-height: 1.5rem/24px -->
<h6>Heading</h6>    <!-- font-size: 1.5rem line/16px line-height: 1.5rem/24px -->

Buttons

Simplify covers three most basic styles of buttons with the default button element having a flat-color background and hover effect. Additionally, the .button-outline class provides a button with just an outline and the .button-clear class gives us a clear button. Pretty self-explanatory, huh?

<!-- Default Button -->
<a class="button" href="#">Default Button</a>

<!-- Outlined Button -->
<button class="button button-outline">Outlined Button</button>

<!-- Clear Button -->
<input class="button button-clear" value="Clear Button" type="submit">

Code

Making text appear like computer code just like the examples on this page is easy. Wrap any word in a <code> tag to make it appear as inline code. To show beautiful blocks of code, add a <pre> tag around the <code>.

<pre><code>
.style {
  color: #00000;
}
</code></pre>

Forms

Here's how a form looks like by default when using Simplify with the code shown below. Neat, right?

<form>
  <fieldset>
     <label for="nameField">Name</label>
     <input placeholder="John Doe" id="nameField" type="text">
     <label for="ageRangeField">Age Range</label>
     <select id="ageRangeField">
        <option value="0-13">0-13</option>
        <option value="14-17">14-17</option>
        <option value="18-23">18-23</option>
        <option value="24+">24+</option>
     </select>
     <label for="commentField">Comment</label>
     <textarea placeholder="Lorem ipsum dolor" id="commentField"></textarea>
     <div class="float-right">
        <input id="confirmField" type="checkbox">
        <label class="label-inline" for="confirmField">I Agree</label>
       </div>
     <input class="button-primary" value="Send" type="submit">
  </fieldset>
</form>

Tables

Data tables can be a pain when aiming for mobile devices, so Simplify provides awesome responsive tables made using the nifty No More Tables principle. Resize your browser screen to see the magic happen.

<table>
  <caption>Table Caption</caption>
  <thead>
   <tr>
    <th scope="col">Table head</th>
    <th scope="col">Table head</th>
    <th scope="col">Table head</th>
    <th scope="col">Table head</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td data-title="Table head">Lorem ipsum</td>
    <td data-title="Table head">01/01/1990</td>
    <td data-title="Table head">10,000</td>
    <td data-title="Table head">01/01/1990 - 01/31/1990</td>
   </tr>
   <tr>
    <td data-title="Table head">Lorem ipsum</td>
    <td data-title="Table head">01/01/1990</td>
    <td data-title="Table head">10,000</td>
    <td data-title="Table head">01/01/1990 - 01/31/1990</td>
   </tr>
   <tr>
    <td data-title="Table head">Lorem ipsum</td>
    <td data-title="Table head">01/01/1990</td>
    <td data-title="Table head">$10,000</td>
    <td data-title="Table head">01/01/1990 - 01/31/1990</td>
   </tr>
   <tr>
    <td data-title="Table head">Lorem ipsum</td>
    <td data-title="Table head">01/01/1990</td>
    <td data-title="Table head">10,000</td>
    <td data-title="Table head">01/01/1990 - 01/31/1990</td>
   </tr>
  </tbody>
 </table>
 </div>

Breakpoints

To make your life a lot easier, by default Simplify utilizes a single breakpoint at 768px for its responsive elements. This way you needn't worry about flooding your HTML markup with non-semantic classes (like col-xs col-md col-lg etc.) while still rocking a pretty responsive layout. Also, the framework aims at the mobile-first approach to serve content faster for those low bandwidth mobile devices.

Containers

To lay things nicely on your page and use the grid, you need to use the container class. By default, the container takes up 80% of the page, has a max-width set 1280px and is centered to the viewport.

<div class="container">
    <!-- 
    Container width: 80% 
    max-width: 80 rem (1280px)
    -->
</div>

Grid

The grid is the heart and soul of any CSS framework, so it should be easy to use, simple and responsive. Simplify is made using the CSS Flexible Box layout module (Flexbox for short) to cover all three of those requirements.

You need to use a container class as mentioned above, then wrap some columns inside a row class. *Bam!*, you're done! And your content will scale responsively along - resize your browser window to check it out.

<div class="container">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>      
</div>

You can add as many columns as you'd like and by default they will distribute evenly across the grid, however using no more than the good-ol' 12 is advisable for best results.

Offsetting your columns by a desired percent is also possible by appending the column-offset-NUMBER class, where NUMBER can be one of 10, 20, 25, 33, 40, 50, 66, 75, 80, 90.

<div class="container">
  <div class="row">
    <div class="column"></div>
    <div class="column column- column-offset-50"></div>          
  </div>      
</div>

How much space should a column take up relatively to a percentage can be set manually by using the coulmn-NUMBER class the same way.

<div class="container">
 <div class="row">
  <div class="column column-10"></div>
 </div>
 
 <div class="row">
  <div class="column column-20"></div>
 </div>
 
 <div class="row">
  <div class="column column-25"
 </div>
 
 <div class="row">
  <div class="column column-33"></div>
 </div>
 
 <div class="row">
  <div class="column column-40"></div>
 </div>
 
 <div class="row">
  <div class="column column-50"></div>
 </div>
 
 <div class="row">
  <div class="column column-60"></div>
 </div>
 
 <div class="row">
  <div class="column column-67"></div>
 </div>
 
 <div class="row">
  <div class="column column-75"></div>
 </div>
 
 <div class="row">
  <div class="column column-80"></div>
 </div>
 
 <div class="row">
  <div class="column column-90"></div>
 </div>
 
 <div class="row">
  <div class="column"></div>
 </div>
</div>

If you want a row to have no padding, you can use the row-no-padding class.

<div class="container example">
 <div class="row row-no-padding">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
 </div>
</div>

Accordion

Accordions are used when you want to toggle between hiding and showing some content. The separate parts of an accordion are called panels.

<div class="panel">
  <input id="panel-one" type="checkbox" name="accordion">
  <label for="panel-one">Label One</label>
  <div class="panel-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
  </div>
 </div>

 <div class="panel">
  <input id="panel-two" type="checkbox" name="accordion">
  <label for="panel-two">Label Two</label>
  <div class="panel-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
  </div>
  
  <div class="panel">
  <input id="panel-three" type="checkbox" name="accordion">
  <label for="panel-three">Label Two</label>
  <div class="panel-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
  </div>
</div>

Breadcrumbs

Breadcrumbs are a secondary type of navigation that marks the current position of the user in a website or a web app. They're actually called so because of the Hansel and Gretel fairy tale you're most certainly familiar with :)

<div id="breadcrumb" class="breadcrumb">
 <ul>
   <li class="breadcrumb-link"><a href="#">Overview</a></li>
   <li class="breadcrumb-link"><a href="#">Category Level 1</a></li>
   <li class="breadcrumb-link"><a href="#">Category Level 2</li>
   <li class="breadcrumb--active">Active Level</a></li>
 </ul>            
</div>

Nav

Simplify's nav uses the checkbox hack to provide you with a pure CSS responsive navbar. Resize the browser window and you'll see it in action.

<nav class="nav-menu menu-left">
  <div class="nav-logo logo-right">
  <a href="#">LOGO</a></div>
  <label for="tm" id="toggle-menu">Menu
    <span class="drop-icon">❭</span></label> 
  <input id="tm" type="checkbox">
  <ul class="main-menu clearfix">
  <li><a href="#">Item 1</a></li>
  <li>
   <a href="#">Item 2 
     <span class="drop-icon">❭</span> 
   <label class="drop-icon" for="sm1" title="Toggle Drop-down">❭
   </label></a>
   <input id="sm1" type="checkbox">
   <ul class="sub-menu">
    <li><a href="#">Item 2.1</a></li>
    <li>
     <a href="#">Item 2.2 
     <span class="drop-icon">❭</span> 
     <label class="drop-icon" for="sm2" title="Toggle Drop-down">❭
     </label></a> 
     <input id="sm2" type="checkbox">
     <ul class="sub-menu">
      <li><a href="#">Item 2.2.1</a></li>
      <li><a href="#">Item 2.2.2</a></li>
      <li><a href="#">Item 2.2.3</a></li>
     </ul>
    </li>
    <li><a href="#">Item 2.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 3</a></li>
  </ul>
</nav>

To get a navigation bar you need a nav element with a class="nav-menu".

The opening toggle for the mobile version of the menu requires adding the <label for="tm" id="toggle-menu"> along with the <input type="checkbox" id="tm">. The ❭ code inside the <span class="drop-icon"> is used for the arrow ❭ and is transformed with CSS when a down-arrow is needed.

You can define a right or left alignment for the navbar with the menu-right and menu-left classes as shown above.

If you want to put a logo on your navigation then add the <div class="nav-logo"> and set its position with the logo-right and logo-left classes. Appending the fixed class to the nav element makes sure the navigation always sticks to the top of the page.

Dropdowns are achieved by adding <ul class="sub-menu"> and the respective checkbox and label elements.

Tabs

Tabs are perfect when you're aiming for that tidy one-pager look and want to keep your content organised and clean-looking. Again, responsiveness is a must and Simplify has got you covered.

<div class="tab-wrap">
    <input checked class="tab" id="tab1" name="tabGroup" type="radio">
    <label for="tab1">Section One</label>
    
    <input class="tab" id="tab2" name="tabGroup" type="radio">
    <label for="tab2">Section Two</label>
    
    <input class="tab" id="tab3" name="tabGroup" type="radio">
    <label for="tab3">Section Three</label>
    
    <input class="tab" id="tab4" name="tabGroup" type="radio">
    <label for="tab4">Section Four</label>
    
    <div class="tab__content">
        <h3>Section One</h3>
        <p>Content goes here</p>
    </div>
    <div class="tab__content">
        <h3>Section Two</h3>
        <p>Content goes here</p>
    </div>
 <div class="tab__content">
        <h3>Section Three</h3>
        <p>Content goes here</p>
    </div>
 <div class="tab__content">
        <h3>Section Four</h3>
        <p>Content goes here</p>
    </div>
</div>

Let's take a look at the syntax. You wrap the whole thing in a <div class="tab-wrap"> and for the contents of each tab you add a <div class="tab__content">.

For each tab you add a radio with the tab clss and a corresponding label as shown. The checked class marks the current open tab.

Now, depending on the number of tabs you have, you need to modify some CSS code for showing the tabs content. If you had 2 tabs, you'd have the following selectors

.tab:checked:nth-of-type(1)~.tab__content:nth-of-type(1),
.tab:checked:nth-of-type(2)~.tab__content:nth-of-type(2)

Since making the changes to your own custom-style.css file is strongly advised, just copy-paste and adjust the whole code block with your selector like that

.tab:checked:nth-of-type(1)~.tab__content:nth-of-type(1),
.tab:checked:nth-of-type(2)~.tab__content:nth-of-type(2) {
    opacity: 1;
    position: relative;
    top: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: .5s opacity ease-in, .2s transform ease;
    -webkit-transition: .5s opacity ease-in, .2s -webkit-transform ease;
    transition: .5s opacity ease-in, .2s -webkit-transform ease;
    transition: .5s opacity ease-in, .2s transform ease;
    transition: .5s opacity ease-in, .2s transform ease, .2s -webkit-transform ease;
    z-index: 1;
}