Ubuntu is a free open source font distributed trough Google Fonts.
+The simplest way to load the font in your project is to use the following code in your document's <head>:
+
Use to emphasize text in paragraphs using the <strong> tag and for labels.
+
Font Weights
+
The default font weight for text is 300. Most of the default text styles will use this. The weight 500 is used for emphasized text as well as table headers, form labels, and some other elements.
Font sizes
+
These are the main heading and text sizes. Remember to use size to correctly hierarchize the information on the page.
Color plays an important role in mantaining a cohesive look and feel between multiple apps. To ensure this, avoid using colors other than the ones below. All of these colors are available as SASS variables which should save you time when creating your application.
+
{{#each toolkit.colors}}
-
{{@key}}
+
{{@key}}
{{#each this}}
diff --git a/docs/demo/materials/03-atoms/buttons/01-button.html b/docs/demo/materials/03-atoms/buttons/01-button.html
index e9a6d764..610b5747 100644
--- a/docs/demo/materials/03-atoms/buttons/01-button.html
+++ b/docs/demo/materials/03-atoms/buttons/01-button.html
@@ -2,9 +2,9 @@
name: button
title: button
notes: |
- Triggers an action and must not be used for navigation.
+ Buttons shold usually triggers an action on page, and not be used for navigation. Use labels that are explicit. Starting with an imperative verb is often a good choice.
---
-Anchor
-
-
-
+Save File
+
+
+
diff --git a/docs/demo/materials/03-atoms/buttons/03-options.html b/docs/demo/materials/03-atoms/buttons/03-options.html
index 7d57ef73..3713ec3f 100644
--- a/docs/demo/materials/03-atoms/buttons/03-options.html
+++ b/docs/demo/materials/03-atoms/buttons/03-options.html
@@ -2,17 +2,17 @@
name: button modifiers
title: button modifiers
notes: |
- Buttons can have modifier classes applied to them. Different modifier classes have different meanings, use them wisely.
+ Buttons can have modifier classes applied to them, with different meanings.
- `dc-btn--primary`: Triggers the primary action of the page it is placed on. Place only one primary button on each page/dialog.
+ `dc-btn--primary` The primary action of the page it is placed on. Place only one primary button on each page/dialog.
- `dc-btn--destroy`: Triggers a destructive action which can't be undone and might involve loss of data.
+ `dc-btn--destroy` A destructive action which can't be undone and might involve loss of data.
- `dc-btn--active`: When a button is active or toggled. Buttons using this modifier should not be clickable.
+ `dc-btn--active` Active or toggled. Buttons using this modifier should not be clickable.
- `dc-btn--disabled`: When a button is disabled. Buttons using this modifier should not be clickable.
+ `dc-btn--disabled` Action is disabled. Buttons using this modifier should not be clickable.
- `dc-btn--link`: Has the appearance of a link but the dimensions and modifiers of a button.
+ `dc-btn--link` Looks like a link but aligns and behaves like buttons. For secondary or tertiary actions.
---
diff --git a/docs/demo/materials/03-atoms/buttons/04-button--block.html b/docs/demo/materials/03-atoms/buttons/04-button--block.html
index fedff46a..3b4dea46 100644
--- a/docs/demo/materials/03-atoms/buttons/04-button--block.html
+++ b/docs/demo/materials/03-atoms/buttons/04-button--block.html
@@ -5,6 +5,6 @@
Use the dc-btn--block modifier to force a button to fill its parent's width.
---
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+
Cards are the basic building blocks of a page. Usually all content should be inside one or more card. For example, in this demo, every section or element is inside a card. We don't recommend nesting cards, such as in this example, but it's technically possible.
diff --git a/docs/demo/materials/03-atoms/checkboxes/01-checkbox.html b/docs/demo/materials/03-atoms/forms/01-checkbox.html
similarity index 100%
rename from docs/demo/materials/03-atoms/checkboxes/01-checkbox.html
rename to docs/demo/materials/03-atoms/forms/01-checkbox.html
diff --git a/docs/demo/materials/03-atoms/checkboxes/02-checkbox--switch.html b/docs/demo/materials/03-atoms/forms/02-checkbox--switch.html
similarity index 100%
rename from docs/demo/materials/03-atoms/checkboxes/02-checkbox--switch.html
rename to docs/demo/materials/03-atoms/forms/02-checkbox--switch.html
diff --git a/docs/demo/materials/03-atoms/radio-button.html b/docs/demo/materials/03-atoms/forms/radio-button.html
similarity index 100%
rename from docs/demo/materials/03-atoms/radio-button.html
rename to docs/demo/materials/03-atoms/forms/radio-button.html
diff --git a/docs/demo/materials/03-atoms/select.html b/docs/demo/materials/03-atoms/forms/select.html
similarity index 100%
rename from docs/demo/materials/03-atoms/select.html
rename to docs/demo/materials/03-atoms/forms/select.html
diff --git a/docs/demo/materials/03-atoms/text-input.html b/docs/demo/materials/03-atoms/forms/text-input.html
similarity index 100%
rename from docs/demo/materials/03-atoms/text-input.html
rename to docs/demo/materials/03-atoms/forms/text-input.html
diff --git a/docs/demo/materials/03-atoms/textarea.html b/docs/demo/materials/03-atoms/forms/textarea.html
similarity index 100%
rename from docs/demo/materials/03-atoms/textarea.html
rename to docs/demo/materials/03-atoms/forms/textarea.html
diff --git a/docs/demo/materials/03-atoms/icons.html b/docs/demo/materials/03-atoms/icons/01-icons.html
similarity index 65%
rename from docs/demo/materials/03-atoms/icons.html
rename to docs/demo/materials/03-atoms/icons/01-icons.html
index d91e82f4..73d0e33e 100644
--- a/docs/demo/materials/03-atoms/icons.html
+++ b/docs/demo/materials/03-atoms/icons/01-icons.html
@@ -3,29 +3,6 @@
title: Icons
notes: |
All Icons are included in one icon font for easy usage. Icons can be made hoverable by using of the dc-icon--interactive class.
-
- #### Changing the icon font location
-
- Dress-code assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files.
- Moving or renaming those font files means updating the CSS in one of two ways:
- - Change the $dc-font-path variable in the source SASS files.
- - Change the url() path in the compiled CSS.
-
- Use whatever option best suits your specific development setup.
-
- #### Svg-icons
-
- Together with the icon font, Dress-code distribute also the corresponding svg files. Those svg files are used in some components.
-
- Dress-code assumes that the svg files will be located in the ../img/svg-icons/ directory, relative to the compiled CSS files.
-
- Moving or renaming the image folder means updating the CSS in one of two ways:
-
- - Change the $dc-image-path variable in the source SASS files.
- - Change the url() path in the compiled CSS.
-
- Use whatever option best suits your specific development setup.
-
---
diff --git a/docs/demo/materials/03-atoms/icons/02-changing-the-font-location.html b/docs/demo/materials/03-atoms/icons/02-changing-the-font-location.html
new file mode 100644
index 00000000..cec39b77
--- /dev/null
+++ b/docs/demo/materials/03-atoms/icons/02-changing-the-font-location.html
@@ -0,0 +1,11 @@
+---
+name: Icons
+title: Icons
+notes: |
+ Dress-code assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files.
+ Moving or renaming those font files means updating the CSS in one of two ways:
+ - Change the $dc-font-path variable in the source SASS files.
+ - Change the url() path in the compiled CSS.
+
+ Use whatever option best suits your specific development setup.
+---
diff --git a/docs/demo/materials/03-atoms/icons/03-svg-icons.html b/docs/demo/materials/03-atoms/icons/03-svg-icons.html
new file mode 100644
index 00000000..6a6c2b54
--- /dev/null
+++ b/docs/demo/materials/03-atoms/icons/03-svg-icons.html
@@ -0,0 +1,15 @@
+---
+name: Icons
+title: Icons
+notes: |
+ Together with the icon font, Dress Code distribute also the corresponding svg files. Those svg files are used in some components.
+
+ Dress-code assumes that the svg files will be located in the ../img/svg-icons/ directory, relative to the compiled CSS files.
+
+ Moving or renaming the image folder means updating the CSS in one of two ways:
+
+ - Change the $dc-image-path variable in the source SASS files.
+ - Change the url() path in the compiled CSS.
+
+ Use whatever option best suits your specific development setup.
+---
diff --git a/docs/demo/materials/04-molecules/06-tooltip/01-has-tooltip.html b/docs/demo/materials/03-atoms/tooltip/01-adding-a-tooltip.html
similarity index 88%
rename from docs/demo/materials/04-molecules/06-tooltip/01-has-tooltip.html
rename to docs/demo/materials/03-atoms/tooltip/01-adding-a-tooltip.html
index 6b7f4e9e..3cabf1fa 100644
--- a/docs/demo/materials/04-molecules/06-tooltip/01-has-tooltip.html
+++ b/docs/demo/materials/03-atoms/tooltip/01-adding-a-tooltip.html
@@ -1,9 +1,11 @@
---
+name: Adding a tooltip
+title: Adding tooltip
notes: |
- Apply the base ```dc--has-tooltip``` class and a positioning class (ex. ```dc--has-tooltip--left```) to show a nice tooltip when "hovering" the element.
+ Apply the class ```dc--has-tooltip``` class and a positioning class (ex. ```dc--has-tooltip--left```) to any element show a tooltip when hovering.
- The attribute ```data--dc-has-tooltip``` must be present and not empty, the value will be used as the content for the tooltip body.
+ The attribute ```data--dc-has-tooltip``` must be present and not empty: the value will be used as the content for the tooltip body.
The tooltip implementation is based significantly on [hint.css](http://kushagragour.in/lab/hint/).
---
@@ -55,4 +57,3 @@
-
diff --git a/docs/demo/materials/04-molecules/06-tooltip/02-sizing.html b/docs/demo/materials/03-atoms/tooltip/02-sizing.html
similarity index 100%
rename from docs/demo/materials/04-molecules/06-tooltip/02-sizing.html
rename to docs/demo/materials/03-atoms/tooltip/02-sizing.html
diff --git a/docs/demo/views/index.html b/docs/demo/views/index.html
index 75766d4c..e60b553a 100644
--- a/docs/demo/views/index.html
+++ b/docs/demo/views/index.html
@@ -5,7 +5,7 @@
Dress Code
-
+
Dress Code is a style guide and pattern library for building websites rapidly, designed for maintainability and modularity. It was initially conceived as a styleguide for Zalando's Brand Solutions applications.
Component organization is based on atomic design. The style is written in SASS, class naming follows BEM, and properties are ordered according to SMACSS.