Getting Started
Start developing and designing with Relax, Design System for Waypoint. This guide includes a quick intro and links to guides, resources and more.
Basics
The Design System for Waypoint, Relax provides a way for designers and developers to create UIs and user experiences that are usable and beautiful.
This site provides instructions on how to implement Relax, Design System for Waypoint for your UI, including design, and developer guidance, components, icons, fonts and resources.
About
This style guide is based largely on the principles of atomic design. The key idea of this methodology is that small, independent - atomic - parts, can be combined into larger molecular structures. Molecular structures can be combined into larger organisms, which can then serve as the foundation for templates and full pages.
Browser version support
The styles and components from RELAX should work well and look good in these browsers:
- last 2 firefox major versions
- last 2 chrome major versions
- last 2 edge major versions
- last 2 opera major versions
- last 2 ios major versions
- last 2 safari major versions
- Firefox ESR
We test and make sure our solutions work well in these browser versions in mobile, tablet and desktop mode.
We do not proactively make sure that our sites work well or look good in other browsers or browser versions, but if we notice or get reports about e.g. an important style/component not working in a specific browser or version, we can decide to fix that issue.
We use browserl.ist to get our supported browsers. For a fully updated lists, you can check it out here
Important globals
The Design System for Waypoint, Relax is dependent on some key settings and global styles that you want to implement.
HTML5 Doctype
The style guide is dependent on the HTML5 Doctype, and since it's 2017, we think that no further reasoning is needed for this. Just do it™
<!DOCTYPE html>
<html lang="en">
...
</html>Box-sizing
For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element
Tools
While the design system itself does not provide many direct tools, we've found some tools during our journey that might prove helpful for you.
- URL-encoder for SVG - Generates CSS
background-imagestyle of your SVG - Find one of 18'000+ color names - Finds a human readable name for your colors
Design assets
Get fonts, icons and design kits:
- Icons
- Fonts
- Design kits for Sketch
- Design kits for AdobeXD
Develop
See our develop documentation guides for more information.