https://github.com/nulllogic/scssleon
ΰΌ» π¦ SCSSLEON framework ΰΌΊ β§β‘β¦
https://github.com/nulllogic/scssleon
css css-framework frontend scss scss-framework scssleon ui ux
Last synced: 2 months ago
JSON representation
ΰΌ» π¦ SCSSLEON framework ΰΌΊ β§β‘β¦
- Host: GitHub
- URL: https://github.com/nulllogic/scssleon
- Owner: nulllogic
- License: mit
- Created: 2013-01-13T11:32:19.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2026-03-17T17:49:16.000Z (3 months ago)
- Last Synced: 2026-03-18T07:12:59.613Z (3 months ago)
- Topics: css, css-framework, frontend, scss, scss-framework, scssleon, ui, ux
- Language: SCSS
- Homepage: http://nulllogic.github.io/scssleon-docs
- Size: 17.1 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
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
Awesome Lists containing this project
README
# SCSSLEON [](https://github.com/Tencent/QMUI_Web/ "Version Number")
Welcome 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 !
β [ Documentation ] β [ Bugs/Issues ] β [ StackOverflow ] β
## Table of Contents
βͺ β‘Λ β§ βββββ±TOCβ°ββββ β§ βΛβ‘
- [Why SCSSLEON?](#user-content---why-scssleon--)
- [Features](#user-content---features-)
- [Getting started](#user-content---getting-started-)
- [Usage Examples](#user-content---usage-examples-)
- [Showcase](#user-content---showcase-)
- [Documentation](#user-content---documentation-)
- [Contributing](#user-content--contributing-)
- [Thanks](#user-content--thanks-)
- [License](#user-content---license-)
### β Prerequisites
- Knowledge of [SCSS](https://sass-lang.com).
- [π³ Docker](https://www.docker.com)
- [π» Node](https://nodejs.org) + [π¦ NPM](https://nodejs.org)
## β π€ Why SCSSLEON ? β
SCSSLEON is designed for developers who want a lightweight, modular, and highly customizable SCSS framework. Unlike other frameworks, SCSSLEON:
- Offers a minimal footprint for faster load times.
- Provides intuitive mixins and utilities for rapid development.
- Supports easy theming with customizable variables.
- Color scheme support β easily add dark and light theme support
- Responsive support with zero efforts
- Easy to learn, easy to use
- Zero dependencies, except SASS
## β β¨ Features β
- **Responsive Grid System**: Build flexible layouts with a customizable 12-column grid.
- **Theming Support**: Easily customize colors, fonts, and spacing with SCSS variables.
- **Utility Classes**: Includes helpers for spacing, typography, and visibility.
- **Lightweight**: Minimal CSS output for faster performance.
- **Modern CSS**: Built-in support for Flexbox, CSS Grid, and custom properties.
## β π§ Getting Started β
Method #1 - NodeJS + NPM basic setup [ ππ₯𦴠primitive ]
1. Install packages β run the following command in your project directory to install SCSSLEON + SASS:
```bash
npm i @nulllogic/scssleon sass
```
2. Initialize your project (if not already done). If your project doesn't have a package.json file, create one by running:
```bash
npm init -y
```
3. Update `package.json` file. Add following strings
```json
"scripts": {
"sass-dev": "sass --watch --update --style=expanded styles:assets/css --load-path=node_modules",
"sass-prod": "sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules"
}
```
It will look like this :
```json
{
"dependencies": {
"@nulllogic/scssleon": "^1.0.5",
"sass": "^1.89.2"
},
"name": "test",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {},
"scripts": {
"sass-dev": "sass --watch --update --style=expanded styles:assets/css --load-path=node_modules",
"sass-prod": "sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
```
4. Create `app.scss` inside your project in `/styles` directory
```scss
@use 'sass:map';
@use "sass:string";
@forward "@nulllogic/scssleon/scss/mixins";
@forward "@nulllogic/scssleon/scss/functions";
@use "@nulllogic/scssleon/scss/config.scss" as config with (
// This is main config, that you can tweak
$config: (
prefix: "xii",
enable: (
wrapper: false,
),
)
);
@use "@nulllogic/scssleon/themes/default.scss" as theme with (
$config : config.$config,
$theme: (
html : (
body : (
_colors: (
light : (
background : rgb(244, 244, 244),
color: rgb(28, 29, 31),
),
dark : (
background : rgb(5, 17, 4),
color: '#ccc'
)
)
)
)
)
);
$config: config.$config;
$theme: theme.$theme;
```
5. Create `base.scss` inside your project in `/styles/components` directory
```scss
// Loading your SCSS module with pre-defined config and theme
// β Config
@use "../app.scss" as app;
// Loading modules and components
// β Root
@use "@nulllogic/scssleon/scss/root" with (
$config: app.$config,
$theme: app.$theme
);
// Great reset
@use "@nulllogic/scssleon/scss/reset" with (
$config: app.$config,
$theme: app.$theme
);
// Base
@use "@nulllogic/scssleon/scss/base" with (
$config: app.$config,
$theme: app.$theme
);
```
6. Run node command at root `/` of your project to generate CSS code to `/assets/css`
```bash
npm run sass-dev
```
7. Profit β you have output at `/assets/css` directory now π
## β π Usage Examples β
## β πΊ Showcase β
2
1
2
## β π Documentation β
SCSSLeon documentation is available here [http://nulllogic.github.io/scssleon-docs](http://nulllogic.github.io/scssleon-docs)
Documentation is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages [here](http://nulllogic.github.io/scssleon-docs).
Search is powered by [Algolia](https://community.algolia.com/docsearch/).
## β Contributing β
For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
## β Thanks β
Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
## β π License β
[MIT license](LICENSE)
