FOX CSS now has its own Gulp/Sass Boilerplate. Try it ?

1. Introduction

FOX CSS was created after I realized most famous CSS frameworks out there were not the perfect tools for the projects I was working on their size and huge content being the main issue for me. I really wanted a light yet powerful base for both my personal and professional projects.

This is the reason why I decided to build something which would gather the following characteristics :

The whole framework is built with Sass (but can be used as a Vanilla CSS framework too). Sass is a CSS preprocessor which brings things like variables, operators or nesting into CSS. A part of FOX CSS is composed of what Sass calls "mixins". For more information, make sure to check the dedicated section .

FOX CSS is divided into several partials. Each one of them (minus mixins and variables ) can easily be removed from the framework in case you don't need it.

2. Resets

Some resets out there seem a bit too strong. I consider that not every element needs to be reset. This is an idea I first saw with KNACSS , a french CSS framework, and I decided to follow the same path.

No more annoying padding + width calculations:

* {
  box-sizing: border-box;
}

Default body styling:

body {
  font-family: Arial, Helvetica, Sans-serif;
  color: #000;
  background: #fff;
}

Smooth resets on margins and paddings (elements such as p or li will keep their default behavior):

html, body, blockquote, form {
  margin: 0;
  padding: 0;
}

Max-size and auto-height resize:

blockquote, code, embed, iframe, img, input, object, pre, table, td, textarea, video {
  max-width: 100%;
  height: auto;
}

Remove unwanted borders:

a img, form, fieldset {
  border: none;
}

Form styling:

input, button, select {
  vertical-align: middle;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

Browsers consistency:

abbr {
  cursor: help;
  border-bottom: 1px dotted #bbb;
}

Give child elements their parents size:

blockquote p, button, input, li h1, li h2, li h3, li h4, li h5, li h6, li li, li p, select, td p, th p {
  font-size: 100%;
}

3. Normalize

In addition to the light resets, I've also included Normalize v3.0.2 , which purpose is to make browsers render all elements more consistently.

If you want more details about it, I suggest you take a look at the Github Repository .

4. Utilities

FOX CSS comes with a few global utilities. Each one is namespaced with fx- to avoid possible conflicts with other CSS libraries.

Align text to the left, right, or center it:

.fx-txt-left {
  text-align: left;
}

.fx-txt-right {
  text-align: right;
}

.fx-txt-center {
  text-align: center;
}

Support for text ellipsis:

.fx-ellip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Align blocks to the left, right or center them:

.fx-left {
  float: left;
}

.fx-right {
  float: right;
}

.fx-center {
  margin: auto;
}

Support for clearfix:

.fx-clearfix:before, .fx-clearfix:after {
  content: "";
  display: table;
}

.fx-clearfix:after {
  clear: both;
}

Or use this after floated elements:

.fx-clear {
  clear: both;
}

Various display options:

.fx-inline {
  display: inline;
}

.fx-inlineb {
  display: inline-block;
}

.fx-valign {
  vertical-align: middle;
}

.fx-hidden {
  position: absolute;
  left: -9999px;
  text-indent: -9999px;
  overflow: hidden;
}

.fx-no-display {
  display: none;
}

5. Grid system

FOX CSS provides a solid responsive grid system based on Flexbox. It also comes with a fallback solution for IE9 (you'll need to use conditional comments to activate it).

Default grid:

1
2
3 
<div class="fx-row">
  <div class="fx-col-50-xs"><span>1</span></div>
  <div class="fx-col-50-xs"><span>2</span></div>
</div>
<div class="fx-row">
  <div class="fx-col-100-xs"><span>3</span></div>
</div>

Let Flexbox decide the right size:

Some content
This is some content with more text, bla bla bla bla bla ! 
<div class="fx-row">
  <div class="fx-col"><span>Some content</span></div>
  <div class="fx-col"><span>This is some content with more text, bla bla bla bla !</span></div>
</div>

Responsive grid (resize!). Please note that each class with a size mentioned in it can be used responsively.

1
2
3
4 
<div class="fx-row">
  <div class="fx-col-100-xs fx-col-30-s"><span>1</span></div>
  <div class="fx-col-100-xs fx-col-70-s"><span>2</span></div>
</div>

<div class="fx-row">
  <div class="fx-col-100-xs fx-col-60-m"><span>3</span></div>
  <div class="fx-col-100-xs fx-col-40-m"><span>4</span></div>
</div>

Items aligned to the left, center, right, or with space around or between them:

1
2
3
4
5
6
7
8
9
1
2
3
1
2
3 
<div class="fx-row fx-row-start-xs">
  <div class="fx-col-25-xs"><span>1</span></div>
  <div class="fx-col-25-xs"><span>2</span></div>
  <div class="fx-col-25-xs"><span>3</span></div>
</div>

<div class="fx-row fx-row-center-xs">
  <div class="fx-col-25-xs"><span>7</span></div>
  <div class="fx-col-25-xs"><span>8</span></div>
  <div class="fx-col-25-xs"><span>9</span></div>
</div>

<div class="fx-row fx-row-end-xs">
  <div class="fx-col-25-xs"><span>4</span></div>
  <div class="fx-col-25-xs"><span>5</span></div>
  <div class="fx-col-25-xs"><span>6</span></div>
</div>

<div class="fx-row fx-row-between-xs">
  <div class="fx-col-25-xs"><span>1</span></div>
  <div class="fx-col-25-xs"><span>2</span></div>
  <div class="fx-col-25-xs"><span>3</span></div>
</div>

<div class="fx-row fx-row-around-xs">
  <div class="fx-col-25-xs"><span>1</span></div>
  <div class="fx-col-25-xs"><span>2</span></div>
  <div class="fx-col-25-xs"><span>3</span></div>
</div>

Reversed items:

1
2
3 
<div class="fx-row fx-row-reverse-xs">
  <div class="fx-col-33-xs"><span>1</span></div>
  <div class="fx-col-33-xs"><span>2</span></div>
  <div class="fx-col-33-xs"><span>3</span></div>
</div>

Item aligned to the top, center, or bottom:

1
2
3 
<div class="fx-row" style="height:200px;">
  <div class="fx-col-top-xs"><span>1</span></div>
  <div class="fx-col-center-xs"><span>2</span></div>
  <div class="fx-col-bottom-xs"><span>3</span></div>
</div>

Easy customization of gutter and grid breakpoints in _variables.scss :

// Change those numbers as you want
$fx-grid-gutter: 16;
$fx-grid-breakpoints: (s: 768, m: 940, l: 1200);

Fallback solution for IE9 : add the following line in your HTML, right above <html> .

<!--[if IE 9]> <html class="ie9"> <![endif]-->

6. Mixins

Mixins let you create groups of CSS declarations that can easily be reused throughout your site. If you need more details about them, I suggest you check their Sass documentation before reading further.

Min and max-width media queries :

@mixin fx-bp($point)
@mixin fx-bpmax($point)
// USAGE

@include fx-bp(1200) {
    p {color: red;}
}

@include fx-bpmax(320) {
    p {color: blue;}
}

// OUTPUT

@media screen and (min-width: 75em) {
    p {color: red;}
}

@media screen and (max-width: 20em) {
    p {color: blue;}
}

High-Definition background images :

@mixin fx-img-2x($image, $width, $height)
// USAGE

.box {
    @include fx-img-2x('back.jpg', 300px, 200px)
}

// OUTPUT

@media (-moz-min-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6 / 2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
    .box {
        background-image: url("back.jpg");
        background-size: 300px 200px;
    }
}