A simple and lightweight
CSS framework

Just 5.7 Kb when gzipped!

Responsive Grid

col-24
col-12
col-12
col-9
col-7
col-5
col-3
col-12 col-sm-12
col-12 col-sm-12
col-3 col-sm-6
col-3 col-sm-18
col-3 col-sm-10
col-3 col-sm-14
col-3 col-sm-14
col-3 col-sm-10
col-3 col-sm-18
col-3 col-sm-6
col-12 col-sm-12 col-xm-12
col-12 col-sm-12 col-xm-12

Buttons

Tiny control



Small control



Default size



Big control



Form





Tables

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7
Value 1a Value 2a Value 3a Value 4a Value 5a Value 6a Value 7a
Value 1b Value 2b Value 3b Value 4b Value 5b Value 6b Value 7b
Value 1c Value 2c Value 3c Value 4c Value 5c Value 6c Value 7c
Value 1d Value 2d Value 3d Value 4d Value 5d Value 6d Value 7d
Value 1e Value 2e Value 3e Value 4e Value 5e Value 6e Value 7e

Lists

Styled

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Unstyled (by default)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Inline

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Texts


Text aligned to left (by default)
Centered text
Text aligned to right
This font style is small This is an example of thin-text
This text is written in italics This is the underline style
Bold style is available too This text is bigger

This is the default style:

In the 8th century BC, Greece began to emerge from the Dark Ages which followed the fall of the Mycenaean civilization. Literacy had been lost and Mycenaean script forgotten, but the Greeks adopted the Phoenician alphabet, modifying it to create the Greek alphabet. From about the 9th century BC written records begin to appear.

This is the 'text' style:

In the 8th century BC, Greece began to emerge from the Dark Ages which followed the fall of the Mycenaean civilization. Literacy had been lost and Mycenaean script forgotten, but the Greeks adopted the Phoenician alphabet, modifying it to create the Greek alphabet. From about the 9th century BC written records begin to appear.

Spacing

no-padding xm-padding sm-padding md-padding lg-padding xl-padding

no-margin
xm-margin
sm-margin
md-margin
lg-margin
xl-margin

no-top-padding
no-bottom-padding
no-left-padding
no-right-padding

no-top-margin
no-bottom-margin
no-left-margin
no-right-margin

center
pull-left
pull-right
margin-1-right
margin-1-left
margin-2-right
margin-2-left
margin-3-right
margin-3-left
margin-4-right
margin-4-left
margin-5-right
margin-5-left
margin-6-right
margin-6-left
margin-7-right
margin-7-left
center



Colors

red
orange
yellow
lima
green
springgreen
cyan
blue
indigo
violet
magenta
deeppink
lightred-bg
lightorange-bg
lightyellow-bg
lightlima-bg
lightgreen-bg
lightspringgreen-bg
lightcyan-bg
lightblue-bg
lightindigo-bg
lightviolet-bg
lightmagenta-bg
lightdeeppink-bg
red-bg
orange-bg
yellow-bg
lima-bg
green-bg
springgreen-bg
cyan-bg
blue-bg
indigo-bg
violet-bg
magenta-bg
deeppink-bg

Sites using Shine CSS

Are you ready to design?

Share

Made with ❤️ by ImaginaLabs. You can fork it in Github: https://github.com/rmmfree/shine_css