Skip to content

Latest commit

 

History

History
69 lines (61 loc) · 1.71 KB

Classes.md

File metadata and controls

69 lines (61 loc) · 1.71 KB

• HOW TO USE OUR CLASSES IN HTML •

STRUCTURE

Components

included file readme in components folder

GRID

row // row
col-1  // column width 100%
col-2 // column width 50%
col-3 // column width 33.3%
col-4 // column width 25%
col-5 // column width 20%
col-23 // column width 66.6%
col-2m // column min-width 50%
col-25 // column width 40%

CARD

w-card // card body
w-card _pd  // card with padding
w-card__header // header card inside w-card

Atom (should turn on in file app.scss)

1. Display
	d-b //display-block:
	d-ib //display-inline-block
	d-f // display-flex
	fd-c // flex-direction-column
	jc-sb // justify-content-space-between
	jc-fs // justify-content-flex-start
	jc-c // justify-content-center
	jc-fe // justify-content-flex-end
	ai-c // align-items-center
	ai-fe // align-items-flex-end
	ai-fs // align-items-flex-start
	ai-sb // align-items-space-between
	fg-1 // flex-grow-1

2. Margin (should set numbers in margin.scss)
	m$ // margin $ px
	mx$ // margin left and right $px
	my$ // margin top and bottom $px
	example: m10 // margin: 10px;

3. Padding (should set numbers in padding.scss)
	p$ // padding $ px
	px$ // padding left and right $px
	py$ // padding top and bottom $px
	example: p10 // padding: 10px;
4. Other
	pos-rel // position relative

5. Size
	w100p // width 100%
	h100p // height 100%\

6. Text
	ta-l // text-align-left
	ta-c // text-align-center
	ta-r // text-align-right
	ws-nw // white-space-no-wrap
	ws-pl // white-space-pre-line
	ws-n // white-space-normal
	fw400 // font-weight-400
	fw500 // font-weigh-500
	fw700 // font-weight-700
	tt-u // text-transform-uppercase

Icons

<i>edit</i> // We can use material icons in these formats