## Component library

The component library is a collection of the different types of components used
within the digital systems of the brand. These components can also be
categorised per project or per department.

These components can be divided into categories. By default, the entire
collection of components is placed within the **general** category.

The way these components are called is entirely up to the developers. By default
these are called:

* **Fundamentals**: *The basis of everything that places the look and feel of
the brand within its components, like colors, typopgraphy, iconography*

* **Building blocks**: *The most basic type of component used to build the
layout or structure of other more advanced and complex components, like button,
input fields, tag, ...*

* **Components**: *The stand-alone items that build up pages or interfaces for
the user to interact with and to provide information with. These are build based
on the fundamentals and building blocks defined in the previous categories.*

* **Layouts**: *The structure of interfaces used to combine different components
together. These can be variable and should not be fixed in DOM and usage as
components are.*

* **Pages**: *The collection of components, building blocks and fundamentals
that form the interfaces where to user can interact and navigate between.*

## Taxonomy

Don't worry about the above categories. You might not like the naming of it.
That's fine. You can name everything you want.

### Component library

You see that in the navigation over there? It says **Component library**. You
can change this name too if you don't like it. The route as well, great right?!

The information about how to change the naming of the component-library, as well
as the route can be found in the config section of the getting started manual.

```js
module.exports = {
	taxonomy: {
		library: {
			name: "",
			route: ""
		}
	}
};
```

### Categories

The categories **fundamentals** and **Pages** are fixed in the brandplatform so
you can't change those. ... Wait for it ... Just kidding!!!

The information about how to change the naming of the fundamentals and the pages
can be found in the config section of the getting started manual.

```js
module.exports = {
	taxonomy: {
		fundamentals: "fundamentals",
		pages: "pages"
	},
};
```

**IMPORTANT** If you want to view these elements in the sidebar of the interface
you must make sure a folder with the corresponding name is present in the
templating folder.

## Folder structure

The main folder structure is present within the `src` folder by default. By
default, this contains:

* **assets**: Contains all static assets used in the brandplatform
	* **images**: Contains all images used within the brandplatform
	* **fonts**: Contains all fonts used within the brandplatform
	* **videos**: Contains all videos used within the brandplatform
	* **audio**: Contains all audio files used within the brandplatform
* **js**: Contains the JavaScript structure. For more information about
structure of the markup/templates visit the JavaScript section in the getting
started manual.
* **scss**: Contains the SCSS structure. For more information about
structure of the markup/templates visit the styling section in the getting
started manual.
* **styleguide**: Contains the different categories of the component-library and
its components split up in different levels. For more information about
structure of the markup/templates visit the templating section in the getting
started manual.
	* **general**: By default there is already one catgory within the styleguide
	present **general**. When you want to add more categories, you need to add
	these folders underneath the root of the templating folder, so on the same
	level as the general folder and start adding their own structure.

More information can be found regarding the templating and the building of
components in the templating section of the getting started manual.