lesli-css

SCSS Utilities for websites and web applications

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