Documentations

SCSS / CSS

Customizing

If you want to customize existing theme, its not advised to make change directly to the scss files. Instead do this steps:

  1. Navigate to colorscheme directory that you want to customize, for example diretorize-html/scss/themes/default/ and then create new-file.scss

  2. Edit default.scss

  3. Import the new-file.scss and make sure you put it on top of other file imports.

    @import "new-file";

@import "variables";

@import "../../discoverize/discoverize";

  4. Now, you just have to type variable that you want to override inside new-file.scss. Example you want to change the $primary color then all you need to do is open new-file.scss and just type this line of code:

    $primary: #ffcc00 !default;

  5. On your terminal, run npm run css or npm run start to recompile scss files into css.

Creating new colorscheme

  1. Navigate to magazinize-html/scss/colorschemes/ and Create new folder. For example we named it new-colorscheme.scss

  2. Open new-colorscheme.scss and add these lines of codes:

    @import "variables";
      
@import "../../discoverize/discoverize";

    Those line will include all bootstrap and discoverize components.

  3. Edit discoverize-html/package.json add these 2 lines:

    "css-minify-theme-new-colorscheme": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/assets/css/new-colorscheme.min.css dist/assets/css/new-colorscheme.css",
"css-compile-theme-new-colorscheme": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/themes/new-colorscheme/new-colorscheme.scss dist/assets/css/new-colorscheme.css",

    Inside: "scripts" bracket "{ ... }"

  4. Back to your terminal, if your not started the build tools yet then run npm start

  5. link discoverize-new-colorscheme.css to your html files by replacing ".../discoverize-{colorscheme}.css" to ".../discoverize-new-colorscheme.css"

    <link rel="stylesheet" type="text/css" href="../assets/css/discoverize-default.css">
SCSS - SCSS File Structure
HTML - Base / Starter HTML