Superstylin
Enta in de dance, plug it in and we begin.
Enta in de dance, plug it in and we begin.
Superstylin is a drop-in CSS library that serves as a better CSS default for your HTML.
Most CSS libraries/frameworks are too big and try to solve too many problems. Superstylin is small and solves one problem only: default HTML styling.
With npm:
npm i superstylinAs a drop-in in your HTML:
<link rel="stylesheet" href="https://raw.githubusercontent.com/caiogondim/superstylin/master/src/index.css">Or go to the project's page, download the CSS and copy it to your project.
With fluid typography the text better adapts to the viewport. Try resizing your browser to see it in action.
Not only the text but all elements have their dimensions computed based on viewport size with min and max values.
| Name | Age | Height |
|---|---|---|
| Stephen Curry | 27 | 1,91 |
| Klay Thompson | 25 | 2,01 |
Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.
.some-class {
background-color: red;
}Enta in de dance, plug it in and we begin
command shift C to inspect element.
command option I to open DevTools.
Hover over to see the abbreviation: CSS
Click on the below text to expand details about it.
Requires a computer running a browser.
Indeterminate
Determinate
Dark mode ready. Superstylin has built-in support for dark/light interfaces.
Yellow 10
#FDE876
Yellow 20
#FDD600
Yellow 30
#DBB100
Yellow 40
#BE9B00
Yellow 50
#8C7300
Yellow 60
#735F00
Yellow 70
#574A00
Yellow 80
#3C3200
Yellow 90
#281E00
Yellow 100
#020100
Green 10
#C8F08F
Green 20
#B4E051
Green 30
#8CD211
Green 40
#5AA700
Green 50
#4B8400
Green 60
#2D660A
Green 70
#144D14
Green 80
#0A3C02
Green 90
#0C2808
Green 100
#010200
Teal 10
#A7FAE6
Teal 20
#6EEDD8
Teal 30
#41D6C3
Teal 40
#00B4A0
Teal 50
#008571
Teal 60
#006D5D
Teal 70
#005448
Teal 80
#003C32
Teal 90
#012B22
Teal 100
#000202
Blue 10
#C0E6FF
Blue 20
#7CC7FF
Blue 30
#5AAAFA
Blue 40
#5596E6
Blue 50
#4178BE
Blue 60
#325C80
Blue 70
#264A60
Blue 80
#1D3649
Blue 90
#152935
Blue 100
#010205
Purple 10
#EED2FF
Purple 20
#D7AAFF
Purple 30
#BA8FF7
Purple 40
#AF6EE8
Purple 50
#9855D4
Purple 60
#734098
Purple 70
#562F72
Purple 80
#412356
Purple 90
#311A41
Purple 100
#030103
Magenta 10
#FFD2FF
Magenta 20
#FF9EEE
Magenta 30
#FF71D4
Magenta 40
#FF3CA0
Magenta 50
#DB2780
Magenta 60
#A6266E
Magenta 70
#7C1C58
Magenta 80
#601146
Magenta 90
#3A0B2E
Magenta 100
#040102
Red 10
#FFD2DD
Red 20
#FFA5B4
Red 30
#FF7D87
Red 40
#FF5050
Red 50
#E71D32
Red 60
#AD1625
Red 70
#8C101C
Red 80
#6E0A1E
Red 90
#4C0A17
Red 100
#040001
Orange 10
#FFD791
Orange 20
#FFA573
Orange 30
#FF7832
Orange 40
#FF5003
Orange 50
#D74108
Orange 60
#A53725
Orange 70
#872A0F
Orange 80
#6D120F
Orange 90
#43100B
Orange 100
#030100
Gray 10
#eaeaea
Gray 20
#d8d8d8
Gray 30
#c0bfc0
Gray 40
#a6a5a6
Gray 50
#949394
Gray 60
#777677
Gray 70
#595859
Gray 80
#464646
Gray 90
#343334
Gray 100
#272727
White 1
#fcfcfc
White 2
#f9f9f9
White 3
#f6f6f6
White 4
#f3f3f3
Black 1
#030303
Black 2
#060606
Black 3
#090909
Black 4
#0c0c0c