eight-designs-css v1.1.0

Eight Designs - CSS Library

Eight Designs is the little CSS library that will make the design of your web apps spread faster.

Installation

npm install eight-designs-css

Usage

• Create an index.scss file (or whatever name you want) at the root of your project
• Customize anything you want
• Import the library

// Customizing the colors
$primary: #181c30;
$secondary: #e7dec6;

// Importing the library
@import "node_modules/eight-designs-css/sass/main.scss";

Compile and watch SCSS using Gulp (Recommended)

Install the required packages

npm install gulp gulp-sass sass

Create a gulpfile.js file at the root of your project and require the needed packages

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass")(require("sass"));

Add the buildStyles function to build your SCSS code using the src and sass functions and output it into a specific folder using the dest function (in our case, the output folder is the css folder)

function buildStyles() {
  return src("*.scss").pipe(sass()).pipe(dest("css"));
}

Add the watchStyles function to watch your SCSS code while coding using the watch function

function watchStyles() {
  watch(["*.scss", "*.html"], buildStyles);
}

Export the two functions that you have just added

exports.default = series(buildStyles, watchStyles);

Run the gulp command and happy coding

gulp

Note: This is my very first Node Package Manager (NPM), and this library is just in its childhood, it is not ready for production yet, but you can use it as a beta user to help me improve it. Thanks!

Why did I build the Eight Designs CSS library?

I started building the Eight Designs library out of my great love and curiosity for CSS & SCSS, and indeed, on November 16, I started searching for tutorials on the Internet. I found this one from the Net Ninja on YouTube. The tutorial was 22 videos, and I finished it in 4 days (on November 20), then, I spent the past two days modifying and extending the library, and here I am uploading it for you to help me scale it. Thanks, folks!

Say 👋 to me on Twitter

Shawki Hatem (Twitter)