This is used in every page with a few modifications. It is responsive, always fixed and in its most basic form has your main color as background.
In specific cases such as your landing or pages with headers (like this one), there is no point to have a colored background initially. That's why there is a transparent version, which when scrolled over a specified element becomes normal again. To use that add the class "navbar--extended" and the id "navConverter" to the element you prefer.
The navbar is responsive by design but if you have only a few options and want to disable this, just remove the element with the "nav__mobile" class and the "navbar__menu-mob" div.
The top part of your landing, also uses your primary color and a few other layers to create an eye-catching effect. Here is the main code to create it:
There are a few thing going on here so let's break it down:
hero: The main class that creates the hero unit. If you don't want the white line with the scroll option, add the "hero--full" class and it will cover it. The hero also has an image background which you can remove on your CSS.
hero__overlay: The color that will cover the hero. This is usually your primary color. To make it easy we use a single color but if you want to have a gradient background with your primary and secondary color add the class "hero__overlay--gradient" or "hero__overlay--gradientVertical" for a top to bottom one.
hero__mask: An SVG gradient mask to improve readability and create an effect. If you want to remove it, just delete the div.
hero__sub: The white strip on the bottom of your landing that allows users to scroll to the first element with the title "landing__section". To remove it just delete it or make the hero fullscreen as mentioned before.
To create a simple two column layout with a fixed sidebar and an expandable main column, you can use the page component. On mobile and desktops the columns will be stacked vertically. Here is the necessary code:
To add a vertical menu with hover effects, like the one in this page, you just need to create a list and add the "vMenu" class to it. Add the "vMenu--active" to the page that is currently loaded, if you want.
This behaves almost identical to the page component but should be used with the plain navigation bar instead of the header. This is specified as a way to separate concerns between pages that serve different purposes (app/docs). Here is the necessary code:
There are a few more components that are used throughout the pages but are pretty self-explanatory.