ClaCss is a super cool tool to write css with class (as color, margin, etc...).
It's a personnal project, learned a lot from. But I understand if you think it's useless or if you consider that writting many classes is messy. Because, yes, it is.
- Flexible
- Magic
- You can apply :hover
- You can save rules and use them again.
- You can apply any javascript style object
For information, ClaCss is a component of Basesign which provide clever css classes to use, and write less css as possible. But you can also use ClaCss.js if you don't use Basesign.
It's for little project. I don't recommend to use this on big project. CSS's files are better.
- General & Global
- Borders
- Fonts
- Colors & Background's Color
- Height
- Margin
- Padding
- Width
- Hover
- Save configuration
- Use saved configuration
- Background-color :
bg-c - Color :
c - Font-size :
f-s - Font-weight :
f-w - Font-family :
f-f - Margin :
ma - Padding :
pa - Height :
h - Width :
w - Top :
t/ Right :r/ Bottom :b/ Left :l
(Want to add something ? Contact me or go on GitHub)
bower install ClaCss
or check project's website
<script src="ClaCss.js"></script>
Just locate the js file, and let the magic explain itself (and write class, magic need little help)
Want to make color on a div really fast ?
<div class="c_#333"> </div
Yeah! Color #333 is now applied.
If you haven't understood example, here's some explanation. c, i.e color is the property, _ is for spacing. And #333 is value.
If you have multiple property's value use '-' to space each value.
Multiple's value example : ma_12px-23px or ma_10px-15px-20px or ma_5px-10px-15px-20px
When you're using multiple values but it's an javascript's style object (not included in ClaCss.js's conf), like for example transition_value add -m or _m to specify that is a multiple value.
Thus, it will be:
Example : ma_5px-10px-15px-20px_m.
For color property, you can use as value :
- color name
- hex number
- rgb number
- rgba number
If you're more interested, check documentation.
1.1 General: Global solution.
To make changement, we use HTML DOM Style Object. The documentation is available here.
For example, you can change any property available on documentation's list. For this, find the property you want and write bs-yourProperty_value where value is the of the property you want to.
An example ? bs-overflowY_scroll will set an overflowY with an scroll.
Don't forget to add -m OR _m to specify that's a multiple value.
Don't forget to add bs- before your property when it's not a available short-hand.
2.1.1 Border: Basic of border.
By using bo_value where value can be written as this : 1px-solid-red. It will be a border of 1px with solid pixel in red color.
2.1.2 Border Top: Top border.
Using bo-t_value where value can be written as the same way is 2.1.1
2.1.3 Border Right: Right border.
Using bo-r_value where value can be written as the same way is 2.1.1
2.1.4 Border Bottom: Bottom border.
Using bo-b_value where value can be written as the same way is 2.1
2.1.5 Border left: Left border.
Using bo-l_value where value can be written as the same way is 2.1.1
2.2 Border radius: Basic of border radius.
By using bora_value where value can be written as this : 10px. It will be a border-radius of 10px.
2.2.1 Border radius side: Side of border-radius.
As same logical than border-r or border-t, you can use for border-radius :
t for top
r for right
b for bottom
l for left
And what is you want to set topLeft for border-radius ?
Than, you have the choice between tl OR tr OR bl OR br.
An example : bora-t_10px will set border_radius for all top with 10px.
3.1 Font Size: Set font size.
Using f-s_value where value can be written in px, em, rem, %, you've understand, it's as you want.
3.2 Font weight: Set font weight.
Using f-w_value where value can be written as you write font-weight generally.
3.3 Font family: Set font family.
Using f-f_value where value can be written as you write font-family generally.
Example : f-f_Merriweather
4.1 Colors: Set color.
Using c_value where value can be written in color name (red, blue, green) or in hexa (#fff, #123456, etc), or in rgb/rgba.
4.2 Background-color: Set background-color.
Using bg-c_value where value can be written as you write it usually.
6.1 Height: Set height.
Using h_value where value can be written as you write it usually. It can be in px, in %, etc
7.1 Margin: Set margin.
Using ma_value where value can be written as you write it usually. Example ? ma_15px. Percentage is working too.
Multiple example : ma_12px-23px or ma_10px-15px-20px or ma_5px-10px-15px-20px
9.1 Padding: Set padding.
Using pa_value where value can be written as you write it usually. Example ? pa_15px. Percentage is working too.
Multiple example : pa_12px-23px or pa_10px-15px-20px or pa_5px-10px-15px-20px
13.1 Width: Set width.
Using w_value where value can be written as you write it usually. It can be in px, in %, etc
14.1 Hover: Set an :hover.
Using property_value:hover where property is the property you want to set your hover and where value can be written as you write it usually.
Example : c_green:hover
15.1 Save configuration: Save configuration.
You can save all the property you have setted in your class. For this, use sc-nameOfYourConfig, sc- is to specify it's an saving, and obviously, nameOfYourConfig is the name you want to give it.
Use one unique name per configuration.
Example : sc-Trumpostrophic will save your config.
Save your config at the last to save all classes before.
Example : <div class="c_red bg-c_white pa_20% sc-Trumpostrophic"> will save color, bg-c and padding in Trumpostrophic.
16.1 Use configuration: Use configuration.
To use configuration : uc-nameOfYourConfiguration, where nameOfYourConfiguration is the name you have given to your config. For our previous example, we'll use uc-Trumpostrophic to apply c_red bg-c_white pa_20%.
So far, so good?
ClaCss by Guillaume Bonnet @stabla on Github is licensed under MIT.
Check code. Write code. Push code.