@nulllogic/scssleon 1.0.4 → 1.0.6

package/README.md

@@ -1,76 +1,267 @@
 <p align="left">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./.imgs/header.jpg">
-      <img alt="XII/Grid CSS framework" src="./.imgs/header.jpg">
+      <img alt="SCSSleon framework" src="./.imgs/header.jpg">
     </picture>
 </p>
-Welcome to XII/Grid CSS 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 ! 
+
+# SCSSLEON [![Version Number](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnulllogic%2Fscssleon%2Frefs%2Fheads%2Fmaster%2Fpackage.json&query=%24.version&style=flat&label=version&labelColor=%23b0de48&color=%231b3317)](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 ! 
 
 <hr />
 
 <p align="center">
-– [ <a href="https://nulllogic.github.io/xiigrid/">Demo</a> ] — [ <a href="http://nulllogic.github.io/xiigrid/docs">Documentation</a> ] — [ <a href="https://github.com/nulllogic/xiigrid/issues">Bugs/Issues</a> ] — [ <a href="https://stackoverflow.com/questions/tagged/xiigrid">StackOverflow</a> ] –
+– [ <a href="http://nulllogic.github.io/scssleon-docs" target="_self">Documentation</a> ] — [ <a href="https://github.com/nulllogic/scssleon/issues" target="_blank">Bugs/Issues</a> ] — [ <a href="https://stackoverflow.com/questions/tagged/scssleon" target="_blank">StackOverflow</a> ] –
 </p>
 
-<p align="center">
-  <a href="https://nulllogic.net/"><img src="./.imgs/logo.png" alt="NullLogic logo"></a>
-</p>
+<hr />
 
-## ┌ 🧭 Quickstart ┐
+## Table of Contents
+<details>
+    <summary>↪ ≡─〰─〰─ Show TOC ─〰─〰─≡</summary>
+<br />
 
