This tutorial shows how to work with CSS/HTML sources files (pug/scss) in our Multipurpose Website templates.
You can find the source files in the sources folder of your template (be sure to unzip the zip file with the source files). Pug files allow editing website pages, scss files should be used for adjusting website styles.
Pug source files
1. Typical structure of files inside the pug folder:
Please, note, that templates may have different files structure (some files like functions.pug, mixins.pug and folders may not be available specifically in your template).
2. General structure of pug sources:
- The _skeleton.pug file has code that should be included to all files. In most cases this applies to to the tags like
<html>,<head>,<body>, contents of the<head>tag and global includes used on every page (_elements.pug, _config.pug).Example of the code used in the _skeleton.pug file:
https://gist.github.com/ilko725/ec5a3d8b4278809ad6270b6684624af6 - The _config.pug file is a configuration file. Such file contains different kinds of global variables (navigation, buy-link, callto-link, layout switcher etc.). The file should be included to _skeleton.pug file.Example of the code used in the _config.pug file:
https://gist.github.com/ilko725/b932430b3dcac1e039132f40f048c564 - The _elements.pug file has mixins for elements (button, image, link etc.). Such elements can be included to any page or component. The file should be included to _skeleton.pug file.Example of the code used in the _config.pug file:
https://gist.github.com/ilko725/76eb79bede44753ab1c9c03d0580c587 - The components/ folder consists of files with file components. Each file has mixins to which different kinds of content are being passed as parameters (blurb, post). Components should be included to the pages that require components.Example of the code used in the component:
https://gist.github.com/ilko725/c7ac5a865a78dcff1c8243a82e16b2ea - The includes/ folder contains files with ready-made content that should be included to all pages. Content of those files is the same on all pages. For example, the navigation is the same on all pages, sidebar can be the same on all pages.
- The sections/ folder contains files with ready-made sections (slider, blog, gallery etc.). In general, sections should be included to the appropriate page (where particular section should be placed).Example of the
includeandsection:
https://gist.github.com/ilko725/41fbcdd2d486b2cd4cf2e13eb512c7d6 - The pages/ folder contains page files for compilation. In general, pages should be compiled to the root folder of the website.Example of code used in the page:
https://gist.github.com/ilko725/1af640574d072e9c2b0579044a7f7779
3. Compilation:
- We should compile .pug files to html. Such compilation can be performed using the trial version of Prepros software.
- Open Prepros software. Go to the sources folder of the template package (be sure to unzip the sources zip file before that). Add a pug folder to Prepros. You may drag the entire folder to the projects section of Prepros.
- Set the relative path for all .pug files. All pug files should be compiled to the root folder of the site.
- Click on Process File in order to compile the file.
- Appropriate html file will be created in the location we have set previously.
Feel free to access official documentation in order to get additional information regarding Pug.
SCSS (SASS) source files
1. Typical structure of files inside the sass folder:
Please, note, that templates may have different files structure (some files and folders may not be available specifically in your template).
2. General structure of scss source files:
- The bootstrap/ folder has bootstrap files.
- The bootstrap.scss file is a main file for bootstrap compilation.
[notice type=”warning”]Do not edit bootstrap code. You should perform changes to the template styles instead. - The custom-styles/ folder has unique template styles.
- The style.scss file is a main file for compiling template styles. Such file includes variables, mixins, styles for components and plugins.Example of code used in the style.scss file:
https://gist.github.com/ilko725/30c3040d6276909130a907672230dd4f - The fonts.scss file is a main file for compiling template icon fonts. Such file includes references to the font styles from the folder fonts.Example of code used in the fonts.scss file:
https://gist.github.com/ilko725/28fb4952efe3175446146fa6b387d16d - The _variables-custom.scss file contains global variables for styles, colors, fonts, variables for elements.Example of code used in the _variables-custom.scss file:
https://gist.github.com/ilko725/8b496f7fd2326ad4fd07557753993541 - The _reset.scss file is used for resetting bootstrap styles (when such actions are required).Example of code used in the _reset.scss file:
https://gist.github.com/ilko725/d8bac61b7382c5b1d303e8c5b6ab0f40 - The _mixins.scss file contains mixins. This file includes references to files inside the mixins/ folder. Example of code used in the _mixins.scss file:
https://gist.github.com/ilko725/aa7a0044e4f8da01e5373b87cd10a71d - The components/ folder contains styles for components. Reference to each component should be included to the style.scss file.Example of code used in the component style (_blurb.scss):
https://gist.github.com/ilko725/46844372527169c36a926e25ea5a0022 - The fonts/ folder contains styles for iconic fonts. Reference to each file should be included to the fonts.scss file.Example of iconiс font styles (_mdi.scss):
https://gist.github.com/ilko725/c42892bb097349dd82b1b20233934d3c - The helpers/ folder contains styles for helper elements. Reference to helper files should be included to the style.scss file.Example of code (_text-styling.scss):
https://gist.github.com/ilko725/69a7123e4b210454251852d2b1699ce3 - The mixins/ folder contains mixins. Reference to mixins should be included to the _mixins.scss file.Example of code (_buttons.scss):
https://gist.github.com/ilko725/52302b8a7839590f95315552842de1f9 - The plugins/ folder contains files for plugins styles. Reference to files should be included to the style.scss file.Example of code (_to-top.scss):
https://gist.github.com/ilko725/689b171e05bfbe3455e888fe04ecc9a9
Compilation
- We should compile scss files to css. Such compilation can be performed using the trial version of Prepros software.
- Open Prepros software. Go to the sources folder of the template package (be sure to unzip the sources zip file before that). Add a sass folder to Prepros. You may drag the entire folder to projects section of Prepros.
- All sass files should be compiled to the website root folder.You can compile files without underscore at the beginning of file names. Files like _toolkit.scss are not independent files and can not be compiled directly.
- Let’s compile style.scss file. Select the file in the Prepros. Click on ‘Process file’.
- The style.css file will be created in the website root folder.
Feel free to access official documentation in order to get additional information regarding SASS.
In this tutorial we have found out how to work with CSS/HTML sources files (pug/scss). We have also provided information regarding the structure of the source files used in our templates and included examples that provide information regarding the coding structure of particular files.
