Skip to content
Václav Vracovský edited this page Sep 27, 2019 · 4 revisions

CSS

We use:

Structure of LESS files

main.less

This file is used for layout of page. Following files are included here:

modules/bootstrap

By default, we use only several Bootstrap components. If you want use more of them, or not to use some of default components, you should to overwrite this file by your own.

modules/layout-mixins and modules/layout-variables

modules/layout-variables is most important file for theme creating. You can affect most of page layout only by modifying variables.

all another modules/*.less and modules/components/*.less files

It's important to understand to sharing less files between templates. In Shoptet, our goal is to share as many files as possible between all templates of 3rd generation. For you, custom theme author, it's not so important (or not important at all), but you should know.

Every file included from ../../00/ is root file and is shared between all templates. Files included from current template folder (modules/*) are template specific.

Techno template (07) was created as first of these templates, so all files are used from root folder 00. All other templates contains some specific files.

project.less

project.less file is used only for colors and template fonts - these things are originally set in admin. Points in main.less section above applies also for project.less.

modules/font-shoptet.less

This file is used for setting up icon font. In the upper part, the font-face itself is declared. Then the /00/css/modules/components/icons file in which CSS for icons is declared and classes are set up.