suretrust / css-framework

A responsive CSS framework created from scratch.

CSS Framework

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

Technologies Used

1. HTML5
2. CSS3
3. 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

1. The classes -- text-center, text-right, and text-left align the text according to the naming convention.
2. The classes -- align-right and align-left align elements according to the naming convention.
3. The classes -- float-right and float-left float elements according to the naming convention.
4. The class .clearfix clears any float overflow.
5. The classes -- text-uppercase, text-lowercase, and text-capitalize transform the text according to the naming convention.
6. 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

Authors

• Jeton Thaci
• Saheed Oladele (Email)