{"id":25016389,"url":"https://github.com/stabla/clacss","last_synced_at":"2026-04-20T13:03:13.566Z","repository":{"id":58229878,"uuid":"69764269","full_name":"stabla/ClaCss","owner":"stabla","description":"Do not touch your css. Write CSS with class.","archived":false,"fork":false,"pushed_at":"2023-08-14T19:50:57.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-10T21:59:02.079Z","etag":null,"topics":["class","css","html","javascript"],"latest_commit_sha":null,"homepage":"https://stabla.github.io/ClaCss/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stabla.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-10-01T21:16:06.000Z","updated_at":"2023-08-14T19:48:12.000Z","dependencies_parsed_at":"2025-08-28T22:36:02.572Z","dependency_job_id":"617cf247-878e-43d4-a3af-6b514cb56902","html_url":"https://github.com/stabla/ClaCss","commit_stats":null,"previous_names":["idkn/clacss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stabla/ClaCss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FClaCss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FClaCss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FClaCss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FClaCss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stabla","download_url":"https://codeload.github.com/stabla/ClaCss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabla%2FClaCss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32048446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["class","css","html","javascript"],"created_at":"2025-02-05T09:29:18.198Z","updated_at":"2026-04-20T13:03:13.527Z","avatar_url":"https://github.com/stabla.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ClaCss.js\nClaCss is a super cool tool to write css with class (as color, margin, etc...).\n\n#### 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. \n\n  - Flexible\n  - Magic\n  - You can apply :hover\n  - You can save rules and use them again.\n  - You can apply any javascript style object\n\nFor 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]().\n\nIt's for little project. I don't recommend to use this on big project. CSS's files are better.\n\n\n## Table of contents\n1. [General \u0026 Global](#general--global)\n1. [Borders](#borders)\n1. [Fonts](#fonts)\n1. [Colors \u0026 Background's Color](#colors--backgrounds-color)\n1. [Height](#height)\n1. [Margin](#margin)\n1. [Padding](#padding)\n1. [Width](#width)\n1. [Hover](#hover)\n1. [Save configuration](#save-configuration)\n1. [Use saved configuration](#use-configuration)\n\n\n## List of short-hand's included property\n- Background-color : ```bg-c```\n- Color : ```c```\n- Font-size : ```f-s```\n- Font-weight : ```f-w```\n- Font-family : ```f-f```\n- Margin : ```ma```\n- Padding : ```pa```\n- Height : ```h```\n- Width : ```w```\n- Top : ```t``` / Right : ```r``` / Bottom : ```b``` / Left : ```l```\n\n(Want to add something ? Contact me or go on GitHub)\n\n### Download\n    bower install ClaCss\n\n or check [project's website](https://stabla.github.io/ClaCss)\n\n### Installation\n    \u003cscript src=\"ClaCss.js\"\u003e\u003c/script\u003e\n\nJust locate the js file, and let the magic explain itself (and write class, magic need little help)\n\n### Example\nWant to make color on a div really fast ?\n```\n\u003cdiv class=\"c_#333\"\u003e \u003c/div\n```\n\nYeah! Color #333 is now applied.\n\n### Important informations\nIf you haven't understood example, here's some explanation. ```c```, i.e color is the property, _ is for spacing. And #333 is value.\n\nIf you have multiple property's value use '**-**' to space each value.\nMultiple's value example : ```ma_12px-23px``` or ```ma_10px-15px-20px``` or ```ma_5px-10px-15px-20px```\n\nWhen 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.\n\nThus, it will be:\n\n**Example** : ```ma_5px-10px-15px-20px_m```.\n\n\n##### What can I use as value?\n*For color property*, you can use as value :\n* color name\n* hex number\n* rgb number\n* rgba number\n\nIf you're more interested, check *documentation*.\n\n# Documentation\n## General \u0026 Global\n\n  \u003ca name=\"#general\"\u003e\u003c/a\u003e\u003ca name=\"1.1\"\u003e\u003c/a\u003e\n[1.1](#general) **General**: Global solution.\n\nTo make changement, we use HTML DOM Style Object.\nThe documentation is available [here](http://www.w3schools.com/jsref/dom_obj_style.asp).\n\nFor 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.\nAn example ?  ```bs-overflowY_scroll ``` will set an  ```overflowY``` with an  ```scroll```.\n\n**Don't forget to add ```-m``` OR ```_m``` to specify that's a multiple value.**\n\n**Don't forget to add ```bs-``` before your property when it's not a available short-hand.**\n\n## Borders\n### Borders\n  \u003ca name=\"#borders-border\"\u003e\u003c/a\u003e\u003ca name=\"2.1.1\"\u003e\u003c/a\u003e\n[2.1.1](#borders-border) **Border**: Basic of border.\n\nBy 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.\n\n\u003ca name=\"#border-t\"\u003e\u003c/a\u003e\u003ca name=\"2.1.2\"\u003e\u003c/a\u003e\n[2.1.2](#border-t) **Border Top**: Top border.\n\nUsing ```bo-t_value``` where ```value``` can be written as the same way is [2.1.1](#border)\n\n\u003ca name=\"#border-r\"\u003e\u003c/a\u003e\u003ca name=\"2.1.3\"\u003e\u003c/a\u003e\n[2.1.3](#border-r) **Border Right**: Right border.\n\nUsing ```bo-r_value``` where ```value``` can be written as the same way is [2.1.1](#border)\n\n\u003ca name=\"#border-b\"\u003e\u003c/a\u003e\u003ca name=\"2.1.4\"\u003e\u003c/a\u003e\n[2.1.4](#border-b) **Border Bottom**: Bottom border.\n\nUsing ```bo-b_value``` where ```value``` can be written as the same way is [2.1](#border)\n\n\u003ca name=\"#border-l\"\u003e\u003c/a\u003e\u003ca name=\"2.1.5\"\u003e\u003c/a\u003e\n[2.1.5](#border-l) **Border left**: Left border.\n\nUsing ```bo-l_value``` where ```value``` can be written as the same way is [2.1.1](#border)\n\n### Border-radius\n\u003ca name=\"#border-radius\"\u003e\u003c/a\u003e\u003ca name=\"2.2\"\u003e\u003c/a\u003e\n[2.2](#border-radius) **Border radius**: Basic of border radius.\n\nBy using ```bora_value``` where ```value``` can be written as this : ```10px```. It will be a border-radius of 10px.\n\n\u003ca name=\"#border-radius-side\"\u003e\u003c/a\u003e\u003ca name=\"2.2.1\"\u003e\u003c/a\u003e\n[2.2.1](#border-radius-side) **Border radius side**: Side of border-radius.\nAs same logical than ```border-r``` or ```border-t```, you can use for border-radius :\n\n```\nt for top\n```\n```\nr for right\n```\n```\nb for bottom\n```\n```\nl for left\n```\n\nAnd what is you want to set topLeft for border-radius ?\nThan, you have the choice between ```tl``` OR ```tr``` OR ```bl``` OR ```br```.\n\nAn example :    ```bora-t_10px``` will set border_radius for all top with 10px.\n\n## Fonts\n\u003ca name=\"#font-size\"\u003e\u003c/a\u003e\u003ca name=\"3.1\"\u003e\u003c/a\u003e\n[3.1](#font-size) **Font Size**: Set font size.\n\nUsing ```f-s_value``` where ```value``` can be written in px, em, rem, %, you've understand, it's as you want.\n\n\u003ca name=\"#font-weight\"\u003e\u003c/a\u003e\u003ca name=\"3.2\"\u003e\u003c/a\u003e\n[3.2](#font-weight) **Font weight**: Set font weight.\n\nUsing ```f-w_value``` where ```value``` can be written as you write font-weight generally.\n\n\u003ca name=\"#font-family\"\u003e\u003c/a\u003e\u003ca name=\"3.3\"\u003e\u003c/a\u003e\n[3.3](#font-family) **Font family**: Set font family.\n\nUsing ```f-f_value``` where ```value``` can be written as you write font-family generally.\n\nExample : ```f-f_Merriweather```\n\n## Colors \u0026 Background's Color\n\u003ca name=\"#color\"\u003e\u003c/a\u003e\u003ca name=\"4.1\"\u003e\u003c/a\u003e\n[4.1](#color) **Colors**: Set color.\n\nUsing ```c_value``` where ```value``` can be written in color name (red, blue, green) or in hexa (#fff, #123456, etc), or in rgb/rgba.\n\n\u003ca name=\"#background-color\"\u003e\u003c/a\u003e\u003ca name=\"4.2\"\u003e\u003c/a\u003e\n[4.2](#background-color) **Background-color**: Set background-color.\n\nUsing ```bg-c_value``` where ```value``` can be written as you write it usually.\n\n## Height\n\u003ca name=\"#height\"\u003e\u003c/a\u003e\u003ca name=\"6.1\"\u003e\u003c/a\u003e\n[6.1](#height) **Height**: Set height.\n\nUsing ```h_value``` where ```value``` can be written as you write it usually. It can be in px, in %, etc\n## Margin\n\u003ca name=\"#margin\"\u003e\u003c/a\u003e\u003ca name=\"7.1\"\u003e\u003c/a\u003e\n[7.1](#margin) **Margin**: Set margin.\n\nUsing ```ma_value``` where ```value``` can be written as you write it usually. Example ? ```ma_15px```. Percentage is working too.\n\n**Multiple example** : ```ma_12px-23px``` or ```ma_10px-15px-20px``` or ```ma_5px-10px-15px-20px```\n\n## Padding\n\u003ca name=\"#padding\"\u003e\u003c/a\u003e\u003ca name=\"9.1\"\u003e\u003c/a\u003e\n[9.1](#padding) **Padding**: Set padding.\n\nUsing ```pa_value``` where ```value``` can be written as you write it usually. Example ? ```pa_15px```. Percentage is working too.\n\n**Multiple example** : ```pa_12px-23px``` or ```pa_10px-15px-20px``` or ```pa_5px-10px-15px-20px```\n\n## Width\n\u003ca name=\"#width\"\u003e\u003c/a\u003e\u003ca name=\"13.1\"\u003e\u003c/a\u003e\n[13.1](#width) **Width**: Set width.\n\nUsing ```w_value``` where ```value``` can be written as you write it usually. It can be in px, in %, etc\n\n\n## Hover\n\u003ca name=\"#hover\"\u003e\u003c/a\u003e\u003ca name=\"14.1\"\u003e\u003c/a\u003e\n[14.1](#hover) **Hover**: Set an :hover.\n\nUsing ```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.\n\nExample : ```c_green:hover```\n\n## Save configuration\n\u003ca name=\"#saveconf\"\u003e\u003c/a\u003e\u003ca name=\"15.1\"\u003e\u003c/a\u003e\n[15.1](#saveconf) **Save configuration**: Save configuration.\n\nYou 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.\n\nUse one unique name per configuration.\nExample : ```sc-Trumpostrophic``` will save your config.\n\nSave your config at the last to save all classes before.\nExample : ``` \u003cdiv class=\"c_red bg-c_white pa_20% sc-Trumpostrophic\"\u003e ``` will save color, bg-c and padding in Trumpostrophic.\n\n\n## Use configuration\n\u003ca name=\"#useconf\"\u003e\u003c/a\u003e\u003ca name=\"16.1\"\u003e\u003c/a\u003e\n[16.1](#useconf) **Use configuration**: Use configuration.\n\nTo 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%```.\n\nSo far, so good?\n\n# License\n\nClaCss by Guillaume Bonnet [@stabla on Github](https://github.com/stabla) is licensed under MIT.\n\n# Improvement\nCheck code. Write code. Push code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabla%2Fclacss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstabla%2Fclacss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabla%2Fclacss/lists"}