gosp.css
Garlic, onion, salt and pepper...
How to use
Within sass project
@import "gosp.css/src/gosp";
CSS file
@import "gosp.css/dist/gosp.min.css";
HTML Link Tag
<link rel="stylesheet" href="./css/gosp.css/dist/gosp.min.css" />;
npm
gulpfile.js
let gosp = require('gosp.css').includePaths + '/src'
sass({
includePaths: [gosp]
})
style.scss
@import "gosp";
/*
Your awesome styles
*/
Build
Just compile gosp.scss file.
Without gulp
sass src/gosp.scss dist/gosp.css
Anchor
Remove underline decoration and outline
Add transition on hover
Background
Background color
Background-size
Background-position
Background-attachment
Background-image
Background colors
Class
Property
Value
bc0
background-color
#000
bc3
background-color
#333
bc6
background-color
#666
bc9
background-color
#999
bcA
background-color
#AAA
bcC
background-color
#CCC
bcE
background-color
#EEE
bcF
background-color
#FFF
Background size
Class
Property
Value
bscc
background-size
contain
bscv
background-size
cover
bsx
background-size
100% 100%
Background position
Class
Property
Value
bpbc
background-position
center bottom
bpbl
background-position
left bottom
bpbr
background-position
right bottom
bpcb
background-position
center bottom
bpcc
background-position
center center
bpcl
background-position
left center
bpcr
background-position
right center
bpct
background-position
center top
bplb
background-position
left bottom
bplc
background-position
left center
bplt
background-position
left top
bprb
background-position
right bottom
bprc
background-position
right center
bprt
background-position
right top
bptc
background-position
center top
bptl
background-position
left top
bptr
background-position
right top,
Background attachment
Class
Property
Value
baf
background-attachment
fixed
Background image
Class
Property
Value
biu
background-image
unset
Background repeat
Class
Property
Value
brnr
background-repeat
no-repeat
brr
background-repeat
repeat
brrx
background-repeat
repeat-x
brry
background-repeat
repeat-y
Box
Border none
Box sizing box
Box content box
Cursor
Class
Property
Value
curd
cursor
default
curna
cursor
not-allowed
curp
cursor
pointer
curt
cursor
text
curw
cursor
wait
Display
Class
Property
Value
db
display
block
dfx
display
flex
di
display
inline
dib
display
inline-block
din
display
initial
dn
display
none
dt
display
table
dtc
display
table-cell
dtr
display
table-row
Flex
Align
Grow
Justify
Order
Shrink
Direction
Flex align
Class
Property
Value
aic
align-items
center
aife
align-items
flex-end
aifs
align-items
flex-start
aiu
align-items
unset
asc
align-self
center
asfe
align-self
flex-end
asfs
align-self
flex-start
asu
align-self
unset
Flex direction
Class
Property
Value
fdc
flex-direction
column
fdr
flex-direction
row
fdcr
flex-direction
column-reverse
fdrr
flex-direction
row-reverse
Flex grow
Class
Property
Value
fg0
flex-grow
0
fg1
flex-grow
1
fg2
flex-grow
2
fg3
flex-grow
3
fg4
flex-grow
4
fg5
flex-grow
5
fg6
flex-grow
6
Note: From 0 to $gosp-grid-columns / 2
Flex justify
Class
Property
Value
jcc
justify-content
center
jcs
justify-content
stretch
jcu
justify-content
unset
jcfe
justify-content
flex-end
jcfs
justify-content
flex-start
jcsa
justify-content
space-around
jcsb
justify-content
space-between
jsc
justify-self
center
jss
justify-self
stretch
jsu
justify-self
unset
jsfe
justify-self
flex-end
jsfs
justify-self
flex-start
jssa
justify-self
space-around
jssb
justify-self
space-between
Flex order
Class
Property
Value
ord-1
order
-1
ord0
order
0
ord1
order
1
ord2
order
2
ord3
order
3
ord4
order
4
ord5
order
5
ord6
order
6
ord7
order
7
ord8
order
8
ord9
order
9
ord10
order
10
ord11
order
11
ord12
order
12
Flex shrink
Class
Property
Value
fsh0
flex-shrink
0
fsh1
flex-shrink
1
fsh2
flex-shrink
2
fsh3
flex-shrink
3
fsh4
flex-shrink
4
fsh5
flex-shrink
5
fsh6
flex-shrink
6
Note: From 0 to $gosp-grid-columns / 2
Flex wrap
Class
Property
Value
fwnw
flex-wrap
no-wrap
fww
flex-wrap
wrap
fwwr
flex-wrap
wrap-reverse
Floats
Class
Property
Value
fl
float
left
fn
float
none
fr
float
right
fu
float
unset
Font
Prefix class
Property
Unit
From
To
Gap
fsp
font-size
px
8
48
2
fsp
font-size
px
50
100
10
fse
font-size
em
0.5
3
0.25
fsr
font-size
rem
0.5
3
0.25
Class
Property
Value
fw100
font-weight
100
fw200
font-weight
200
fw300
font-weight
300
fw400
font-weight
400
fw500
font-weight
500
fw600
font-weight
600
fw700
font-weight
700
fw800
font-weight
800
fw900
font-weight
900
b
font-weight
bold
l
font-weight
lighter
n
font-weight
normal
i
font-style
italic
o
font-style
oblique
Form
Custom select with angle-down
Outline 0 on each form control
Generals
Class
Property
Value
fw
width
100%
w100vw
width
100vw
Grid
Type
Description
Nested
Offset
Pull
Push
Flex
Based on flexboxgrid)
Yes
Yes
Yes
Yes
Float
Based on twbs bootstrap)
Yes
Yes
Yes
Yes
Inline
Same as bootstrap but using inline-block)
Yes
Yes
Yes
Yes
Fractionary
Using fractions like col-md-1-2 eq col-md-6 based on wp grid by Ricardo Aguirre)
Yes
Yes
Yes
Yes
Note: You can order flex columns using order classes and order media helpers.
Height
Class
Property
Value
h0
height
0
h25p
height
25%
h50p
height
50%
h75p
height
75%
h100p
height
100%
Prefix class
Property
Unit
From
To
Gap
h
height
px
0
45
5
h
height
px
50
90
10
h
height
px
100
500
50
List
Class
Description
list-reset
Sets margin and padding to 0 and list-style to none
list-inline
Displays list items as inline-block
list-block
Displays list items as block
Class
Property
Value
list-columns-1
columns
1
list-columns-2
columns
2
list-columns-3
columns
3
list-columns-4
columns
4
list-columns-5
columns
5
list-columns-6
columns
6
Note: From 1 to $gosp-grid-columns / 2
Class
Property
Value
lsd
list-style
decimal
lsdlz
list-style
decimal-leading-zero
lsla
list-style
lower-alpha
lslr
list-style
lower-roman
lsua
list-style
upper-alpha
lsur
list-style
upper-roman
Margin and padding
Prefix class
Property
Unit
From
To
Gap
m
margin
px
0
50
5
mt
margin-top
px
0
50
5
mr
margin-right
px
0
50
5
mb
margin-bottom
px
0
50
5
ml
margin-left
px
0
50
5
p
padding
px
0
50
5
pt
padding-top
px
0
50
5
pr
padding-right
px
0
50
5
pb
padding-bottom
px
0
50
5
pl
padding-left
px
0
50
5
Position
Prefix class
Property
Unit
From
To
Gap
t
top
px
0
50
5
r
right
px
0
50
5
b
bottom
px
0
50
5
l
left
px
0
50
5
Class
Property
Value
pa
position
absolute
pf
position
fixed
pr
position
relative
ps
position
static
psy
position
sticky
pu
position
unset
Class
Description
abs
Creates a layer with the same width and height over the parent element
Show and hide
Class
hide
hide-[media-query]
hide-[media-query]
hide-[media-query]
hide-[media-query]-below
hide-[media-query]-above
hide-[media-query]
show
show-[media-query]
show-[media-query]
show-[media-query]
show-[media-query]-below
show-[media-query]-above
show-[media-query]
Table
Class
Description
Collapsed
Border collapsed
Fixed
Columns with the same width
Responsive
Table rows to columns under sm size
Striped
Even rows with light gray background
Text
Class
Property
Value
tac
text-align
center
taj
text-align
justify
tal
text-align
left
tar
text-align
right
tdlt
text-decoration
line-through
tdo
text-decoration
overline
tdou
text-decoration
underline overline
tdu
text-decoration
underline
tduo
text-decoration
underline overline
tduos
text-decoration
underline overline line-through
tduso
text-decoration
underline overline line-through
tdous
text-decoration
underline overline line-through
tdosu
text-decoration
underline overline line-through
tdsou
text-decoration
underline overline line-through
tdsuo
text-decoration
underline overline line-through
ttc
text-transform
capitalize
ttl
text-transform
lowercase
ttn
text-transform
none
ttu
text-transform
uppercase
tdsda
text-decoration-style
dashed
tdsdo
text-decoration-style
dotted
tdss
text-decoration-style
solid
tdsw
text-decoration-style
wavy
tdi
text-direction
initial
tdl
text-direction
ltr
tdr
text-direction
rtl
Class
Description
paragraph-reset
Sets margin to 0
Vertial align
Class
Property
Value
vab
vertical-align
bottom
vabl
vertical-align
baseline
vainh
vertical-align
inherit
vam
vertical-align
middle
vasub
vertical-align
sub
vasup
vertical-align
super
vat
vertical-align
top
vatb
vertical-align
text-bottom
vatt
vertical-align
text-top
Visibility
Class
Property
Value
vc
visibility
collapse
vh
visibility
hidden
vu
visibility
unset
vv
visibility
visible
Z Index
Index
Elements
-1
Any
1
Any
10
Fixed
100
Dialog
1000
Fullscreen layers
Breakpoints
Size
Min
Max
Prefix
xs
480px
.col-xs
sm
481px
768px
.col-sm
md
769px
1280px
.col-md
lg
1281px
1600px
.col-lg
xl
1601px
col-xl
.col-xl
Media queries
Size
Mixin
xs
xs()
sm
sm()
sm-down
sm-down()
sm-up
sm-up()
md
md()
md-down
md-down()
md-up
md-up()
lg
lg()
lg-down
lg-down()
lg-up
lg-up()
xl
xl()
Example:
@include sm-up {
// rules
}
Media helpers
This classes will be able to change property-value classes in each display resolution. Remember mobile first.
{size}-{key}{val}
Margin
Padding
Font size (px, em, rem)
Position
Text align
List columns
Hide and show
Property
Value
Helper class
Responsive helper
Margin
From 0 to 50
m50
md-m50
Margin top
From 0 to 50
mt50
md-mt50
Margin right
From 0 to 50
mr50
md-mr50
Margin left
From 0 to 50
ml50
md-ml50
Margin bottom
From 0 to 50
mb50
md-mb50
Padding
From 0 to 50
p50
md-p50
Padding top
From 0 to 50
pt50
md-pt50
Padding right
From 0 to 50
pr50
md-pr50
Padding left
From 0 to 50
pl50
md-pl50
Padding bottom
From 0 to 50
pb50
md-pb50
Font size
From 8 to 48
fsp16
md-fsp16
Font size
From 50 to 100
fsp60
xs-fsp20
Class
Responsive class
Description
list-inline
[media-query]-list-inline
Displays list items as inline-block
list-block
[media-query]-list-block
Displays list items as block
Credits
Changelog
Rebuilt lib using sass with scss syntax
Removed color palette mixin
Added xl media size
Added auto column
Added flex push and pull
Added list-inline and list-block helpers and responsive helpers
Changed size readme prefix to media-query
node_module bug
Restores .list-reset
class
Added functions import to media