{"id":22129181,"url":"https://github.com/tomattban/lazit_css","last_synced_at":"2026-05-21T17:01:35.931Z","repository":{"id":192929158,"uuid":"654292992","full_name":"ToMattBan/Lazit_CSS","owner":"ToMattBan","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-21T17:35:33.000Z","size":86,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-03-28T22:05:01.291Z","etag":null,"topics":["css"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/lazit-css","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ToMattBan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-15T20:06:02.000Z","updated_at":"2023-09-08T13:51:05.000Z","dependencies_parsed_at":"2023-09-06T01:53:42.487Z","dependency_job_id":"d94dcb79-0cde-4a0e-93d5-edcd853a2b8a","html_url":"https://github.com/ToMattBan/Lazit_CSS","commit_stats":{"total_commits":60,"total_committers":3,"mean_commits":20.0,"dds":"0.41666666666666663","last_synced_commit":"13d7609545ee02ceded17a849ee721d7d4b48931"},"previous_names":["tomattban/lazit_css"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2FLazit_CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2FLazit_CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2FLazit_CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2FLazit_CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ToMattBan","download_url":"https://codeload.github.com/ToMattBan/Lazit_CSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227606481,"owners_count":17792795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css"],"created_at":"2024-12-01T17:59:01.415Z","updated_at":"2026-05-21T17:01:35.917Z","avatar_url":"https://github.com/ToMattBan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lazit CSS\n\n**Lazit CSS** is a small utility-CSS generator.\nIt's meant to be your custom hammer for daily use.\nYou have the power to decide which utilities you will have, be it just some or all possible.\nIt builds a **minified utility stylesheet** based on a simple configuration file.\n\nYou can:\n\n* Use the **default prebuilt CSS**, which some minimum utilities work-ready\n* Or generate a **custom stylesheet** with your own utilities, colors, sizes, and everything else.\n\n---\n\n# Installation\n\nAs simple as a single command:\n\n```bash\nnpm install lazit-css\n```\n\nor\n\n```bash\npnpm add lazit-css\n```\n\n---\n\n# Creating a Custom Config\n\nTo generate your own utilities, create a config file in the root of your project:\n\nSupported config files are:\n```\nlazit.config.ts\nlazit.config.js\nlazit.config.mjs\nlazit.config.cjs\n```\n\nFill it with your own configs.\nIt's strongly recommended to use typescript, as we ship the generator with types to help you config your css.\n\nExample of config file:\n```ts\nimport { createConfig } from \"lazit-css\";\n\ncreateConfig({\n  colors: {\n    primary: \"#7A0EA8\",\n    secondary: \"#1E293B\"\n  }\n});\n```\n\nThen generate your new css with\n```\nnpm run lazit\n```\n\nor \n\n```\npnpm exec lazit\n```\n\n---\n\n# Using the CSS\n\nIn the entrypoint of your project, import it like that:\n\n```js\nimport \"lazit-css/style.css\";\n```\n\nOr if you are using something like Nuxt, you can also add to nuxt.config.ts\n```ts\nexport default defineNuxtConfig({\n  css: ['lazit-css/style.css']\n})\n```\n\nOr include it in HTML:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/lazit-css/public/style.min.css\"\u003e\n```\n\n---\n\n# Configuration Guide:\n\n## Prefix\n\nPrefix is exactly what the name implies, a prefix that will be followed by the rest of class compositionExample:\n\n```ts\ncreateConfig({\n  prefix: '_'\n  utilities: {\n    display: {\n      shorthand: \"d\",\n      values: {\n        flex: \"f\",\n      }\n    }\n  }\n});\n```\n\nGenerated CSS:\n\n```css\n._df { display: flex }\n```\n\n## Utilities\n\nUtilities are generated from CSS properties, with the following logic:\nshorthand + value { property_name: key }\n\nExample:\n\n```ts\ncreateConfig({\n  prefix: '_'\n  utilities: {\n    display: {\n      shorthand: \"d\",\n      values: {\n        flex: \"f\",\n        block: \"b\",\n        none: \"n\"\n      }\n    }\n  }\n});\n```\n\nGenerated CSS:\n\n```css\n._df { display: flex }\n._db { display: block }\n._dn { display: none }\n```\n\nThere are 4 types of utilities:\n- Value\n- Color\n- Size\n- Directional\n\nThe first one, value, is the default. It expects its values in keys, like the example above with display.\nIf type is ommited, Lazit will understand that you want a \"value\" type of util.\nMore on the other types in the next sections\n\n---\n\n## Colors\n\nYou can configure your colors to be used with utilities.\nThe colors configured here will also be put in :root, so you can use them in your own css.\n\n```ts\ncreateConfig({\n  colors: {\n    primary: \"#7A0EA8\",\n    secondary: \"#1E293B\"\n  }\n});\n```\n\nGenerated CSS:\n```css\n:root {\n  --primary: #7A0EA8;\n  --secondary: #1E293B;\n}\n```\n\nThis is REQUIRED if you use a utility with type color, for example:\n```ts\ncreateConfig({\n  prefix: '_'\n  utilities: {\n    color: {\n      shorthand: 'txc',\n      type: 'color' // --\u003e Note the type color here!!\n    },\n  }\n});\n```\n\nGenerated CSS:\n\n```css\n:root {\n  --primary: #7A0EA8;\n  --secondary: #1E293B;\n}\n\n._txcprimary {\n  color: #7A0EA8\n}\n._txcsecondary {\n  color: #1E293B\n}\n```\n\n---\n\n## Sizes\n\nSizes are values used with utilities that handles numeric values, like font-size.\nThis alone, won't do anything. You need to also define a utility that uses type size\nIn the same hand, this is REQUIRED if you use a utility with type size.\n\nExample:\n\n```ts\ncreateConfig({\n  prefix: '_',\n  sizes: {\n    \"sm\": \"24px\",\n    \"\": \"32px\",\n    \"lg\": \"48px\",\n  },\n  utilities: {\n    fontSize: {\n      shorthand: 'fz',\n      type: 'size' // --\u003e Note the type size here!!\n    },\n  }\n})\n```\n\nGenerated CSS:\n\n```css\n._fzsm { font-size: '24px' }\n._fz { font-size: '32px' }\n._fzlg { font-size: '48px' }\n```\n\n---\n\n## Directions\n\nDirections are used with utilities that needs to point to somowhere.\nEven if you define your directions, nothing will happens if you don't define a utility with type direction.\nIn the same hand, this is REQUIRED if you use a utility with type direction.\n\nYou will also need to define sizes for directions to work, as every CSS property that haves a direction also have a value\n\nExample:\n\n```ts\ncreateConfig({\n  prefix: '_',\n  directions: {\n    't': 'top',\n    'b': 'bottom'\n  },\n  sizes: {\n    sm: '24px',\n  },\n  utilities: {\n    padding: {\n      shorthand: 'p',\n      type: 'directional' // --\u003e Note the type directional here!!\n    },\n  }\n})\n```\n\nGenerated CSS:\n\n```css\n._psm { padding: 24px }\n._ptsm { padding-top: 24px }\n._pbsm { padding-bottom: 24px }\n```\n\n---\n\n## Grid\n\nYou can generate simple fractional grid widths:\n\n```ts\ncreateConfig({\n  prefix: '_'\n  grid: {\n    divisor: \"/\",\n    total: 12\n  }\n});\n```\n\nGenerated CSS:\n\n```\n._1/12 { width: 8.33333% }\n._2/12 { width: 16.6667% }\n...\n._12/12 { width: 100% }\n```\n\n---\n\n## Responsive\n\nLazit believes in a mobile-first approach. But also that mobile isn't everything that exists in the web. So there is a option to create your own breakpoints that all classes will follow.\n\nIt generates believing that mobile is the default breakpoint, and anything else comes after. So, if you use a class with breakpoint, it will replace the mobile one. And thus on, so a bigger breakpoint always replaces the smaller one.\n\nExample:\n\n```ts\ncreateConfig({\n  prefix: '_',\n  responsive: {\n    breakpoints: {\n      'desktop': 1200,\n    },\n    divisor: '@'\n  },\n  utilities: {\n    display: {\n      shorthand: \"d\",\n      values: {\n        flex: \"f\",\n      }\n    }\n  }\n});\n```\n\nGenerated CSS:\n\n```css\n._df { display: flex }\n@media (min-width: 1200px) {\n  ._df\\@desktop { display: flex }\n}\n```\n\nWhere the @desktop one would have a highwer priority than the mobile one.\nSo, we could use it like\n\n```html\n\u003ch1 class=\"_dn _db@desktop\"\u003eLazit CSS\u003c/h1\u003e\n```\n\nThis way the title would just be shown for screens bigger than 1200px, and before that display none would be the rule with more priority\n\n---","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomattban%2Flazit_css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomattban%2Flazit_css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomattban%2Flazit_css/lists"}