Fitflop-App Styleguide

This styleguide is made with UIKit Framework to help make out styleguide-specific and website classes in HTML. All styleguide specific styles are prefixed with uk- or sg- so it will become obvious when styles are used for presentational purposes and when it can be reused on the website.

The styleguide is divided into 3 sections: Elements, CMS Components and HTML Accelerators.

1. Elements are the basic building blocks we use to build components.
2. CMS Components are reusable components that are used by non technical content team. They are designed to work on any content slot found in the website.
3. HTML Accelerators are boilerplate code for more technical users. This is usually used within the paragraph cms component for FitFlop users

All components are written in ES6 / SASS using BEM methodology. Please ensure you perform accessibility testing when building and using components and patterns detailed in the Styleguide.

We use Styleguide Driven Development approach to create components in isolation and make it more reusable, so firstly it appears in the styleguide and aferwards on the site.

We follow Atomic Design principles to make our components reusable as much as possible.

We constantly refactor our components to apply these priciples to create more granular UI pieces following atoms, molecules and organisms hierarchy.