ClaCss.js (Complete)

(Complete mean it’s without Basesign. If you want the Basesign version, click here. Or check the Basesign’s page).

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.

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.

Table of contents

  1. General & Global
  2. Borders
  3. Fonts
  4. Colors & Background’s Color
  5. Height
  6. Margin
  7. Padding
  8. Width
  9. Hover
  10. Save configuration
  11. Use saved configuration

List of short-hand’s included property

(Want to add something ? Contact me or go on GitHub)

Download

bower install ClaCss

or check project’s website

Installation

<script src="ClaCss.js"></script>

Just locate the js file, and let the magic explain itself (and write class, magic need little help)

Example

Want to make color on a div really fast ?

<div class="c_#333"> </div

Yeah! Color #333 is now applied.

Important informations

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.

What can I use as value?

For color property, you can use as value :

If you’re more interested, check documentation.

Documentation

General & Global

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.

Borders

Borders

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

Border-radius

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.

Fonts

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

Colors & Background’s Color

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.

Height

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

Margin

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

Padding

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

Width

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

Hover

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

Save configuration

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.

Use configuration

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 ?

License

ClaCss by Guillaume Bonnet @stabla on Github is licensed under MIT.

Improvement

Check code. Write code. Push code.