Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leslitech/lesli-css
SCSS Utilities for websites, apps and web applications
https://github.com/leslitech/lesli-css
Last synced: about 1 month 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 (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-10-21T05:32:10.000Z (3 months ago)
- Last Synced: 2024-11-21T10:13:22.998Z (about 2 months ago)
- Language: SCSS
- Homepage: https://lesli.dev/css
- Size: 1.1 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/
│ ├── 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
--------
```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)
