https://github.com/leslitech/lesli-css
SCSS Utilities for websites, apps and web applications
https://github.com/leslitech/lesli-css
Last synced: 3 months ago
JSON representation
SCSS Utilities for websites, apps and web applications
- Host: GitHub
- URL: https://github.com/leslitech/lesli-css
- Owner: LesliTech
- License: gpl-3.0
- Created: 2014-08-25T03:46:27.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2024-12-31T20:57:15.000Z (6 months ago)
- Last Synced: 2025-03-11T16:15:48.012Z (4 months ago)
- Language: SCSS
- Homepage: https://lesli.dev/css
- Size: 1.12 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
SCSS Utilities for websites and web applications
#### Installation
--------
```console
npm install lesli-css --save
```
#### Structure
--------
```text
lesli-css
└── source/
├── elements/
│ ├── columns
│ └── blockquote
├── components/
│ ├── boxes
│ └── navigation
├── layout/
│ ├── hero
│ ├── container
│ ├── normalize
│ └── scrollbar
├── functions/
│ └── color
├── helpers/
│ ├── flex
│ ├── fonts
│ ├── units
│ ├── spacing
│ └── breakpoint
├── settings/
│ └── variables
└── vendor/
└── bulma
```
#### Usage
--------
```scss
// 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](http://visitguatemala.com/) distributed under the *General Public License v 3.0* you can read the full license [here](http://www.gnu.org/licenses/gpl-3.0.html)
