lesli-css
v2.1.0
Published
SCSS Utilities for websites, apps and web applications
Downloads
83
Readme
Installation
npm install lesli-css --save
Structure
lesli-css
├── source/
│ ├── components/
│ │ ├── blockquote.scss
│ │ ├── columns.scss
│ │ ├── container.scss
│ │ └── navigation.scss
│ ├── functions/
│ │ └── colors.scss
│ ├── helpers/
│ │ └── units.scss
│ ├── mixins/
│ │ ├── breakpoint.scss
│ │ ├── flex.scss
│ │ ├── fonts.scss
│ │ ├── normalize.scss
│ │ └── scrollbar.scss
│ ├── settings/
│ │ └── variables.scss
│ └── vendor/
│ └── bulma.scss
├── tests
└── vendor
Usage
// Import the library
@import "lesli-css";
// Include your custom fonts for titles and body
@include lesli-css-fonts-standard("Domine", "OpenSans");
// Work with the color pallete
.test {
color: lesli-css-color(blue);
color: lesli-css-color(blue, 100);
color: lesli-css-color(blue, 300);
color: lesli-css-color(blue, 500); // default
color: lesli-css-color(blue, 700);
color: lesli-css-color(blue, 900);
}
// Breakpoints
@include lesli-css-breakpoint("small") {
// your code
}
@include lesli-css-breakpoint-only("mobile") {
// styles for min-width: 320px and max-width: 768px only
}
@include lesli-css-breakpoint-custom(100px) {
// styles start at 100px
}
@include lesli-css-breakpoint-custom(200px, 300px) {
// styles for min-width: 200px and max-width: 300px only
}
// customize the scrollbar (if supported)
@include lesli-css-scrollbar()
License
Software developed in Guatemala distributed under the General Public License v 3.0 you can read the full license here