Fox is the CSS framework for Web Development

Light

Small, compact and under 5kb. What more can you ask for?

Flexible

Built with flexibility in mind so you can chop and change as you please

Fast

Lightning fast speeds with absolutely zero compiling or installing required

What is Fox?

Fox is a lightweight, compact and simply all-round awesome CSS framework that was built with one goal, to give web developers the CSS framework they've been needing. It's under 5kb, ~300 lines and with such simplistic styling, it enables you to do what you do best. Design and Develop. Start using Fox today and let it change the way you work for the better.

The Grid

Fox uses a 12-column fluid grid that has a max width of 1040px. It shrinks with the browser/device no matter what the size and you can simply change the max width with one line to suit your needs. Container is the main wrapper and Columns should always be a child of a Row.

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

seven

five

eight

four

nine

three

ten

two

eleven

one

twelve

Typography

Out of the box, Fox uses Open Sans as the default font-family and also comes with a few other things. Bold, Italic, Underline and Strike all come standard along with predefined font-sizes for headings. The default font-size is set at 18px with a line-height of 2.25rem. Utilising rem ensures font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property so a h1 with a 2.5rem font-size just means 40px.

Lists

  • Look how sexy this unordered list is
  • Oh look more lists
    • Just some nested lists kappa
      • A nest within a nest
  1. Okay just some ordered lists
  2. Oh look they have numbers
    1. They can also be nested
      1. Into the nest of nests we go

Heading

h1 2.5rem

Heading

h2 2rem

Heading

h3 1.375rem
blockquote

Navigation

Images

Images are automatically responsive in Fox so you don't ever have to worry about them falling off the edge of rows or not fitting into your columns. By default they are automatically centered and use a max-width property of 70% however you can adjust the size of images using either .img-small or .img-large.

img-small Fox CSS
no class Fox CSS
img-large Fox CSS

Buttons

Buttons come in multiple flavours and all buttons use the base class button which has a few default styles attached to it. Button styles can be applied to inputs, buttons and you can wrap an anchor around a button to achieve the same effect.

button-primary
button-black
button-outline
button-success
button-danger
button-warning

Forms

Panels

Panels are a great way to group and organise related information in bordered areas. You can also colour the panels by using contextual classes to define them for the heading, footer or both.

Primary heading
Danger heading
Default heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

There are two ways to style code. To keep things simple, you can wrap something with the element code or if you're wanting to display a block of code, wrap code with a pre tag.

              
              code {
                line-height: 100%;
                padding: .1rem .25rem;
                margin: 0 .1rem;
                background-color: #FAF8F0;    
                border: 1px solid #D9D9D9;
              }
              
            

What are you waiting for?

Download Fox today and let it change the way you develop.