![](\"https://raw.githubusercontent.com/bravobit/scss-starter/master/logo.png\"){kind=logo}
\n \n \n
Simply CSS-resets, standard variables and it also contains mixins to help you develop your web project.
\n\n\n- Use command + F or ctrl + F to search for a keyword.\n- Contributions welcome, please see [contribution guide](CONTRIBUTING.md).\n\n## Contents\n- [Getting Started](#getting-started)\n - [Installation](#installation)\n - [Usage](#usage)\n- [Mixins](#mixins)\n - [Device](#mixins-device)\n - [Z-index](#mixins-z-index)\n - [Positioning](#mixins-positioning)\n - [Prefixing](#mixins-prefixing)\n - [Colors](#mixins-colors)\n- [Elements](#elements)\n - [Grid](#elements-grid)\n - [Container](#elements-container)\n- [Build](#build)\n - [Once](#build-once)\n - [Watch](#build-watch)\n- [License](#license)\n\n## Getting Started\n### Installation\n\nYou can install this package locally with npm or yarn. You should install the latest stable version in the `devDependencies` section in your `package.json`.\n\n```bash\n# To get the latest stable version in devDependencies\n\nnpm install @bravobit/scss-starter --save-dev\n\n# or\n\nyarn add @bravobit/scss-starter --dev\n```\n\n### Usage\n\nIf 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.\n\n```scss\n@import '~@bravobit/scss-starter/src/all.scss';\n```\n\nOr you can import all the files you want individually.\n\n```scss\n@import '~@bravobit/scss-starter/src/variables/_index.scss';\n@import '~@bravobit/scss-starter/src/mixins/_index.scss';\n@import '~@bravobit/scss-starter/src/generic/_index.scss';\n@import '~@bravobit/scss-starter/src/elements/_index.scss';\n```\n\nIf you want to include our default styling in your HTML you can use the compiled (and minified) version.\n\n```html\n\n```\n\n## Mixins\n### Device\n\nDo you want to use media queries for different device-sizes in your project, use the `device` mixin.\n\n```scss\n.content {\n max-width: 100%;\n \n @include device(tablet) { max-width: 800px; }\n}\n```\n\n### Z-index\n\nYou should add your z-index items to the `$z-indexes` list to keep the layers organized, then use the `z-index` mixin.\n\n```scss\n$z-indexes: (\n 'header',\n 'footer'\n);\n\n.header { @include z-index('header'); }\n.footer { @include z-index('footer'); }\n```\n\n### Positioning\n\nIf you want an easy way to set the position of the element use the `position` mixin.\n\n```scss\n.cube {\n @include position(absolute, top 100% left 0);\n}\n```\n\nOr you can use one of the helper mixins (`relative`, `absolute`, `fixed`).\n\n```scss\n.cube {\n @include relative(top 100% left 0);\n @include absolute(left 0 right 50px);\n @include fixed(top 0 bottom 0);\n}\n```\n\n### Prefixing\n\nDo you want your animations and/or placeholder to work on every browser, use the `prefix` mixins.\n\n```scss\n@include placeholder { color: red; };\n@include keyframes(slide) { color: red; };\n@include animation('slide 5s 3');\n```\n\n### Colors\n\nDo you want to use colors in your project, use the `colors` function. To get a full list of the supported colors [click here](https://material.io/guidelines/style/color.html#color-color-palette).\n\n```scss\n.main {\n color: color('yellow', 400);\n background-color: color('red');\n}\n```\n\n## Elements\n### Grid\n\nYou can use the 12-column grid system by using the following classes:\n\n```html\n