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 AppLabs. You can fork it in Github: https://github.com/rmmfree/shine_css