Build your src folder
Create a src folder with the following folder structure (this is optional to make use of the gulp tasks included to build LESS files)
General layout
.breath
Breathing (padded from top and bottom).rbreath
Right breath (left breath in RTL).lbreath
Left breath (right breath in RTL).r
float right (left float in RTL).l
float left (right float in RTL).spaced
bottom spaced.margintop
Margin top.padtop
Padding top.txtr
Right aligned (left alignted in RTL).txtc
Center aligned.bthin
Bottom bordered, thin.bthick
Bottom bordered, thick.clear
Clear both
.bthin.spaced
.bthick.spaced
Formatting
- .boldface: Bold
- .italicface: italic
- .large: Large
- .larger: Larger
- .small: Small
- .smaller: Smaller
- .lightfont: Light face font
- .red: Red
- .green: Greed
- .blue: Blue
- .light Light text
- .lighter Even lighter text
label
- .labeltext: Plain
- .yellowtext
- .lightyellowtext
- .redtext
- .lightredtext
- .greentext
- .lightgreentext
- .greytext
- .greydarktext
- .greynormaltext
- .whitetext
- .bluetext
- .lightbluetext
Boxes by style
- .yellowbox
- .lightyellowbox
- .redbox
- .lightredbox
- .whitebox
- .greenbox
- .lightgreenbox
- .greybox
- .whitedarkbox
- .greydarkbox
- .greynormalbox
- .whitenormalbox
- .bluebox
- .lightbluebox
h1: Header 1 Subtext (.hsub)
h2: Header 2 Subtext (.hsub)
h3: Header 3 Subtext (.hsub)
h4: Header 4 Subtext (.hsub)
h5: Header 5 Subtext (.hsub)
h6: Header 6
More boxes by type
.infobox
Info box
.alertbox
alertbox
.errorbox
errorbox
Lists
- A border list (.blist)
- Item
- Item
- .rowlist (padded and borded)
- Item
- Item
- Spaced out items
- .spacedout
- Item
- Normal list (.normal)
- Item
- Item
- Normal ordered list (.normal)
- Item
- Item
- Nested list (.nestedlist)
- Item
Tables
Striped and Tabulated (.striped .tabulated)
gcl1 | gcl2 | gcl3 | gcl4 | * |
---|
cl1 | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell |
footer | footer | footer | footer | footer |
.cl1 - .cl12 (per col in colgroup, or per td)
cl1 | cl2 | cl3 | cl4 | cl5 | * |
---|
cl1 | cell | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell | cell |
footer | footer | footer | footer | footer | footer |
Spacedout and Bordered (.spacedout .bordered)
gcl1 | gcl2 | gcl3 | gcl4 | * |
---|
cl1 | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell |
footer | footer | footer | footer | footer |
gcl1 | gcl2 | gcl3 | gcl4 | * |
---|
cl1 | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell |
cl1 | cell | cell | cell | cell |
footer | footer | footer | footer | footer |
Buttons
- Vinepaper
- Website
- Shut
- Framework name
- Developer
- Ayyash
- Location
- Amman
Label
ContentLabel
Content- Layout
- Content here