Lime scss framework is a lightweight scss framework based flexbox, with NO javascript dependency.
npm install lime-scss
sh
$ npm install lime-scss
`
npm site
This scss framework has got fully modular built, so you can use it smaller and bigger web projects easily. All core feature is overridable, so you can easily implement any kind brand into it. You can find the most important elements under \core library and you can customize your whole final .css from here. Because of the modular and separated build you can integrate any kind of 3rd party plugin or component what has got variables and connet with your brand guideline.

`bash
├── node_modules
├── dist (or build)
│ ├── css
│ │ ├── */.css
│ ├── img
│ │ ├── */.jpg/png/svg
│ ├── js
│ │ ├── */.js
│ ├── index.html
├── app
│ ├── scss
│ │ ├── */.scss
│ │ ├── bundle.scss
│ ├── img
│ │ ├── */.jpg/png/svg
│ ├── ts
│ │ ├── */.ts
│ └── components/templates/page
│ │ ├── component-specific/*.scss
│ │ ├── component-specific/*.ts
│ │ ├── component-specific/*.html
│ ├── index.html
├── package.json
└── .gitignore
`
$3
Here is a sample how the project bundle should look like.
`bash
├── bundle.scss
│ ├── 1.) overrides
│ ├── 2.) include lime-scss
│ ├── 3.) include your icons or 3rd party components with overrides
│ ├── 4.) other layout specific styles - header, footer, etc.
`
As you see above you should add your component or page specifis scss via Webpack to create the final minified and bundled .css
`css
/*
Override the defined variables and implement your brand.
You can keep the lime-scss folder and file structure to override the variables.
*/
1.)
@import "./scss/base/global.scss";
@import "./scss/base/colors.scss";
etc...
// Or you can put it one file like bootsrap as you wish
@import "./scss/my-theme.scss";
2.)
//import Lime scss
@import "~@lime-scss/scss/lime-bundle.scss";
3.)
//Include your icons/components etc...
@import "./scss/my-icons.scss";
@import "~@some-grid-plugin/*.scss";
4.)
// Application specific not framework and plugin related styles. This is just sample file names!
@import "header.scss";
@import "footer.scss";
``