Component library

Component library

The component library is a collection of the different types of components used within the digital systems of the brand.

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.

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.

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. For more information about structure of the markup/templates visit the templating section in the getting started manual.
    • building-blocks: Type of component containing multiple components
    • components: Type of component containing multiple components
    • ...

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