snack-ui / Snack Helper
Licence: mit
🗃 A universal CSS helper library.
Stars: ✭ 50
Labels
Projects that are alternatives of or similar to Snack Helper
Css Vars
Sass mixin to use CSS Custom Properties with Sass
Stars: ✭ 164 (+228%)
Mutual labels: scss, sass, css-variables
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+1358%)
Mutual labels: scss, sass
Hive Framework
A website development framework built with Sass, and incorporating jQuery UI.
Stars: ✭ 14 (-72%)
Mutual labels: scss, sass
Three Dots
🔮 CSS loading animations made by single element.
Stars: ✭ 912 (+1724%)
Mutual labels: scss, sass
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-30%)
Mutual labels: scss, sass
Primitive
⛏️ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+1466%)
Mutual labels: scss, sass
Avalanche
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system
Stars: ✭ 627 (+1154%)
Mutual labels: scss, sass
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-52%)
Mutual labels: scss, sass
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+1932%)
Mutual labels: scss, sass
Tabler
Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Stars: ✭ 24,611 (+49122%)
Mutual labels: scss, sass
Sass Webpack Plugin
[Deprecated] 🌈 Get your stylesheets together
Stars: ✭ 14 (-72%)
Mutual labels: scss, sass
Snack-helper
Snack-helper is a universal CSS helper library.
Installation
$ npm install snack-helper --save
Usage
@import '~snack-helper/dist/snack-helper.css';
If you use scss language, you can import the original files.
@import '~snack-helper/src/snack-helper';
Customization
Some helpers can be customized with variables. Take the spacing for example.
Here is the default spacing variable.
$spacer: 1rem !default;
$spacers: (
0: 0,
4: $spacer * .25,
8: $spacer * .5,
12: $spacer * .75,
16: $spacer,
24: $spacer * 1.5,
32: $spacer * 2,
48: $spacer * 3
) !default;
You can cover the whole original spacing with $spacers as you like.
$spacers: (
0: 0,
1: .25rem,
2: .5rem,
3: .75rem,
4: 1rem,
5: 1.5rem
);
@import '~snack-helper/src/snack-helper';
If you just want to extend the original spacing, you can use the $spacers-extend;
$spacers-extend: (
5: 5px,
10: 10px,
15: 15px
);
@import '~snack-helper/src/snack-helper';
Overview
License
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].