SCSSLEON

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 !

Table of Contents

• Why SCSSLEON?
• Features
• Getting started
• Usage Examples
• Showcase
• Documentation
• Contributing
• Thanks
• License

ⓘ Prerequisites

• Knowledge of SCSS.
• 🐳 Docker
• 💻 Node + 📦 NPM

┌ 🤔 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 ┐

1. Install packages – run the following command in your project directory to install SCSSLEON + SASS:

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:

npm init -y

3. Update package.json file. Add following strings

"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 :

{
  "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

@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

// 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

npm run sass-dev

7. Profit – you have output at /assets/css directory now 🙌

┌ 👓 Usage Examples ┐

┌ 📺 Showcase ┐

┌ 📚 Documentation ┐

SCSSLeon documentation is available here http://nulllogic.github.io/scssleon-docs

Documentation is built with Astro and publicly hosted on GitHub Pages here. Search is powered by Algolia.

┌ Contributing ┐

For contributing, please view the CONTRIBUTING.

┌ Thanks ┐

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

┌ 📜 License ┐

MIT license