Skip to content

tutorial.md

Latest commit

 

History

History
81 lines (60 loc) · 1.33 KB

tutorial.md

File metadata and controls

81 lines (60 loc) · 1.33 KB

BCSS

A modern simplified CSS library

Statement: who cares about node packages or postcss?

Tutorial

Padding, Margin, Font, and Border Radius size

What do they have in common?

  1. The Size options
  2. The Selector name

to add padding ->

p  (padding:6px;)
p-m (padding:16px;)
p-l (padding:32px;)
p-xl (padding:50px;)

Margin works the same, just swap out p for m

to add font sizes ->

f  (font-size:16px;)
f-m (font-size:20px;)
f-l (font-size:25px;)
f-xl (font-size:40px;)

to add radius to border ->

r  (border-radius:5px;)
r-m (border-radius:10px;)
r-l (border-radius:20px;)
r-full (border-radius:100px;)

What if you want to change something only on hover?

For every* class there is an accompanying hover class.
Just add hover- to the start of the class name.

For example

<p class="hover-p-xl">
	I Expand Padding on Hover
</p>

Colors

BCSS offers a fine tuned color palate with 8 colors

  1. White*
  2. Black*
  3. Calm ~ lightgreen
  4. Alert ~ red
  5. Info ~ darkred
  6. Null ~ brown
  7. Slate ~ dark oceangreen
  8. Silence ~ lightpurple

For background color -> bg-(color) or hover-bg-(color)
For text color -> (color)

<!-- 
A Black Background with purple* text
-->
<div class="bg-black silence f-xl">
	I am a colored box!
</div>