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;
    }
}