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
- Okay just some ordered lists
- Oh look they have numbers
- They can also be nested
- 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
no class
img-large
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-primarybutton-blackbutton-outlinebutton-successbutton-dangerForms
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.
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;
}