# 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 `icons`, and `scss` folders. 
- The `icons` folder contains the VSETH icon-set and other used "icons" such as the emoji set
- The `scss` folder is more specified [here](#scss-structure). 

```
vseth-bootstrap/
|
|-- icons/                # VSETH icon sets
|-- scss/                 # Raw SCSS
|
|-- CHANGELOG.md          # Changelog of VSETH theme
|-- LICENSE               # MIT License
`-- README.md             
```

## SCSS structure 

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
```

## Versioning

For transparency we use a [changelog](CHANGELOG.md) 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. 

## Creators

**Raphael Koch**

- <https://raphaelkoch.com>
- <https://github.com/rapkosi>


## Copyright and license

Bootstrap code copyright 2011-2018 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and 
[Twitter, Inc.](https://twitter.com) Code released under the 
[MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE).

VSETH theme copyright 2019 the [Creators](#creators) and Verband der Studierenden an der ETH (VSETH). 
Code released under the [MIT License](LICENSE).