-[![IMAGE ALT TEXT HERE](http://www.sergiuko.com/wp-content/uploads/2012/04/vimeo-preview-627x351.jpg)](https://vimeo.com/83573522)
+- [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-)
+<br />
+</details>
 
-## ┌ 📚 Documentation ┐
+<hr />
 
-<p align="left">
-  <img src="./.imgs/documentation.jpg" width="100%" alt="xiigrid documentation">
-</p>
 
-xiigrid's documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at <https://nulllogic.github.io/xiigrid//>. The docs may also be run locally.
+### ⓘ Prerequisites
+- Knowledge of [SCSS](https://sass-lang.com).
+- [🐳 Docker](https://www.docker.com)
+- [💻 Node](https://nodejs.org) + [📦 NPM](https://nodejs.org)
+
+<hr />
+
+## ┌ 🤔 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
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ ✨ 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.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 🧭 Getting Started ┐
+
+<details>
+    <summary> Method #1 - NodeJS + NPM basic setup [ 🛖🔥🦴 primitive ] </summary>
+<br />
 
-Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `site/assets/js/search.js`.
+1. Install packages – run the following command in your project directory to install SCSSLEON + SASS:
 
-### ─ Running documentation locally
+```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:
 
-1. From the root `/` directory, run `make docs` in the command line.
-2. Open `http://localhost:8000/xiigrid/` in your browser.
-3. Enjoy the documentation locally
+```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";
 
-Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
+@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 🙌
+
+<img alt="SCSSleon framework" src="./.imgs/method_1.jpg">
+
+</details>
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 👓 Usage Examples ┐
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 📺 Showcase ┐
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 📚 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/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
 
 ## ┌ Contributing ┐
 
-<p align="left">
-  <img src="./.imgs/contributing.jpg" width="100%" alt="xiigrid contributing">
-</p>
+For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
 
-> For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
 
 ## ┌ Thanks ┐
 
-<p align="left">
-  <img src="./.imgs/thankyou.jpg" width="100%" alt="xiigrid sponsors">
-</p>
+<a href="https://www.browserstack.com" title="BrowserStack" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/bstack-logo-global.svg">
+      <img alt="SCSSleon framework" src="./.imgs/bstack-logo-global-dark.svg">
+    </picture>
+</a><br />
 
-<a href="https://www.browserstack.com"><img src="./.imgs/browserstack.jpg" alt="browserstack"></a><br />
 Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
 
-## ┌ 📜 License ┐
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-<p align="left">
-  <img src="./.imgs/license.jpg" width="100%" alt="xiigrid licence">
-</p>
+<hr />
 
+## ┌ 📜 License ┐
 [MIT license](LICENSE)
 
-<!--
-```mermaid
-graph LR
-  Frontend -->|API| Backend
-  Backend -->|Database| PostgreSQL
-  Backend -->|Payment| PaymentService
-```
--->
+<hr />
+
+<p align="center">
+  <a href="https://nulllogic.net/" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/logo_nulllogic_dark.png">
+      <img alt="SCSSleon framework" src="./.imgs/logo_nulllogic.png">
+    </picture>
+  </a>
+</p>

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.4",
-  "version_short": "1.0.4",
+  "version": "1.0.6",
+  "version_short": "1.0.6",
   "keywords": [
     "css",
     "sass",
+    "scss",
+    "scss-framework",
     "mobile-first",
     "responsive",
     "front-end",

package/scss/_base.scss

@@ -4,6 +4,9 @@
 └─┘┴ ┴└─┘└─┘
 */
 
+@use "sass:string";
+@use "sass:map";
+
 /* Load settings and functions */
 @use 'mixins' as mixins;
 @use 'functions' as functions;
@@ -12,8 +15,38 @@
 $config: nil !default;
 $theme: nil !default;
 
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+html {
+  color-scheme: string.unquote($color_scheme);
+}
+
+// data-theme attribute is changing the color scheme
+html[data-theme="dark"] {
+  color-scheme: dark
+}
+
+html[data-theme="light"] {
+  color-scheme: light
+}
+
 @each $tag, $properties in functions.get-theme($theme, 'html') {
-  #{$tag} {
-    @include mixins.generate-properties(#{$tag}, $properties, $config);
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
+
+    @if $scheme == 'light' {
+      #{$tag} {
+        @include mixins.generate-properties(#{$tag}, $properties, $config, (
+          scheme: $scheme,
+        ));
+      }
+    }
+
+    @if $scheme == 'dark' {
+      [data-theme="#{$scheme}"] #{$tag} {
+        @include mixins.generate-properties(#{$tag}, $properties, $config, (
+          scheme: $scheme,
+        ));
+      }
+    }
   }
 }

package/scss/_config.scss

@@ -14,44 +14,25 @@
 $config: () !default;
 
 $default-config: (
-  // scss-docs-start root-variables
-  prefix: "xii",
-  wrapper-class: "wrapper" // scss-docs-end root-variables
+  prefix: 'xii',
+  wrapper: '.wrapper'
 );
 
 // Container breakpoints
-// scss-docs-start container-max-widths
 $breakpoints-config: (
   breakpoints: (
-    sm: 540px,
-    md: 720px,
-    lg: 960px,
-    xl: 1140px,
-    xxl: 1320px,
-  ),
-) !default;
-// scss-docs-end container-max-widths
-
-$default-config: map.deep-merge($default-config, $breakpoints-config);
-
-// Grid breakpoints
-// scss-docs-start grid-breakpoints
-$grid-breakpoints-config: (
-  grid-breakpoints: (
-    xs: 0,
     sm: 576px,
     md: 768px,
     lg: 992px,
-    xl: 1200px,
-    xxl: 1400px,
+    xl: 1220px,
+    xxl: 1380px,
   ),
-);
-// scss-docs-end grid-breakpoints
+) !default;
 
-$default-config: map.deep-merge($default-config, $grid-breakpoints-config);
+$default-config: map.deep-merge($default-config, $breakpoints-config);
 
 $color_scheme-config: (
-  color-scheme: "light dark",
+  color-scheme: 'light dark',
 );
 
 $default-config: map.deep-merge($default-config, $color_scheme-config);
@@ -69,7 +50,7 @@ $enable-rules-config: (
     rtl: false,
     button-pointers: true,
     content-class: true,
-    wrapper: true,
+    wrapper: false,
   ),
 );
 
@@ -87,17 +68,16 @@ $content-default-config: (
 $default-config: map.deep-merge($default-config, $content-default-config);
 
 // Z-index
-// scss-docs-start z-index-stack
 $z-index-config: (
   z-index: (
+    tooltip: 3,
     dropdown: 4,
     header: 5,
     overlay: 6,
     modal : 7,
   ),
 ) !default;
-// scss-docs-end z-index-stack
 
 $default-config: map.deep-merge($default-config, $z-index-config);
 
-$config: map.deep-merge($default-config, $config);
+$config: map.deep-merge($default-config, $config);

package/scss/_content.scss

@@ -3,22 +3,45 @@
 │  │ ││││ │ ├┤ │││ │
 └─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
 */
-@use "sass:map";
+@use 'sass:map';
+@use 'sass:string';
 @use "functions" as functions;
 @use "./mixins" as mixins;
 
 $config: nil !default;
 $theme: nil !default;
 
-$is-content-enabled: functions.get-config($config, "enable.content");
+$is-content-enabled: functions.get-config($config, 'enable.content');
+$color_scheme: functions.get-config($config, 'color-scheme');
 
 @if ($is-content-enabled) {
-  .content {
-    @each $tag, $properties in functions.get-theme($theme, "content") {
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
 
-      // Only apply styling to elements, that stand right after `.content` class
-      & > #{$tag} {
-        @include mixins.generate-properties(#{$tag}, $properties, $config);
+    @if $scheme == 'light' {
+      .content {
+        @each $tag, $properties in functions.get-theme($theme, 'content') {
+
+          // Only apply styling to elements, that stand right after `.content` class
+          & > #{$tag} {
+            @include mixins.generate-properties(#{$tag}, $properties, $config, (
+              scheme: $scheme,
+            ));
+          }
+        }
+      }
+    }
+
+    @if $scheme == 'dark' {
+      .content:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
+        @each $tag, $properties in functions.get-theme($theme, 'content') {
+
+          // Only apply styling to elements, that stand right after `.content` class
+          & > #{$tag} {
+            @include mixins.generate-properties(#{$tag}, $properties, $config, (
+              scheme: $scheme,
+            ));
+          }
+        }
       }
     }
   }

package/scss/_mixins.scss

@@ -1,22 +1,6 @@
 // ↓ Helpers
 @forward "mixins/breakpoints";
-@forward "mixins/clearfix";
-
-@forward "mixins/box-shadow";
-@forward "mixins/border-radius";
-@forward "mixins/transition";
-@forward "mixins/gradients";
 
 // ↓ Generators
-@forward "mixins/generators/color-sheme";
 @forward "mixins/generators/components";
-@forward "mixins/generators/properties";
-@forward "mixins/generators/wrapper";
-
-// ↓ Utilities
-@forward "mixins/utilities";
-
-// ↓ Components
-@forward "mixins/forms";
-
-// ↓ Layout
+@forward "mixins/generators/properties";

package/scss/_reset.scss

@@ -6,22 +6,23 @@
 
 @use "sass:map";
 @use "sass:meta";
+
 @use "functions" as functions;
 @use "mixins" as mixins;
 
 $config: nil !default;
 $theme: nil !default;
 
-$prefix: functions.get-config($config, "prefix");
+$prefix: functions.get-config($config, 'prefix');
 
-$is-reset-enabled: functions.get-config($config, "enable.reset");
+$is-reset-enabled: functions.get-config($config, 'enable.reset');
 $is-button-pointers-enabled: functions.get-config(
   $config,
   "enable.button-pointers"
 );
-$is-spacing-enabled: functions.get-config($config, "enable.spacing");
+$is-spacing-enabled: functions.get-config($config, 'enable.spacing');
 
-$color_scheme: functions.get-config($config, "color-scheme");
+$color_scheme: functions.get-config($config, 'color-scheme');
 
 @if $is-reset-enabled {
   *,
@@ -48,13 +49,13 @@ $color_scheme: functions.get-config($config, "color-scheme");
   h5,
   h6 {
     margin: 0;
-    line-height: normal;
+    line-height: 1;
   }
 
   // Paragraph
   p {
     margin: 0;
-    line-height: normal;
+    line-height: 1;
   }
 
   // Lists
@@ -353,6 +354,22 @@ $color_scheme: functions.get-config($config, "color-scheme");
     vertical-align: baseline;
   }
 
+  // Definition list
+  dl {
+    dd {
+      margin: 0;
+    }
+
+    dt {
+      margin: 0;
+    }
+  }
+
+  // Blockquote
+  blockquote {
+    margin: 0;
+  }
+
   // Hidden attribute
   [hidden] {
     display: none !important;

package/scss/_root.scss

@@ -1,6 +1,7 @@
 /* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
-@use "sass:string";
-@use "./mixins" as mixins;
+@use 'sass:string';
+
+@use './mixins' as mixins;
 @use "./functions" as functions;
 
 $config: () !default;
@@ -10,19 +11,14 @@ $prefix: functions.get-config($config, "prefix");
 
 $is-smooth-scroll-enabled: functions.get-config(
   $config,
-  "enable.smooth-scroll"
+  'enable.smooth-scroll'
 );
 
-$color_scheme: functions.get-config($config, "color-scheme");
-
-$root-variables: functions.get-theme($theme, "root.variables");
-
 :root {
-  color-scheme: string.unquote($color_scheme);
-
+  /* 🌱𖣂🫚🌿 */
   @include mixins.generate-properties(
-    "root",
-    functions.get-theme($theme, "root"),
+    'root',
+    functions.get-theme($theme, 'root'),
     $config,
   );