RelaxCSS

simple and minimal way to write CSS

Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Code : 

	
 Heading H1 

	
 Heading H2 

	
 Heading H3 

	
 Heading H4 

	
 Heading H5 

	
 Heading H6

Colors

Green Red Blue Yellow White Black

Code : 

	
	 Green 
	 Red 
	 Blue 
	 Yellow 
	 White 
	 Black

Background colors

Background Green Background Red Background Blue Background Yellow Background White Background Black

Code : 

		 Background Green 
		 Background Red 
		 Background Blue 
		Background  Yellow 
		Background  White 
		 Background Black

Buttons

Code :

Button sizes

Code :

Badges / tags

Code :

Text Sizes

Text-huge

Text-large

Text-medium

Text-small

Code : 

	
Text-huge

	
Text-large

	
Text-medium

	
Text-small

Borders

Border standard

Border 1

Border 2

Border 3

Code : 

		
Border standard

		
Border 1

		
Border 2

		
Border 3

Rounded Elements

rounded standard

rounded-1

rounded-2

rounded-3

Code : 

		
Border standard

		
Border 1

		
Border 2

		
Border 3

Shadows

Shadow standard

Shadow 1

Shadow 2

Shadow 3

Code : 

			
Shadow standard

			
Shadow 1

			
Shadow 2

			
Shadow 3

Header / Nav

Example 1

RelaxCSS

Or in Dark (just add the dark class) :

RelaxCSS

Code : 

	

		RelaxCSS

Example 2

Code :

Example 3

Code :

Bold and Light Text

Commodi blanditiis, nobis. Dignissimos facere eos. Atque cupiditate ,aperiam a consequatur ab eveniet!
Commodi blanditiis, nobis. Dignissimos facere harum veritatis quia repellendus aperiam a consequatur ab eveniet!

Code : 

	
Commodi blanditiis, nobis. Dignissimos facere eos. Atque cupiditate ,aperiam a consequatur ab eveniet!

	
Commodi blanditiis, nobis. Dignissimos facere  harum veritatis quia repellendus aperiam a consequatur ab eveniet!

Text-Containers

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Code : 

	


	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Stacked & centered elements

Centered text

centered text

Code : 

	

		
Centered text

Centered children

element
element
element

Code : 


	

		
element

		
element

		
element

Space between elements

element
element
element
element

Code : 

	

		
element

		
element

		
element

		
element

Stacked elements

element element element element

Code : 

	

		element
		element
		element
		element

Stacked & Centered elements

element element element element

Code : 

	

		element
		element
		element
		element

Margins

Margin left level one
Margin left level two
Margin left level three

Code : 

	

		
Margin left level one

		
Margin left level two

		
Margin left level three

Paddings

Padding level one
Padding level two
Padding level three

Code : 

	

		
Padding level one

		
Padding level two

		
Padding level three

Widths

width level one
width level two
width level three
width level max

Code : 

	

		
width level one

		
width level two

		
width level three

		
width level max

Light and Dark color variations

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Code : 

	

		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	


	

		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Tables

table head 1 table head 2 table head 3 table head 4 table head 5
content content content content content
content content content content content

Code : 

		

		

			table head 1
			table head 2
			table head 3
			table head 4
			table head 5
		

		

			content
			content
			content
			content
			content
		

		

			content
			content
			content
			content
			content

Forms

Sign up

Code : 

	

		
Sign up

Cards

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur tenetur id quo placeat distinctio esse sequi eligendi iusto? Maiores aspernatur suscipit harum facilis esse labore eos nulla laboriosam repellendus. Quisquam delectus optio libero, mollitia, est soluta, vitae, ex officia ut repellendus reprehenderit expedita voluptas ab velit dignissimos doloribus quia nobis quasi autem sapiente? Repellendus, ea repudiandae officia quidem facilis.

Code(1) 

	

		 
		
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur tenetur id quo placeat distinctio esse sequi eligendi iusto? Maiores aspernatur suscipit harum facilis esse labore eos nulla laboriosam repellendus.

Code(2)

Code(3) :
Thanks & Have fun :)