gardrops-css v1.0.1

Gardrops SCSS/CSS Framework

Introduction

This is a CSS/SCSS framework for Gardrops Frontend ecosystem, which provides a set of frontend functions to make projects take less time. As this framework is based on postcss, it is compatible with any js framework that supports dynamic stylesheet injecting on runtime.

Why we need this instead of plain CSS?

There are things that CSS can't do without compiling it before. We need to be able to compile SCSS into CSS files, minify them and customize them according to our needs. Instead of editing the stylesheet every time, we need to make it adjustable for the current environment. That's why we need to have SCSS.

How to use this repo?

You can build it directly from source, or you can import it from the CDN.

npm run build-css : Would build the SCSS into CSS files directly into dist/css folder.

https://cdn/gardrops.css : You can simply import it to the HTML page using this CDN URL.

How to configure the environment?

If you're using React, which we already have used among our projects. You can just have your gardrops.config.js file in your root directory. Here is the sample configuration file that will be used to configure the environment.

module.exports = {
    plugins: [
        {'gardrops-slider'}
    ],
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb8ff',

    },
    fontFamily: {
      sans: ['Montserrat', 'sans-serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}