{"id":15041793,"url":"https://github.com/nulllogic/scssleon","last_synced_at":"2026-04-02T02:08:11.538Z","repository":{"id":6350663,"uuid":"7587300","full_name":"nulllogic/scssleon","owner":"nulllogic","description":"༻ 🦎 SCSSLEON framework ༺ ≧◡≦","archived":false,"fork":false,"pushed_at":"2026-03-17T17:49:16.000Z","size":17960,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-18T07:12:59.613Z","etag":null,"topics":["css","css-framework","frontend","scss","scss-framework","scssleon","ui","ux"],"latest_commit_sha":null,"homepage":"http://nulllogic.github.io/scssleon-docs","language":"SCSS","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/nulllogic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"patreon":"vladimirlukyanov"}},"created_at":"2013-01-13T11:32:19.000Z","updated_at":"2026-03-17T17:49:19.000Z","dependencies_parsed_at":"2025-12-30T14:07:52.590Z","dependency_job_id":null,"html_url":"https://github.com/nulllogic/scssleon","commit_stats":null,"previous_names":["nulllogic/16blocks","nulllogic/scssleon","nulllogic/16girls"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/nulllogic/scssleon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulllogic%2Fscssleon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulllogic%2Fscssleon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulllogic%2Fscssleon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulllogic%2Fscssleon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nulllogic","download_url":"https://codeload.github.com/nulllogic/scssleon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nulllogic%2Fscssleon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31294398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T01:43:37.129Z","status":"online","status_checked_at":"2026-04-02T02:00:08.535Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["css","css-framework","frontend","scss","scss-framework","scssleon","ui","ux"],"created_at":"2024-09-24T20:46:28.889Z","updated_at":"2026-04-02T02:08:11.529Z","avatar_url":"https://github.com/nulllogic.png","language":"SCSS","funding_links":["https://patreon.com/vladimirlukyanov"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"left\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./.imgs/header_dark.jpg\"\u003e\n      \u003cimg alt=\"SCSSleon framework\" src=\"./.imgs/header.jpg\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n# SCSSLEON [![Version Number](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnulllogic%2Fscssleon%2Frefs%2Fheads%2Fmaster%2Fpackage.json\u0026query=%24.version\u0026style=flat\u0026label=version\u0026labelColor=%23b0de48\u0026color=%231b3317)](https://github.com/Tencent/QMUI_Web/ \"Version Number\")\n\nWelcome to SCSSLEON framework ! It's the most advanced responsive front-end framework, that can boost development of your website or project. It was built in love and with love from internet technologies. Peace ! \n\n\u003chr /\u003e\n\n\u003cp align=\"center\"\u003e\n– [ \u003ca href=\"http://nulllogic.github.io/scssleon-docs\" target=\"_self\"\u003eDocumentation\u003c/a\u003e ] — [ \u003ca href=\"https://github.com/nulllogic/scssleon/issues\" target=\"_blank\"\u003eBugs/Issues\u003c/a\u003e ] — [ \u003ca href=\"https://stackoverflow.com/questions/tagged/scssleon\" target=\"_blank\"\u003eStackOverflow\u003c/a\u003e ] –\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n## Table of Contents\n\u003cdetails\u003e\n    \u003csummary\u003e↪ ≡˚ ✧ ━━━━⊱TOC⊰━━━━ ✧ ₊˚≡\u003c/summary\u003e\n\u003cbr /\u003e\n\n- [Why SCSSLEON?](#user-content---why-scssleon--)\n- [Features](#user-content---features-)\n- [Getting started](#user-content---getting-started-)\n- [Usage Examples](#user-content---usage-examples-)\n- [Showcase](#user-content---showcase-)\n- [Documentation](#user-content---documentation-)\n- [Contributing](#user-content--contributing-)\n- [Thanks](#user-content--thanks-)\n- [License](#user-content---license-)\n\u003cbr /\u003e\n\u003c/details\u003e\n\n\u003chr /\u003e\n\n\n### ⓘ Prerequisites\n- Knowledge of [SCSS](https://sass-lang.com).\n- [🐳 Docker](https://www.docker.com)\n- [💻 Node](https://nodejs.org) + [📦 NPM](https://nodejs.org)\n\n\u003chr /\u003e\n\n## ┌ 🤔 Why SCSSLEON ? ┐ \n\nSCSSLEON is designed for developers who want a lightweight, modular, and highly customizable SCSS framework. Unlike other frameworks, SCSSLEON:\n\n- Offers a minimal footprint for faster load times.\n- Provides intuitive mixins and utilities for rapid development.\n- Supports easy theming with customizable variables.\n- Color scheme support – easily add dark and light theme support\n- Responsive support with zero efforts\n- Easy to learn, easy to use\n- Zero dependencies, except SASS\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ ✨ Features ┐\n\n- **Responsive Grid System**: Build flexible layouts with a customizable 12-column grid.\n- **Theming Support**: Easily customize colors, fonts, and spacing with SCSS variables.\n- **Utility Classes**: Includes helpers for spacing, typography, and visibility.\n- **Lightweight**: Minimal CSS output for faster performance.\n- **Modern CSS**: Built-in support for Flexbox, CSS Grid, and custom properties.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ 🧭 Getting Started ┐\n\n\u003cdetails\u003e\n    \u003csummary\u003e Method #1 - NodeJS + NPM basic setup [ 🛖🔥🦴 primitive ] \u003c/summary\u003e\n\u003cbr /\u003e\n\n1. Install packages – run the following command in your project directory to install SCSSLEON + SASS:\n\n```bash\nnpm i @nulllogic/scssleon sass\n```\n\n2. Initialize your project (if not already done). If your project doesn't have a package.json file, create one by running:\n\n```bash\nnpm init -y\n```\n\n3. Update `package.json` file. Add following strings\n\n```json\n\"scripts\": {\n  \"sass-dev\": \"sass --watch --update --style=expanded styles:assets/css --load-path=node_modules\",\n  \"sass-prod\": \"sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules\"\n}\n```\n\nIt will look like this : \n```json\n{\n  \"dependencies\": {\n    \"@nulllogic/scssleon\": \"^1.0.5\",\n    \"sass\": \"^1.89.2\"\n  },\n  \"name\": \"test\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"devDependencies\": {},\n  \"scripts\": {\n    \"sass-dev\": \"sass --watch --update --style=expanded styles:assets/css --load-path=node_modules\",\n    \"sass-prod\": \"sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"description\": \"\"\n}\n```\n\n4. Create `app.scss` inside your project in `/styles` directory\n\n```scss\n@use 'sass:map';\n@use \"sass:string\";\n\n@forward \"@nulllogic/scssleon/scss/mixins\";\n@forward \"@nulllogic/scssleon/scss/functions\";\n\n@use \"@nulllogic/scssleon/scss/config.scss\" as config with (\n  // This is main config, that you can tweak\n  $config: (\n    prefix: \"xii\",\n    enable: (\n      wrapper: false,\n    ),\n  )\n);\n\n@use \"@nulllogic/scssleon/themes/default.scss\" as theme with (\n  $config : config.$config,\n  $theme: (\n    html : (\n      body : (\n        _colors: (\n          light : (\n            background : rgb(244, 244, 244),\n            color: rgb(28, 29, 31),\n          ),\n          dark : (\n            background : rgb(5, 17, 4),\n            color: '#ccc'\n          )\n        )\n      )\n    )\n  )\n);\n\n$config: config.$config;\n$theme: theme.$theme;\n```\n\n5. Create `base.scss` inside your project in `/styles/components` directory\n```scss\n// Loading your SCSS module with pre-defined config and theme\n// ↓ Config\n@use \"../app.scss\" as app;\n\n// Loading modules and components\n// ↓ Root\n@use \"@nulllogic/scssleon/scss/root\" with (\n    $config: app.$config,\n    $theme: app.$theme\n);\n\n// Great reset\n@use \"@nulllogic/scssleon/scss/reset\" with (\n    $config: app.$config,\n    $theme: app.$theme\n);\n\n// Base\n@use \"@nulllogic/scssleon/scss/base\" with (\n    $config: app.$config,\n    $theme: app.$theme\n);\n```\n\n6. Run node command at root `/` of your project to generate CSS code to `/assets/css`\n\n```bash\nnpm run sass-dev\n```\n\n7. Profit – you have output at `/assets/css` directory now 🙌\n\n\u003cimg alt=\"SCSSleon framework\" src=\"./.imgs/method_1.jpg\"\u003e\n\n\u003c/details\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ 👓 Usage Examples ┐\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ 📺 Showcase ┐\n\n\u003ctable width=\"100%\" border=\"0\" colspan=\"0\" rowspan=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"50%\"\u003e\n    \u003ca href=\"https://nulllogic.github.io/scssleon-docs/\" target=\"_blank\" title=\"SCSSleon documentation\"\u003e\u003cpicture\u003e\n      \u003cimg alt=\"SCSSleon framework\" src=\"./.imgs/showcase/1.jpg\"\u003e\n    \u003c/picture\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e2\u003c/td\u003e\n   \u003c/tr\u003e \n   \u003ctr\u003e\n      \u003ctd\u003e1\u003c/td\u003e\n    \u003ctd\u003e2\u003c/td\u003e\n  \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ 📚 Documentation ┐\n\nSCSSLeon documentation is available here [http://nulllogic.github.io/scssleon-docs](http://nulllogic.github.io/scssleon-docs)\n\nDocumentation is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages [here](http://nulllogic.github.io/scssleon-docs).\nSearch is powered by [Algolia](https://community.algolia.com/docsearch/).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ Contributing ┐\n\nFor contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ Thanks ┐\n\n\u003ca href=\"https://www.browserstack.com\" title=\"BrowserStack\" target=\"_blank\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./.imgs/bstack-logo-global.svg\"\u003e\n      \u003cimg alt=\"SCSSleon framework\" src=\"./.imgs/bstack-logo-global-dark.svg\"\u003e\n    \u003c/picture\u003e\n\u003c/a\u003e\u003cbr /\u003e\n\nThanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ┌ 📜 License ┐\n[MIT license](LICENSE)\n\n\u003chr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nulllogic.net/\" target=\"_blank\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./.imgs/logo_nulllogic_dark.png\"\u003e\n      \u003cimg alt=\"SCSSleon framework\" src=\"./.imgs/logo_nulllogic.png\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnulllogic%2Fscssleon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnulllogic%2Fscssleon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnulllogic%2Fscssleon/lists"}