The quickest possible way to get started is to
download the quickstart project
from Github, all you need to do
npm install and
npm run watch-css.
If possible, avoid modifying the core files. You should create your own stylesheet that imports Karma CSS so you can extend it. We'll assume you installed it via package manager like npm, you’ll have a file structure that looks like this:
your-project/ ├── dist ├── scss │ ├── _variables.scss │ ├── style.scss └── node_modules └── karma-css └── scss
style.scss, you’ll import Karma’s source files. Copy the below as a starting point:
/* ensure you import your own variables here before ours */ @import "variables"; /* karma core files */ @import "node_modules/karma-css/scss/variables"; @import "node_modules/karma-css/scss/import"; /* add your custom modules here */ /* karma utility helpers - probably best at the end of the stylesheet */ @import "node_modules/karma-css/scss/utilities";
All of our variables have the option
!default meaning it is only used if the variable is not set.
This allows you to overwrite any variable you choose. See more on :ref:
$buttons do have defaults they will append if not set.
For buttons you will always have a primary and secondary, and all colours within karma will be added as well.
Of course this does not stop you from changing the primary colour used or the button called primary. We only set what you have not.
Say you want to add the colour
whitesmoke, in your
_variables.scss all you need is:
$colors: ( "whitesmoke": rgb(245, 245, 245) );
This will be available with all the others.
Compiling The CSS
Of course you can compile it with what ever means you wish. We use
to add browser prefixes for the likes of IE10. So bear that in mind when you decide.