User Manual

We use an automatically generated icon-font to display icons throughout the styleguide. Adding a removing .svg files in the src/assets/general/fonts/_icon-sources folder will trigger the creation of the iconfont.
If need the task can also be manually triggered with gulp iconfont.

In order to add new icons, we've provided an icons.ai file which is located on the Google Drive.

• Use a new layer for every icon and name it correctly.
• Clean up any paths, masks, groups and outline your strokes.
• Use multiexporter.jsx to export your layers as separate svg's.
• Make sure to uncheck the 'trim edges' option when exporting. All the .svg's need to be the exact same size.

We use semantic versioning ( or Semver in short ) to annotate different versions of our styleguide.

This brandplatform checkes if you have made a changelog for a new version when pushing to master. If not, the version cannot be created. To create a version use the following steps:

• Make sure the working directory is clean (commit all files).
• Run `npm version [patch || minor || major || ]` you can add a custom semver or one of the 3 words.
• Optional add the `-m "message"` command to it
• NPM will automatically create a commit with the new version in package.json and add a git tag to it.
• Push your commit with `git push origin [branch]` and dont forget!! to push your tags with `git push --tags`

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

• Quarks: intangible properties. The essence of your brand.
  Example: colour
• Atoms: the most basic building blocks of your design system.
  Example: button
• Molecules: a component, made of several atoms, with a clear function.
  Example: newsletter subscription
• Organisms: a big section of the website, made of several molecules, which can always appear only once on a page.
  Example: footer
• Pages: an entire page template, consisting of a range of atoms, molecules & organisms.
  Example: homepage

At Little Miss Robot we use our own custom version of BEMIT to name our classes & components. Basically, it all boils down to a few simple rules:

Hierarchy

Components are prefixed to visualise in which category they belong.

.a-atom

• .a- for atoms
• .m- for molecules
• .o- for organisms
• .u- for utilities
• .l- for layouts

Modifiers

To create a an alternative version of a certain component, we create a modifier.
Modifiers are visualized by seperating them with double dashes.

.m-molecule--modified 

Sub-elements

A component can contain multiple sub-elements, and their class-name needs to reflect their relationship to the parent component. We do this by using double underscores.

.m-molecule__sub-element

States & javascript

The javascript in our purely for documentation purposes, we'll provide helper classes that can be accessed through javascript or add states that can be modified with javascript.

• .is-open is an example of a state. We'll provide the styling that goes with the 'open' state of this component, but we won't provide the javascript to toggle this state.
• .js-resize is an example of a javascript helper class. It shows which element can be manipulated through javascript.

The Web and Internet in whole is an increasingly important resource in many aspects of our life which includes: education, employment, government, commerce, health care, recreation, and more. ... An accessible Web can help people with disabilities participate more actively in society.

• Define a lang attribute on your HTML-element. More info.
• Use a descriptive alt-tag when needed and an empty alt-tag for decorative images. More info.
• Optimize your website for screen-readers. More info.

For a better user experience and work-flow there is a 'copy to clipboard' button added to each code snippet.

• Look for the icon.