VSETH Bootstrap Theme
This repository contains the VSETH Boostrap Theme. It is well structured and the structure should be strongly followed to provide an easy access to for later users and contributors.
Basic Theme structure
On the lowest level of the theme are the
iconsfolder contains the VSETH icon-set and other used "icons" such as the emoji set
scssfolder is more specified here.
vseth-bootstrap/ | |-- icons/ # VSETH icon sets |-- scss/ # Raw SCSS | |-- CHANGELOG.md # Changelog of VSETH theme |-- LICENSE # MIT License `-- README.md
This structure divides the project into three basic types of files. Modules, partials, and vendor stylesheets
- The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.
- The partials directory is where the meat of the CSS is constructed. It is broken down to really fine categories, such as typography, buttons, textboxes, etc.
- The vendor directory is for third-party CSS. This is handy when using prepackaged components developed by other people. In general this files are not modified which makes it easy to update. They are load last, such that they can override previous code, to prevent undesired behaviour of the CSS.
Basic directory structure
scss/ | |-- modules/ # Common modules | |-- _all.scss # Include to get all modules | |-- _variables.scss # Module name | |-- _functions.scss # Etc... | |-- ... | |-- variables # Variables | | |-- ... | | | |-- mixins # Mixins | |-- _mixins.scss | |-- ... | |-- partials/ # Partials | |-- utility/ | |-- webapp/ | |-- _base.sass # imports for all mixins + global project variables | |-- _buttons.scss # buttons | |-- _figures.scss # figures | |-- _grids.scss # grids | ... | |-- vendor/ # CSS or Sass from other projects | |-- bootstrap/ | |-- react-select/ | |-- vseth-icons/ | ... | `-- vseth-bootstrap-theme.scss # primary Sass file
For transparency we use a changelog for this repository. The current version number of the VSETH theme consists of three numbers. The first number indicates a major change, this can be a change to the look and feel of the theme or a major update to Bootstrap. The second number indicates big changes such as new components added. The third number indicates updates and changes with in a bigger change.