@nulllogic/scssleon 1.0.38 → 1.1.0

package/README.md

@@ -1,76 +1,283 @@
 <p align="left">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/header.jpg">
-      <img alt="XII/Grid CSS framework" src="./.imgs/header.jpg">
+      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/header_dark.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>↪ ≡˚ ✧ ━━━━⊱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 />
+
+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 🙌
+
+<img alt="SCSSleon framework" src="./.imgs/method_1.jpg">
+
+</details>
 
-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`.
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-### ─ Running documentation locally
+<hr />
+
+## ┌ 👓 Usage Examples ┐
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 📺 Showcase ┐
+
+<table width="100%" border="0" colspan="0" rowspan="0">
+  <tr>
+    <td width="50%">
+    <a href="https://nulllogic.github.io/scssleon-docs/" target="_blank" title="SCSSleon documentation"><picture>
+      <img alt="SCSSleon framework" src="./.imgs/showcase/1.jpg">
+    </picture></a>
+    </td>
+    <td>2</td>
+   </tr> 
+   <tr>
+      <td>1</td>
+    <td>2</td>
+  </td>
+  </tr>
+</table>
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
 
-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
+## ┌ 📚 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/).
 
-Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
+<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).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-> For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
+<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.38",
-  "version_short": "1.0.38",
+  "version": "1.1.0",
+  "version_short": "1.1.0",
   "keywords": [
     "css",
     "sass",
+    "scss",
+    "scss-framework",
     "mobile-first",
     "responsive",
     "front-end",
@@ -14,17 +16,8 @@
     "web",
     "scssleon"
   ],
-  "scripts": {
-    "css": "npm run css-compile",
-    "css-compile": "sass --style expanded --source-map --embed-sources scss/:dist/css/",
-    "dist": "npm run css && npm run minify",
-    "watch": "sass --watch ./scss:./dist/css"
-  },
   "dependencies": {
-    "sass": "^1.89.0"
-  },
-  "devDependencies": {
-
+    "sass": "^1.90.0"
   },
   "homepage": "https://nulllogic.github.io/scssleon-docs",
   "style": "dist/scssleon.css",
@@ -41,4 +34,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   }
-}
+}

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,9 +15,25 @@
 $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') {
-  @debug $tag;
-  #{$tag} {
-    @include mixins.generate-properties(#{$tag}, $properties, $config);
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
+    #{$tag} {
+      @include mixins.generate-properties(#{$tag}, $properties, $config);
+    }
   }
 }

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,
   ),
-);
-// 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,22 +68,15 @@ $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: (
-    dropdown: 1000,
-    sticky: 1020,
-    fixed: 1030,
-    offcanvas-backdrop: 1040,
-    offcanvas: 1045,
-    modal-backdrop: 1050,
-    modal: 1055,
-    popover: 1070,
-    tooltip: 1080,
-    toast: 1090,
+    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);
 

package/scss/_content.scss

@@ -3,21 +3,29 @@
 │  │ ││││ │ ├┤ │││ │
 └─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
 */
-@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") {
-      #{$tag} {
-        @include mixins.generate-properties(#{$tag}, $properties, $config);
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
+
+    .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);
+        }
       }
     }
+
   }
 }

package/scss/_functions.scss

@@ -3,10 +3,10 @@
 @use 'sass:string';
 
 @function replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + replace(str-slice($string, $index + string.length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -20,7 +20,7 @@
     @return nil;
   }
 
-  @if (str-index($value, '.')) {
+  @if (string.index($value, '.')) {
     $path: string.split($value, '.');
     $val: map.get($config, $path...);
   } @else {
@@ -42,7 +42,7 @@
     @return nil;
   }
 
-  @if (str-index($value, '.')) {
+  @if (string.index($value, '.')) {
     $path: string.split($value, '.');
     $val: map.get($theme, $path...);
   } @else {

package/scss/_mixins.scss

@@ -1,22 +1,7 @@
 // ↓ 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

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
@@ -138,7 +139,10 @@ $color_scheme: functions.get-config($config, "color-scheme");
 
   // Images and content
   img,
+  iframe,
   svg {
+    // Adding `display` rule here, because if `display` is not specified, 2px will be added
+    display: inline-block;
     vertical-align: middle;
   }
 
@@ -350,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;