https://github.com/stabla/clacss
Do not touch your css. Write CSS with class.
https://github.com/stabla/clacss
class css html javascript
Last synced: about 1 month ago
JSON representation
Do not touch your css. Write CSS with class.
- Host: GitHub
- URL: https://github.com/stabla/clacss
- Owner: stabla
- License: mit
- Created: 2016-10-01T21:16:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-08-14T19:50:57.000Z (almost 3 years ago)
- Last Synced: 2026-02-10T21:59:02.079Z (4 months ago)
- Topics: class, css, html, javascript
- Language: JavaScript
- Homepage: https://stabla.github.io/ClaCss/
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ClaCss.js
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.
## Table of contents
1. [General & Global](#general--global)
1. [Borders](#borders)
1. [Fonts](#fonts)
1. [Colors & Background's Color](#colors--backgrounds-color)
1. [Height](#height)
1. [Margin](#margin)
1. [Padding](#padding)
1. [Width](#width)
1. [Hover](#hover)
1. [Save configuration](#save-configuration)
1. [Use saved configuration](#use-configuration)
## List of short-hand's included property
- 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)
### Download
bower install ClaCss
or check [project's website](https://stabla.github.io/ClaCss)
### Installation
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 ?
```
[1.1](#general) **General**: Global solution.
To make changement, we use HTML DOM Style Object.
The documentation is available [here](http://www.w3schools.com/jsref/dom_obj_style.asp).
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](#borders-border) **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-t) **Border Top**: Top border.
Using ```bo-t_value``` where ```value``` can be written as the same way is [2.1.1](#border)
[2.1.3](#border-r) **Border Right**: Right border.
Using ```bo-r_value``` where ```value``` can be written as the same way is [2.1.1](#border)
[2.1.4](#border-b) **Border Bottom**: Bottom border.
Using ```bo-b_value``` where ```value``` can be written as the same way is [2.1](#border)
[2.1.5](#border-l) **Border left**: Left border.
Using ```bo-l_value``` where ```value``` can be written as the same way is [2.1.1](#border)
### Border-radius
[2.2](#border-radius) **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) **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) **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) **Font weight**: Set font weight.
Using ```f-w_value``` where ```value``` can be written as you write font-weight generally.
[3.3](#font-family) **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](#color) **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) **Background-color**: Set background-color.
Using ```bg-c_value``` where ```value``` can be written as you write it usually.
## Height
[6.1](#height) **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) **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) **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) **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) **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](#saveconf) **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 : ```
``` will save color, bg-c and padding in Trumpostrophic.
## Use configuration
[16.1](#useconf) **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](https://github.com/stabla) is licensed under MIT.
# Improvement
Check code. Write code. Push code.