Skip to Content

shale.css

shale.css

simple pseudo-skeuomorph CSS styles

shale.css provides a simple set of CSS styles to quickly make a prototype look presentable

customizable

every colour is set by a CSS variable to make it easier to change how things look. dark, light, and high contrast themes are already included

no overrides

shale.css does not override any global styles, so it can be used in any project, alongside any other CSS framework if you'd like

based on browser elements

no wonky custom components. shale.css directly uses browser functionality so everything works exactly as you would expect

check out some styles

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
def get_a_million_dollars():
	return P == NP

print(get_a_million_dollars())
100
200
300
400
500
600
700
800
900
subtle shadows
moderate shadows
puffy shadows
Note

Doo doo doo-doo doo doo doo doo

Important

Doo doo doo-doo doo doo doo doo

Warning

Doo doo doo-doo doo doo doo doo

Tip

Doo doo doo-doo doo doo doo doo

buttons and forms

enabled

button secondary button link

disabled

button secondary button link

headers and footers

example header bar (just the header)

example header bar (disabled)

example header bar with all the bells and whistles

😂 Live 🤔 Laugh 🥰 Love (command bar for optional actions)
command bar and navbar can be used separately if you want 😋 Yum

footer

containers

halves

third

quarters

icons

yup thats it

it aint much but its honest work