my-material-theme-1
v1.0.0
Published
<p align="center"> <img height="46px" width="411px" src="https://raw.githubusercontent.com/bravobit/scss-starter/master/logo.png"> <p align="center">Simply CSS-resets, standard variables and it also contains mixins to help you develop your web project
Downloads
2
Readme
- Use command + F or ctrl + F to search for a keyword.
- Contributions welcome, please see contribution guide.
Contents
Getting Started
Installation
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
Usage
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">
Mixins
Device
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; }
}
Z-index
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'); }
Positioning
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);
}
Prefixing
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');
Colors
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');
}
Elements
Grid
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>
Container
You should use the container element if you want to center some content with a fixed width (max: 1000px).
<div class="container"></div>
Build
Once
If you want to create the CSS file yourself you can run one simple command to build the project.
npm run build
Watch
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