gosp.css

A light weight powerful css library to make front-end fast

Usage no npm install needed!

<script type="module">
  import gospCss from 'https://cdn.skypack.dev/gosp.css';
</script>

README

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

npm i gosp.css --save

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.

gulp default

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