Style Guide for the Rijkshuisstijl Theme
This style guide documents the designs of this website which are built with component-based styles and Sass variables, functions and mixins. To ensure it is always up-to-date, this style guide is automatically generated from comments in the Sass files.
Organization
Design components are reusable designs that can be applied using just the CSS class names specified in the component. We categorize our components to make them easy to find.
- Defaults
components/base— The default “base” components apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.- Layouts
components/layouts— Layout components position major chunks of the page. They just apply positioning, no other styles.- Components
components/components— Miscellaneous components are grouped together, but feel free to further categorize these.- Navigation
components/navigation— Navigation components are specialized design components that are applied to website navigation.- Forms
components/forms— Form components are specialized design components that are applied to forms or form elements.
In addition to the components, our component library also contains these folders:
- Colors and Sass
components/init— This Sass documents the colors used throughout the site and various Sass variables, functions and mixins. It also initializes everything we need for all other Sass files: variables, 3rd-party libraries, custom mixins and custom functions.- Style guide helper files
components/style-guide— files needed to build this automated style guide; includes some CSS overrides for the default KSS style guide- Generated files
components/asset-builds— location of the generated CSS; don't alter these files