Skip to content

Latest commit

 

History

History
208 lines (122 loc) · 5.74 KB

README.md

File metadata and controls

208 lines (122 loc) · 5.74 KB
Raw

The FrAmE framework

Full fledged grid based framework no JS, just simple CSS . Preview

In order to solve the issues of robust CSS frameworks with many dependencies, our focus was on creating the framework for common basic CSS styling.

Getting started

In order to use the framework, please add following line to the <head> HTML file:

 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zlayabekrija/grid-based-framework/frame.css">

Resets

Reset of all the css values is included in the framework

Navbars

  • common navbar with links placed vertically with classes for links or elements v-nav-links or v-nav-items

  • navbar with horizontally placed links h-navbar

  • responsive navbar needs to have the class of md in order to respond on screen size

  • themed navbar with palette of 17 colors accomplished by adding the name of the color as an class (example h-navbar navy)

    Working example can be found here .

Grid columns

Bootstrap-like 12 column based pattern

Each grid based system needs to have parent element of row class

Type Class Name Range
Column Size col- 1-12
Column Offset col- -offset 1-6

Working example can be found here .

Forms

Common type of forms with elements horizontally and vertically aligned

  • each from starts with parent element of class of form

  • themed form has additional class of themed

  • inline forms (ex. search forms) are having form-inline as parent element

    Working example can be found here .

Colors & Themes

There are 17 common types of colors and themes. Themes will change the color on hover.

The colors and themes :

Type Class Name
White white or white-theme
Black black or black-theme
Silver silver or silver-theme
Red red or red-theme
Gray gray or gray-theme
Olive olive or olive-theme
Orange orange or orange-theme
Teal teal or teal-theme
Purple purple or purple-theme
Yellow yellow or yellow-theme
Aqua aqua or aqua-theme
Funchisa funchisa or funchisa-theme
Lime lime or lime-theme
Blue blue or blue-theme
Maroon maroon or maroon-theme
Navy navy or navy-theme
Green green or green-theme

Working example can be found here .

Borders

Border classes will allow us to define border thikness and position (top,left...)

Type Class Name Range
border b- 1-10
no-border b-0 n/a
border-position m- - [l,r,t,b][1-10]

Working example can be found here .

Padding

With padding classes we can set padding to the top,bottom,left and right

Type Class Name Range
padding p- 1-10
no-padding p-0 n/a
padding-position p- - [l,r,t,b][1-10]

Working example can be found here .

Margin

With margin classes we can set margin to the top,bottom,left and right

Type Class Name Range
margin m- 1-10
no-margin m-0 n/a
margin-position m- - [l,r,t,b][1-10]

Working example can be found here .

Utility classes

Display properties

Type Class Name
Block d-block or d-b
Inline d-inline or d-i
Inline Block d-inline-block or d-i
Flex d-flex or d-f
None d-none

Float properties

Type Class Name
Float left f-left
Float right f-right
Clear float clearfix

Text properties

Type Class Name
Align left left
Align right right
Align center center

Flexbox properties

Type Class Name
Justify center jc-flex-center
Justify start jc-flex-start
Justify end jc-flex-end
Justify space around jc-space-around
Justify space between jc-space-between

Flex direction properties

Type Class Name
Flex directon row fd-row
Flex direction column fd-col
Flex wrap f-wrap
Flex no wrap f-nowrap
Flex grow f-grow-[1 or 0]
Flex shrink f-shrink-[1 or 0]

Border radius properties

Type Class Name Range
Border radius br- 1 - 5
Border round b-round n/a

Authors