CSS Framework

This is a CSS framework designed to have basic functionalities. Sample Website Live Demo

Technologies Used

HTML5
CSS3
SASS

How to use the framework

The framework was designed to be responsive using display: flex property. The javascript is meant to make the navigation bar responsive

Colors

Text colors

You can add these classes -- text-primary, text-secondary, text-tertiary, text-accent, text-white, text-gray-1, text-gray-2, and text-gray-3 -- to change the text color.

Background colors

You can add background colors using these classes -- bg-primary, bg-secondary, bg-tertiary, bg-accent, bg-white, bg-gray-1, bg-gray-2, and bg-gray-3.

Form input, buttons and links

Use the class .btn to use predefined CSS styling for your form input, buttons or links.

Body

Body has a predefined font-size of 16px and font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif.

Breakpoints

We defined breakpoints using: $huge: 1300px $large: 1024px $medium: 900px $small: 540px

Layout

The classes .container and .container-fluid defines the max-width of the layout. The class .container-fluid stretches to the full screen while .container class has a max-width.

Alignment, transformation and spacing

The classes -- text-center, text-right, and text-left align the text according to the naming convention.
The classes -- align-right and align-left align elements according to the naming convention.
The classes -- float-right and float-left float elements according to the naming convention.
The class .clearfix clears any float overflow.
The classes -- text-uppercase, text-lowercase, and text-capitalize transform the text according to the naming convention.
These classes are used for adding margin and padding. The m stands for margin and the p for padding, after that you can add a - and a value from 1 to 3 in order to add 5, 10 or 15 pixels respectively. You can use the letters x, y, t, b, r or l between the letter and the - to specify the side.
m-1 m-2 m-3
mx-1 mx-2 mx-3
my-1 my-2 my-3
mr-1 mr-2 mr-3
ml-1 ml-2 ml-3

p-1 p-2 p-3
px-1 px-2 px-3
py-1 py-2 py-3
pr-1 pr-2 pr-3
pl-1 pl-2 pl-3

Navigation bar

Use the class .navbar to make your navigation bar responsive. You can use .navbar-logo class to make the logo align and the class navbar-nav for any other list of links in the navigation bar. The .navbar-toggle makes the list of navigation bar links disappear and display under the icon toggle on click.

Grid

This framework uses a 6-column grid to define the width. It is necessary to specify the row by adding class .row which makes every child a column. If you want to specify the width, you can add the class .col followed by - and varying number from 1 to 6 which proportionates each column with 6 being 100% width. You can also specify the responsiveness of the column by adding small, medium, large, and huge after the col- before the 1 to 6.
col col-small col-medium col-large col-huge
col-1 col-small-1 col-medium-1 col-large-1 col-huge-1
col-2 col-small-2 col-medium col-large col-huge-2
col-3 col-small-3 col-medium col-3-large col-huge-3
col-4 col-small-4 col-medium col-4-large col-huge-4
col-4 col-small-4 col-medium col-4-large col-huge-4
col-6 col-small-6 col-medium col-6-large col-huge-6

suretrust / css-framework