Simply CSS-resets, standard variables and it also contains mixins to help you develop your web project.
- Use command + F or ctrl + F to search for a keyword.
- Contributions welcome, please see contribution guide.
You can install this package locally with npm or yarn. You should install the latest stable version in the devDependencies
section in your package.json
.
# To get the latest stable version in devDependencies
npm install @bravobit/scss-starter --save-dev
# or
yarn add @bravobit/scss-starter --dev
If you want to use the mixins and are working in a .scss
file You should import our all.scss
file into your project to get the full product.
@import '~@bravobit/scss-starter/src/all.scss';
Or you can import all the files you want individually.
@import '~@bravobit/scss-starter/src/variables/_index.scss';
@import '~@bravobit/scss-starter/src/mixins/_index.scss';
@import '~@bravobit/scss-starter/src/generic/_index.scss';
@import '~@bravobit/scss-starter/src/elements/_index.scss';
If you want to include our default styling in your HTML you can use the compiled (and minified) version.
<link rel="stylesheet" href="%RELATIVE_NODE_MODULES%/@bravobit/scss-starter/dist/styles.css">
Do you want to use media queries for different device-sizes in your project, use the device
mixin.
.content {
max-width: 100%;
@include device(tablet) { max-width: 800px; }
}
You should add your z-index items to the $z-indexes
list to keep the layers organized, then use the z-index
mixin.
$z-indexes: (
'header',
'footer'
);
.header { @include z-index('header'); }
.footer { @include z-index('footer'); }
If you want an easy way to set the position of the element use the position
mixin.
.cube {
@include position(absolute, top 100% left 0);
}
Or you can use one of the helper mixins (relative
, absolute
, fixed
).
.cube {
@include relative(top 100% left 0);
@include absolute(left 0 right 50px);
@include fixed(top 0 bottom 0);
}
Do you want your animations and/or placeholder to work on every browser, use the prefix
mixins.
@include placeholder { color: red; };
@include keyframes(slide) { color: red; };
@include animation('slide 5s 3');
Do you want to use colors in your project, use the colors
function. To get a full list of the supported colors click here.
.main {
color: color('yellow', 400);
background-color: color('red');
}
You can use the 12-column grid system by using the following classes:
<div class="row">
<div class="column--8"></div>
<div class="column--4"></div>
</div>
<div class="row">
<div class="column--2"></div>
<div class="column--2"></div>
<div class="column--2"></div>
<div class="column--2"></div>
<div class="column--2"></div>
<div class="column--2"></div>
</div>
You should use the container element if you want to center some content with a fixed width (max: 1000px).
<div class="container"></div>
If you want to create the CSS file yourself you can run one simple command to build the project.
npm run build
If you want to make modifications to the project you can use the watch command to constantly watch all the .scss
files.
npm run build:watch