// =============================================================================
-[#{$prefix}container] {
- margin-left: auto;
- margin-right: auto;
- max-width: $container-width;
- padding-left: $gutter / 2;
- padding-right: $gutter / 2;
-}
-
-[#{$prefix}grid] {
- display: flex;
- margin-left: $gutter / -2;
- margin-right: $gutter / -2;
- flex-direction: column;
-
- // Collapse columns on breakpoint
- @media ($breakpoint) { flex-direction: row; }
-}
+@if ($enable-grid) {
+ [#{$prefix}container] {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: $container-width;
+ padding-left: $gutter / 2;
+ padding-right: $gutter / 2;
+ overflow: auto;
+ }
-[#{$prefix}column] {
- flex: 1;
- padding-left: $gutter / 2;
- padding-right: $gutter / 2;
-}
+ @if($enable-container-solid) {
+ [#{$prefix}container~="solid"] {
+ @media(--small) {
+ max-width: $break-small;
+ }
+ @media(--medium) {
+ max-width: $break-medium;
+ }
+ @media(--large) {
+ max-width: $break-large;
+ }
+ @media(--extra-large) {
+ max-width: $container-width;
+ }
+ }
+ }
-//
-// No Gutters
-//
+ [#{$prefix}grid] {
+ display: flex;
+ margin-left: $gutter / -2;
+ margin-right: $gutter / -2;
+ flex-direction: column;
-[#{$prefix}grid~="ng"] {
- margin-left: 0;
- margin-right: 0;
+ // Collapse columns on breakpoint
+ @media ($breakpoint) { flex-direction: row; }
+ }
[#{$prefix}column] {
- padding-left: 0;
- padding-right: 0;
+ flex: 1;
+ padding-left: $gutter / 2;
+ padding-right: $gutter / 2;
}
-}
-
-//
-// No margins
-//
-[#{$prefix}grid~="nm"] {
- margin-left: 0;
- margin-right: 0;
-}
+ //
+ // No Gutters
+ //
-//
-// No Collapse columns
-//
+ [#{$prefix}grid~="no-gutters"] {
+ margin-left: 0;
+ margin-right: 0;
-[#{$prefix}grid~="no-collapse"] { flex-flow: row nowrap; }
+ > [#{$prefix}column] {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
-//
-// Wrap columns
-//
+ //
+ // No Collapse columns
+ //
-[#{$prefix}grid~="wrap"] { flex-wrap: wrap; }
-[#{$prefix}grid~="nowrap"] { flex-wrap: nowrap; }
-[#{$prefix}grid~="wrap-reverse"] { flex-wrap: wrap-reverse; }
+ [#{$prefix}grid~="no-collapse"] { flex-flow: row nowrap; }
-//
-// Direction of columns in a row
-//
+ //
+ // Column wrapping
+ //
-[#{$prefix}grid~="row"] { flex-direction: row; }
-[#{$prefix}grid~="row-reverse"] { flex-direction: row-reverse; }
-[#{$prefix}grid~="column"] { flex-direction: column; }
-[#{$prefix}grid~="column-reverse"] { flex-direction: column-reverse; }
+ [#{$prefix}grid~="wrap"] { flex-wrap: wrap; }
+ [#{$prefix}grid~="no-wrap"] { flex-wrap: nowrap; }
+ [#{$prefix}grid~="wrap-reverse"] { flex-wrap: wrap-reverse; }
-//
-// Justify content
-//
+ //
+ // Direction of columns in a row
+ //
-[#{$prefix}grid~="justify-start"] { justify-content: flex-start; }
-[#{$prefix}grid~="justify-end"] { justify-content: flex-end; }
-[#{$prefix}grid~="justify-center"] { justify-content: center; }
-[#{$prefix}grid~="justify-between"] { justify-content: space-between; }
-[#{$prefix}grid~="justify-around"] { justify-content: space-around; }
+ [#{$prefix}grid~="row"] { flex-direction: row; }
+ [#{$prefix}grid~="row-reverse"] { flex-direction: row-reverse; }
+ [#{$prefix}grid~="column"] { flex-direction: column; }
+ [#{$prefix}grid~="column-reverse"] { flex-direction: column-reverse; }
+
+ //
+ // Reorder items above breakpoint
+ //
+
+ @media ($breakpoint) {
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="n#{$i}"] { order: #{$i}; }
+ }
+ }
-//
-// Alignment of all columns in a row
-//
+ //
+ // Justify content
+ //
-[#{$prefix}grid~="top"] { align-items: flex-start; }
-[#{$prefix}grid~="center"] { align-items: center; }
-[#{$prefix}grid~="bottom"] { align-items: flex-end; }
-[#{$prefix}grid~="baseline"] { align-items: baseline; }
-[#{$prefix}grid~="stretch"] { align-items: stretch; }
+ [#{$prefix}grid~="justify-start"] { justify-content: flex-start; }
+ [#{$prefix}grid~="justify-end"] { justify-content: flex-end; }
+ [#{$prefix}grid~="justify-center"] { justify-content: center; }
+ [#{$prefix}grid~="justify-between"] { justify-content: space-between; }
+ [#{$prefix}grid~="justify-around"] { justify-content: space-around; }
-//
-// Alignment of individual columns
-//
+ //
+ // Alignment of all columns in a row
+ //
-[#{$prefix}column~="top"] { align-self: flex-start; }
-[#{$prefix}column~="center"] { align-self: center; }
-[#{$prefix}column~="bottom"] { align-self: flex-end; }
+ [#{$prefix}grid~="top"] { align-items: flex-start; }
+ [#{$prefix}grid~="center"] { align-items: center; }
+ [#{$prefix}grid~="bottom"] { align-items: flex-end; }
+ [#{$prefix}grid~="baseline"] { align-items: baseline; }
+ [#{$prefix}grid~="stretch"] { align-items: stretch; }
-// Create column widths and offsets above the breakpoint
-@media ($breakpoint) {
//
- // Column widths
+ // Alignment of individual columns
//
- @for $i from 1 through $num-columns {
- [#{$prefix}column~="#{$i}"] {
- flex: 0 1 ($i/$num-columns) * 100%;
- max-width: ($i/$num-columns) * 100%;
+ [#{$prefix}column~="top"] { align-self: flex-start; }
+ [#{$prefix}column~="center"] { align-self: center; }
+ [#{$prefix}column~="bottom"] { align-self: flex-end; }
+
+ // Create column widths and offsets above the breakpoint
+ @media ($breakpoint) {
+ //
+ // Column widths
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="#{$i}"] {
+ flex: 0 1 ($i/$num-columns) * 100%;
+ max-width: ($i/$num-columns) * 100%;
+ }
+ }
+
+ //
+ // Column offsets
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="+#{$i}"] {
+ margin-left: ($i/$num-columns) * 100%;
+ }
}
}
- //
- // Column offsets
- //
+ @if ($full-grid) {
+ @media (--extra-small) {
+ //
+ // Column widths
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="xs-#{$i}"] {
+ flex: 0 1 ($i/$num-columns) * 100%;
+ max-width: ($i/$num-columns) * 100%;
+ }
+ }
+
+ //
+ // Column offsets
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="+xs-#{$i}"] {
+ margin-left: ($i/$num-columns) * 100%;
+ }
+ }
+ }
+
+ @media (--small) {
+ //
+ // Column widths
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="s-#{$i}"] {
+ flex: 0 1 ($i/$num-columns) * 100%;
+ max-width: ($i/$num-columns) * 100%;
+ }
+ }
+
+ //
+ // Column offsets
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="+s-#{$i}"] {
+ margin-left: ($i/$num-columns) * 100%;
+ }
+ }
+ }
+
+ @media (--medium) {
+ //
+ // Column widths
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="m-#{$i}"] {
+ flex: 0 1 ($i/$num-columns) * 100%;
+ max-width: ($i/$num-columns) * 100%;
+ }
+ }
+
+ //
+ // Column offsets
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="+m-#{$i}"] {
+ margin-left: ($i/$num-columns) * 100%;
+ }
+ }
+ }
+
+ @media (--large) {
+ //
+ // Column widths
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="l-#{$i}"] {
+ flex: 0 1 ($i/$num-columns) * 100%;
+ max-width: ($i/$num-columns) * 100%;
+ }
+ }
+
+ //
+ // Column offsets
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="+l-#{$i}"] {
+ margin-left: ($i/$num-columns) * 100%;
+ }
+ }
+ }
- @for $i from 1 through $num-columns {
- [#{$prefix}column~="+#{$i}"] {
- margin-left: ($i/$num-columns) * 100%;
+ @media (--extra-large) {
+ //
+ // Column widths
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="xl-#{$i}"] {
+ flex: 0 1 ($i/$num-columns) * 100%;
+ max-width: ($i/$num-columns) * 100%;
+ }
+ }
+
+ //
+ // Column offsets
+ //
+ @for $i from 1 through $num-columns {
+ [#{$prefix}column~="+xl-#{$i}"] {
+ margin-left: ($i/$num-columns) * 100%;
+ }
+ }
}
}
}
diff --git a/src/_base.scss b/src/_base.scss
new file mode 100644
index 0000000..5f6c3bd
--- /dev/null
+++ b/src/_base.scss
@@ -0,0 +1,722 @@
+//
+// Base styles
+// =============================================================================
+// Based on sanitize.css v4.1.0 with heavy modifications for Concise CSS
+//
+// TODO: Most of the comments are from sanitize.css. Comments for Concise should be added too.
+//
+// Contents:
+// 1. Display definitions
+// 2. Elements of HTML
+// 3. Grouping content
+// 4. Text-level semantics
+// 5. Embedded content
+// 6. Links
+// 7. Tabular data
+// 8. Forms
+// 9. WAI-ARIA
+// 10. User interaction
+// 11. Lobotomized Owl (Margins)
+
+//
+// 1. Display definitions
+// --------------------------------------------------
+
+//
+// Add the correct display in IE 9-.
+// 1. Add the correct display in Edge, IE, and Firefox.
+// 2. Add the correct display in IE.
+//
+
+article,
+aside,
+details, // 1
+figcaption,
+figure,
+footer,
+header,
+main, // 2
+menu,
+nav,
+section,
+summary { // 1
+ display: block;
+}
+
+//
+// Add the correct display in IE 9-.
+//
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+}
+
+//
+// Add the correct display in iOS 4-7.
+//
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+//
+// Add the correct display in IE 10-.
+// 1. Add the correct display in IE.
+//
+
+template, // 1
+[hidden] {
+ display: none;
+}
+
+//
+// 2. Elements of HTML (https://www.w3.org/TR/html5/semantics.html)
+// --------------------------------------------------
+
+//
+// 1. Remove repeating backgrounds in all browsers.
+// 2. Add box sizing inheritence in all browsers.
+//
+
+*,
+::before,
+::after {
+ background-repeat: no-repeat; // 1
+ box-sizing: inherit; // 2
+}
+
+//
+// 1. Add text decoration inheritance in all browsers.
+// 2. Add vertical alignment inheritence in all browsers.
+//
+
+::before,
+::after {
+ text-decoration: inherit; // 1
+ vertical-align: inherit; // 2
+}
+
+//
+// Root styles
+//
+
+:root {
+ box-sizing: border-box;
+ font-family: $font-primary;
+ line-height: 1.5;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ background-color: getColor(background, body);
+ color: getColor(text, primary);
+ font-size: $font-size + px;
+ text-rendering: optimizeLegibility;
+
+ @media ($breakpoint) {
+ font-size: $font-size-secondary + px;
+ }
+}
+
+//
+// 3. Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
+// --------------------------------------------------
+
+//
+// 1. Correct font sizing inheritance and scaling in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+ font-family: $font-mono; // 1
+ font-size: typeScale(1); // 2
+ background-color: getColor(background, light);
+}
+
+code,
+kbd {
+ vertical-align: middle;
+ display: inline-block;
+ padding: 0 0.4em;
+}
+
+pre {
+ padding: 0.5lh 1em;
+
+ & > code { white-space: pre; }
+}
+
+kbd {
+ background-color: transparent;
+ outline: 1px solid getColor(base, lines);
+}
+
+//
+// 2. Add visible overflow in Edge and IE.
+//
+
+hr {
+ background-color: getColor(base, lines);
+ height: 1px;
+ overflow: visible; // 2
+ border: 0;
+}
+
+//
+// Remove the list style on navigation lists in all browsers.
+//
+
+nav {
+ ol,
+ ul { padding-left: 0; }
+
+ li { list-style: none; }
+}
+
+//
+// Make definition lists bold
+//
+
+dt { font-weight: bold; }
+
+//
+// 4. Text-level semantics
+// --------------------------------------------------
+
+//
+// Make blockquotes prettier
+// 1. Adds an em dash in the cite and footer of the quote
+// 2. Use the next smaller size in the scale
+//
+
+blockquote {
+ padding: 0 1em;
+
+ cite,
+ footer {
+ color: getColor(text, secondary);
+ font-size: 100% / $scale-ratio; // 2
+ margin-top: 0.5lh;
+
+ &:before { content: "— "; } // 1
+ }
+}
+
+//
+// 1. Add a bordered underline effect in all browsers.
+// 2. Remove text decoration in Firefox 40+.
+// 3. Change all letters to uppercase
+// 4. Turn on small caps for upper and lowercase letters
+
+abbr {
+ font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; // 4
+ text-transform: uppercase; // 3
+
+ &[title] {
+ border-bottom: 1px solid getColor(base, lines); // 1
+ cursor: help;
+ text-decoration: none; // 2
+ }
+}
+
+//
+// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+//
+
+b,
+strong {
+ font-weight: inherit;
+}
+
+//
+// Add the correct font weight in Chrome, Edge, and Safari.
+//
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+//
+// Add the correct font style in Android 4.3-.
+//
+
+dfn {
+ font-style: italic;
+}
+
+//
+// Add the correct colors in IE 9-.
+//
+
+mark {
+ background-color: #ffff00;
+ color: #000000;
+}
+
+//
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+//
+
+progress {
+ vertical-align: baseline;
+}
+
+//
+// Correct the font size in all browsers.
+//
+
+small {
+ // Use the next smaller size in the scale
+ font-size: 100% / $scale-ratio;
+}
+
+//
+// Change the positioning on superscript and subscript elements
+// in all browsers.
+// 1. Use the next smaller size in the scale
+// 2. Enables display of subscript variants
+// 3. Enables display of superscript variants
+// 4. Adjust position
+//
+
+sub,
+sup {
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ font-size: 100% / $scale-ratio; // 1
+}
+
+sub {
+ bottom: -0.25em; // 4
+ font-feature-settings: "subs" 1; // 2
+}
+
+sup {
+ top: -0.25em; // 4
+ font-feature-settings: "sups" 1; // 3
+}
+
+//
+// 1. Remove the text shadow on text selections.
+// 2. Customize the background color on text selections.
+//
+
+::-moz-selection {
+ background-color: getColor(base, selection); // 2
+ text-shadow: none; // 1
+}
+
+::selection {
+ background-color: getColor(base, selection); // 2
+ text-shadow: none; // 1
+}
+
+//
+// 5. Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
+// --------------------------------------------------
+
+//
+// Change the alignment on media elements in all browers.
+//
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+ vertical-align: middle;
+}
+
+//
+// Remove the border on images inside links in IE 10-.
+//
+
+img {
+ border-style: none;
+}
+
+//
+// Change the fill color to match the text color in all browsers.
+//
+
+svg {
+ fill: currentColor;
+}
+
+//
+// Hide the overflow in IE.
+//
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+//
+// 6. Links (https://www.w3.org/TR/html5/links.html#links)
+// --------------------------------------------------
+
+//
+// 1. Remove the gray background on active links in IE 10.
+// 2. Remove the gaps in underlines in iOS 8+ and Safari 8+.
+// 3. Add transition by default
+//
+
+a {
+ background-color: transparent; // 1
+ -webkit-text-decoration-skip: objects; // 2
+ color: getColor(base, primary);
+ text-decoration: none;
+ transition-duration: $transition-duration; // 3
+
+ &:hover,
+ &:focus { color: darken(getColor(base, primary), 20%); }
+}
+
+//
+// Remove the outline when hovering in all browsers.
+//
+
+a:hover {
+ outline-width: 0;
+}
+
+//
+// 7. Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
+// --------------------------------------------------
+
+//
+// Remove border spacing in all browsers.
+//
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+//
+// 8. Forms: (https://www.w3.org/TR/html5/forms.html)
+// --------------------------------------------------
+
+//
+// 1. Remove the default styling in all browsers.
+//
+
+input,
+select,
+textarea {
+ background-color: transparent; // 1
+ border-style: none; // 1
+ color: inherit; // 1
+ font: inherit;
+
+ &:focus { outline: 2px solid getColor(blue, base); }
+}
+
+//
+// Correct the overflow in IE.
+// 1. Correct the overflow in Edge.
+//
+
+button,
+input { // 1
+ overflow: visible;
+}
+
+//
+// Remove the inheritance in Edge, Firefox, and IE.
+// 1. Remove the inheritance in Firefox.
+//
+
+button,
+select { // 1
+ text-transform: none;
+}
+
+//
+// 1. Prevent the WebKit bug where (2) destroys native `audio` and `video`
+// controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+//
+
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; // 2
+ font: inherit;
+}
+
+//
+// Remove the inner border and padding in Firefox.
+//
+
+::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+//
+// Correct the focus styles unset by the previous rule.
+//
+
+:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+//
+// Correct the border and padding in all browsers.
+//
+
+fieldset {
+ border: 1px solid getColor(base, lines);
+ padding: 1lh 1em;
+}
+
+//
+// 1. Correct the text wrapping in Edge and IE.
+//
+
+legend {
+ display: table; // 1
+ max-width: 100%; // 1
+ white-space: normal; // 1
+ padding: 0 0.5em;
+}
+
+//
+// 1. Remove the vertical scrollbar in IE.
+// 2. Change the resize direction on textareas in all browsers.
+//
+
+textarea {
+ overflow: auto; // 1
+ resize: vertical; // 2
+ height: auto;
+ padding: 0.25lh 0.5em;
+}
+
+//
+// Remove the padding in IE 10-.
+//
+
+[type="checkbox"],
+[type="radio"] {
+ padding: 0;
+}
+
+//
+// Correct the cursor style on increment and decrement buttons in Chrome.
+//
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+//
+// 1. Correct the odd appearance in Chrome and Safari.
+// 2. Correct the outline style in Safari.
+//
+
+[type="search"] {
+ -webkit-appearance: textfield; // 1
+ outline-offset: -2px; // 2
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
+//
+
+::-webkit-search-cancel-button,
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+//
+// Correct the text style on placeholders in Chrome, Edge, and Safari.
+//
+
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: .54;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+//
+// Make the range input flat using the Concise settings
+//
+
+input[type="range"] {
+ border: none;
+ padding: 0;
+ width: 100%;
+ -webkit-appearance: none;
+
+ &:focus { outline: none; }
+
+ &::range-track {
+ background-color: getColor(base, lines);
+ border: none;
+ height: 0.2lh;
+ }
+
+ &::range-thumb {
+ border: none;
+ border-radius: 50%;
+ background-color: getColor(base, primary);
+ height: 0.5lh;
+ margin-top: -0.15lh;
+ width: 0.5lh;
+ }
+
+ &::-webkit-slider-thumb { -webkit-appearance: none; }
+}
+
+//
+// Make the buttons flat
+//
+
+button {
+ background-color: getColor(base, primary);
+ border: none;
+ color: getColor(text, inverted);
+ cursor: pointer;
+ font-size: typeScale(1);
+ line-height: 1.5lh;
+ padding: 0 1.5em;
+ transition: background-color $transition-duration;
+ white-space: nowrap;
+
+ &:hover,
+ &:focus {
+ background-color: lighten(getColor(base, primary), 5%);
+ text-decoration: none;
+ outline: none;
+ }
+
+ &:active { background-color: lighten(getColor(base, primary), 10%); }
+
+ &[disabled] {
+ background-color: getColor(state, muted);
+ color: getColor(text, inverted);
+ cursor: not-allowed;
+ }
+}
+
+// Make the submit inputs and buttons look the same
+input[type="submit"] { @extend button; }
+
+//
+// 9. WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria)
+// --------------------------------------------------
+
+//
+// Change the cursor on busy elements.
+//
+
+[aria-busy="true"] {
+ cursor: progress;
+}
+
+//
+// Change the cursor on control elements.
+//
+
+[aria-controls] {
+ cursor: pointer;
+}
+
+//
+// Change the cursor on disabled, not-editable, or otherwise
+// inoperable elements.
+//
+
+[aria-disabled] {
+ cursor: default;
+}
+
+//
+// 10. User interaction (https://www.w3.org/TR/html5/editing.html)
+// --------------------------------------------------
+
+//
+// Remove the tapping delay on clickable elements.
+// 1. Remove the tapping delay in IE 10.
+//
+
+a,
+area,
+button,
+input,
+label,
+select,
+textarea,
+[tabindex] {
+ -ms-touch-action: manipulation; // 1
+ touch-action: manipulation;
+}
+
+//
+// Change the display on visually hidden accessible elements.
+//
+
+[hidden][aria-hidden="false"] {
+ clip: rect(0, 0, 0, 0);
+ display: inherit;
+ position: absolute;
+}
+
+[hidden][aria-hidden="false"]:focus {
+ clip: auto;
+}
+
+//
+// 11. Automatic margins a.k.a Lobotomized Owl
+// --------------------------------------------------
+
+@if $automargin {
+ * { margin: 0; }
+
+ // A margin top is added to all the elements except the first one in each nesting level
+ * + * { margin-top: $block-margin; }
+
+ // These elements shouldn’t get a margin
+ li,
+ kbd,
+ div,
+ input,
+ option,
+ select,
+ a,
+ textarea,
+ body,
+ main,
+ span,
+ dd,
+ code,
+ label,
+ br
+ [#{$prefix}column]{ margin-top: 0; }
+
+ // First paragraphs below a heading shouldn’t get a margin
+ h1, h2, h3, h4, h5, h6 {
+ & + p { margin-top: 0; }
+ }
+}
diff --git a/src/_blockquotes.scss b/src/_blockquotes.scss
deleted file mode 100644
index bada090..0000000
--- a/src/_blockquotes.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-//
-// Blockquotes
-// =============================================================================
-
-blockquote {
- border-left: 1px solid getColor(base, lines);
- color: getColor(text, secondary);
- margin-bottom: 1lh;
- padding: 0 1em;
-
- cite,
- footer {
- display: block;
- // Use the next smaller size in the scale
- font-size: 100% / $scale-ratio;
- font-style: italic;
- margin-top: 0.25lh;
-
- @media (breakpoint) {
- font-size: 100% / $scale-ratio-secondary;
- }
- }
-
- cite:before,
- footer:before { content: "\2014 \00A0"; }
-}
diff --git a/src/_buttons.scss b/src/_buttons.scss
deleted file mode 100644
index 06d1cfd..0000000
--- a/src/_buttons.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-//
-// Buttons
-// =============================================================================
-
-button {
- background-color: getColor(base, primary);
- border: none;
- color: getColor(text, ui);
- cursor: pointer;
- display: inline-block;
- font-size: typeScale(1);
- line-height: 1.5lh;
- overflow: visible;
- padding: 0 1.5em;
- text-align: center;
- text-decoration: none;
- transition: $transition-duration;
- user-select: none;
- vertical-align: middle;
- white-space: nowrap;
-
- &:hover,
- &:focus {
- background-color: lighten(getColor(base, primary), 15%);
- color: getColor(text, ui);
- text-decoration: none;
- }
-
- &:focus,
- &:active { outline: none; }
-
- &:active { background-color: lighten(getColor(base, primary), 10%); }
-
- &[disabled] {
- background-color: darken(getColor(background, light), 10%);
- color: getColor(text, ui);
- cursor: not-allowed;
- opacity: 0.6;
- }
-}
diff --git a/src/_forms.scss b/src/_forms.scss
index c7ad911..1231108 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -5,72 +5,24 @@
input:not([type="submit"]),
select,
textarea {
- border: 1px solid getColor(base, lines);
- border-radius: 3px;
- height: 1.5lh;
- padding: 0 .75em;
- transition: $transition-duration;
width: 100%;
font-size: typeScale(1);
-
- &:focus {
- border-color: getColor(blue, lighter);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
- 0 0 6px rgba(getColor(blue, base), .5);
- outline: none;
- }
+ min-height: 1.5lh;
&[disabled] {
- background-color: getColor(background, light);
+ background-color: getColor(state, muted);
cursor: not-allowed;
- }
-
- label + & {
- margin-top: 0.25lh;
+ border: 0;
}
}
-input:not([type="submit"]) {
- line-height: normal;
- min-height: 1lh;
-
- // Remove focus styles
- &[type="checkbox"],
- &[type="radio"],
- &[type="range"],
- &[type="file"],
- &[type="color"],
- &[type="submit"] {
- &:focus {
- border-color: transparent;
- box-shadow: none;
- outline: none;
- }
- }
-}
-
-input[type="submit"] {
- @extend button;
-}
-
-label {
- display: block;
- font-size: typeScale(1);
-}
-
-fieldset {
+input:not([type="submit"]):not([type="range"]),
+select,
+textarea {
border: 1px solid getColor(base, lines);
- border-radius: 3px;
- padding: 1lh 1em;
- margin-bottom: 1lh;
-}
-
-legend {
- font-weight: bold;
- padding: 0 1em;
+ padding: 0 0.75em;
}
-// Keep the original size for this small inputs
input[type="checkbox"],
input[type="file"],
input[type="image"],
@@ -79,111 +31,50 @@ input[type="radio"] {
width: auto;
}
-// Checkbox & radio
input[type="checkbox"],
input[type="radio"] {
line-height: normal;
padding: 0;
vertical-align: middle;
- margin-top: 0 !important;
}
-// Checkbox & radio elements are inline with their label
-input[type="checkbox"] + label,
-input[type="radio"] + label {
- display: inline-block;
- margin: 0 0 0 .5em;
- line-height: 1.25lh;
- vertical-align: middle;
-}
-
-// File upload
input[type="file"] {
border: none;
- line-height: 100%;
+ line-height: 1lh;
padding: 0;
}
-// Textarea
-textarea {
- height: auto;
- padding: 0.25lh 0.5em;
- resize: vertical;
-}
-
-// Style select like a standard input - Internet Explorer 11+
select {
background-color: transparent;
- border-radius: 5px;
- padding: 0 0 0 0.5em;
+ padding-left: 0.5em;
+ width: auto;
+ min-width: 10em;
+ height: 1.5lh;
&[disabled] { color: getColor(text, secondary); }
- &[multiple] { height: auto; }
+ &[multiple] {
+ height: auto;
+ width: 100%;
+ padding: 0;
+ }
&::-ms-expand { display: none; }
&::-ms-value { color: currentColor; }
- option { padding: 0 .75em }
+ option { padding: 0 0.75em }
}
-// Range input
-input[type="range"] {
- border: none;
- padding: 0;
- width: 100%;
- -webkit-appearance: none;
-
- &:focus { outline: none; }
-
- &::-webkit-slider-runnable-track {
- background-color: darken(getColor(background, light), 10%);
- border: none;
- border-radius: 3px;
- height: 5px;
- }
-
- &::-webkit-slider-thumb {
- border: none;
- border-radius: 50%;
- background-color: getColor(base, primary);
- height: 16px;
- margin-top: -5px;
- width: 16px;
- -webkit-appearance: none;
- }
-
- &::-moz-range-track {
- background-color: darken(getColor(background, light), 10%);
- border: none;
- border-radius: 3px;
- height: 5px;
- }
-
- &::-moz-range-thumb {
- border: none;
- border-radius: 50%;
- background-color: getColor(base, primary);
- height: 16px;
- margin-top: -5px;
- width: 16px;
- }
-
- &::-ms-track {
- background-color: darken(getColor(background, light), 10%);
- border: none;
- border-radius: 3px;
- color: transparent;
- height: 5px;
- }
-
- &::-ms-thumb {
- border: none;
- border-radius: 50%;
- background-color: getColor(base, primary);
- height: 16px;
- margin-top: -5px;
- width: 16px;
- }
+label {
+ display: block;
+ font-size: typeScale(1);
+ line-height: 1.5lh;
}
+
+// Labels are inline with their checkbox and radio elements
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+ display: inline-block;
+ margin-left: 0.5em;
+}
\ No newline at end of file
diff --git a/src/_headings.scss b/src/_headings.scss
index 863eb12..b820b36 100644
--- a/src/_headings.scss
+++ b/src/_headings.scss
@@ -2,10 +2,17 @@
// Headings
// =============================================================================
+h1 { font-size: typeScale(6); }
+h2 { font-size: typeScale(5); }
+h3 { font-size: typeScale(4); }
+h4 { font-size: typeScale(3); }
+h5 { font-size: typeScale(2); }
+h6 { font-size: typeScale(1); }
+
h1, h2, h3, h4, h5, h6 {
color: getColor(text, heading);
font-family: $font-secondary;
- line-height: 1.25;
+ line-height: 1.3;
small {
color: inherit;
@@ -13,29 +20,21 @@ h1, h2, h3, h4, h5, h6 {
// Use the next smaller size in the scale
font-size: 100% / $scale-ratio;
- @media ($breakpoint) { font-size: 100% / $scale-ratio-secondary; }
}
}
-h1, h2, h3 { margin: 0.5lh 0 0.25lh; }
-h4, h5, h6 { margin: 0.25lh 0; }
-
-h1 { font-size: typeScale(6); }
-h2 { font-size: typeScale(5); }
-h3 { font-size: typeScale(4); }
-h4 { font-size: typeScale(3); }
-h5 { font-size: typeScale(2); }
-h6 { font-size: typeScale(1); }
-
+h1, h2, h3 {
+ margin: 0.5lh 0 0.25lh;
-// Styles for medium and up displays
-@media ($breakpoint) {
- h1, h2, h3 { margin: 1lh 0 0.25lh; }
+ a {
+ color: inherit;
- h1 { font-size: typeScale(6, $scale-ratio-secondary); }
- h2 { font-size: typeScale(5, $scale-ratio-secondary); }
- h3 { font-size: typeScale(4, $scale-ratio-secondary); }
- h4 { font-size: typeScale(3, $scale-ratio-secondary); }
- h5 { font-size: typeScale(2, $scale-ratio-secondary); }
- h6 { font-size: typeScale(1, $scale-ratio-secondary); }
+ &:hover,
+ &:focus {
+ color: getColor(base, primary);
+ text-decoration: none;
+ }
+ }
}
+
+h4, h5, h6 { margin: 0.25lh 0; }
diff --git a/src/_lists.scss b/src/_lists.scss
index 2018352..7091338 100644
--- a/src/_lists.scss
+++ b/src/_lists.scss
@@ -4,41 +4,25 @@
ul,
ol {
- padding-left: 1.5em;
- margin-bottom: 0.25lh;
+ padding-left: 1em;
- ul,
- ol { margin-bottom: 0; }
-}
-
-ul {
- ul { list-style-type: square; }
-
- ol { list-style-type: lower-roman; }
+ ol,
+ ul {
+ padding-left: 1.5em;
+ }
}
ol {
- ol { list-style-type: lower-roman; }
-
- ul { list-style-type: square; }
+ padding-left: 0;
+ counter-reset: item;
+
+ li {
+ list-style: none;
+ }
+
+ li:before {
+ content: counters(item, ".") ". ";
+ counter-increment: item;
+ margin-right: 0.2em;
+ }
}
-
-//
-// Navigation lists
-// ----------------
-
-nav {
- ul { padding-left: 0; }
- li { list-style: none; }
-}
-
-//
-// Definition Lists
-// ----------------
-
-dl { margin-bottom: 1lh; }
-
-dt { font-weight: bold; }
-
-dt,
-dd { margin-bottom: 0.25lh; }
diff --git a/src/_normalization.scss b/src/_normalization.scss
deleted file mode 100644
index 7b43b67..0000000
--- a/src/_normalization.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-//
-// Normalization and Base styles
-// =============================================================================
-// Adapted from sanitize.css
-// (https://github.com/10up/sanitize.css)
-
-//
-// Normalization
-// -------------
-
-abbr[title] {
- text-decoration: underline; // Chrome 48+, Edge 12+, Internet Explorer 11-, Safari 9+
- text-decoration: underline dotted; // Firefox 40+
-}
-
-// Chrome 44-, iOS 8+, Safari 9+
-audio:not([controls]) { display: none; }
-
-// Edge 12+, Safari 6.2+, and Chrome 18+
-b,
-strong { font-weight: bolder; }
-
-button {
- -webkit-appearance: button; // iOS 8+
- overflow: visible; // Internet Explorer 11-
-}
-
-button,
-input {
- // Firefox 4+
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-
- // Firefox 4+
- &:-moz-focusring { outline: 1px dotted ButtonText; }
-}
-
-// Firefox 40+, Internet Explorer 11-
-button,
-select { text-transform: none; }
-
-// Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
-details { display: block; }
-
-hr {
- overflow: visible; // Internet Explorer 11-, Edge 12+
- margin: 1lh 0;
- background-color: getColor(base, lines);
- height: 1px;
-}
-
-html {
- -ms-overflow-style: -ms-autohiding-scrollbar; // Edge 12+, Internet Explorer 11-
- overflow-y: scroll; // All browsers without overlaying scrollbars
- -webkit-text-size-adjust: 100%; // iOS 8+, Windows Phone 8.1+
-}
-
-input {
- // iOS 8+
- -webkit-border-radius: 0;
-
- // iOS 8+
- &[type="button"],
- &[type="reset"],
- &[type="submit"] { -webkit-appearance: button; }
-
- // Firefox 36+
- &[type="number"] { width: auto; }
-
- &[type="search"] {
- // Chrome 45+, Safari 9+
- -webkit-appearance: textfield;
-
- // Chrome 45+, Safari 9+
- &::-webkit-search-cancel-button,
- &::-webkit-search-decoration { -webkit-appearance: none; }
- }
-}
-
-// Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+
-main { display: block; }
-
-// Internet Explorer 11-
-pre { overflow: auto; }
-
-// Internet Explorer 11-, Windows Phone 8.1+
-progress { display: inline-block; }
-
-// Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+
-summary { display: block; }
-
-// Internet Explorer 11-
-svg:not(:root) { overflow: hidden; }
-
-// Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+
-template { display: none; }
-
-// Edge 12+, Internet Explorer 11-
-textarea { overflow: auto; }
-
-// Internet Explorer 10-
-[hidden] { display: none; }
-
-//
-// Universal Inheritance
-// ---------------------
-
-*,
-::before,
-::after {
- box-sizing: inherit;
-}
-
-* {
- font-size: inherit;
- line-height: inherit;
-}
-
-::before,
-::after {
- text-decoration: inherit;
- vertical-align: inherit;
-}
-
-button,
-input,
-select,
-textarea {
- font-family: inherit;
- font-style: inherit;
- font-weight: inherit;
-}
-
-//
-// Opinionated Defaults
-// ---------------------
-
-// Specify the root styles of the document
-:root {
- background-color: getColor(background, body);
- box-sizing: border-box;
- color: getColor(text, primary);
- cursor: default;
- font: $font-size + px / 1.5 $font-primary;
- text-rendering: optimizeLegibility;
-
- @media ($breakpoint) {
- font-size: $font-size-secondary + px;
- }
-}
-
-* {
- margin: 0;
- padding: 0;
- background-repeat: no-repeat;
-}
-
-*,
-::before,
-::after {
- border-style: solid;
- border-width: 0;
-}
-
-// Remove the tapping delay from clickable elements
-a,
-area,
-button,
-input,
-label,
-select,
-textarea,
-[tabindex] { touch-action: manipulation; }
-
-// Specify the standard appearance of selects
-select {
- -moz-appearance: none; // Firefox 40+
- -webkit-appearance: none; // Chrome 45+
-
- // Edge 12+, Internet Explorer 11-
- &::-ms-expand { display: none; }
-
- // Edge 12+, Internet Explorer 11-
- &::-ms-value { color: currentColor; }
-}
-
-// Use current current as the default fill of svg elements
-svg { fill: currentColor; }
-
-// Specify the progress cursor of updating elements
-[aria-busy="true"] { cursor: progress; }
-
-// Specify the pointer cursor of trigger elements
-[aria-controls] { cursor: pointer; }
-
-// Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements
-[aria-disabled] { cursor: default; }
-
-// Specify the style of visually hidden yet accessible elements
-[hidden][aria-hidden="false"] {
- clip: rect(0 0 0 0);
- display: inherit;
- position: absolute;
-
- &:focus { clip: auto; }
-}
-
-// Specify the alignment of media elements
-audio,
-canvas,
-iframe,
-img,
-svg,
-video { vertical-align: middle; }
-
-// Specify the background color, and drop shadow of text selections
-::-moz-selection {
- background-color: getColor(base, selection);
- text-shadow: none;
-}
-
-::selection {
- background-color: getColor(base, selection);
- text-shadow: none;
-}
-
-//
-// Automatic margins
-// -----------------
-
-@if $automargin {
- * + * { margin-top: $block-margin; }
-
- li, kbd, div, input, option, select, a, textarea {
- margin-top: 0;
- }
-}
diff --git a/src/_print.scss b/src/_print.scss
index 21075dd..a24a3a9 100644
--- a/src/_print.scss
+++ b/src/_print.scss
@@ -3,7 +3,7 @@
// =============================================================================
@media print {
- @page { margin: .5cm; }
+ @page { margin: 2cm; }
*,
*:before,
@@ -17,9 +17,25 @@
:root {
background-color: white;
color: black;
- font: 11pt / 1.3 $font-print;
+ font: 12pt / 1.4 $font-print-primary;
}
+ body {
+ width: 100% !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ page-break-after: avoid;
+ font-family: $font-print-secondary;
+ }
+
+ h1 { font-size: 19pt; }
+ h2 { font-size: 17pt; }
+ h3 { font-size: 15pt; }
+ h4, h5, h6 {font-size: 14pt; }
+
img {
max-width: 100% !important;
page-break-after: avoid;
@@ -43,8 +59,6 @@
widows: 3;
}
- h2, h3 { page-break-after: avoid; }
-
a,
a:visited {
color: black;
diff --git a/src/_tables.scss b/src/_tables.scss
index 9292424..9880469 100644
--- a/src/_tables.scss
+++ b/src/_tables.scss
@@ -3,53 +3,29 @@
// =============================================================================
table {
- border: 1px solid getColor(base, lines);
- border-collapse: collapse;
- border-spacing: 0;
- empty-cells: show;
width: 100%;
@media ($breakpoint) {
width: auto;
-
- th,
- td { padding: 0 2.5em; }
}
- caption {
- color: getColor(text, primary);
- font-size: typeScale(1);
- font-style: italic;
- line-height: 2lh;
- text-align: center;
-
- @media ($breakpoint) {
- font-size: typeScale(1, $scale-ratio-secondary);
- }
- }
-
- thead {
+ thead,
+ tfoot {
background-color: getColor(background, light);
text-align: left;
}
- tfoot {
- background-color: lighten(getColor(background, light), 2.5%);
- border-top: 1px solid getColor(base, lines);
- }
-
th,
td {
- border-right: 1px solid getColor(base, lines);
- line-height: 1lh;
+ line-height: 1.5lh;
overflow: visible;
padding: 0 1em;
-
- @media ($breakpoint) { line-height: 2lh; }
-
- &:last-child { border-right: none; }
}
- tr,
- td { transition: background-color $transition-duration; }
+ caption {
+ font-size: typeScale(1);
+ font-style: italic;
+ line-height: 2lh;
+ text-align: center;
+ }
}
diff --git a/src/_type.scss b/src/_type.scss
deleted file mode 100644
index af70ba4..0000000
--- a/src/_type.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-//
-// Type Styles
-// =============================================================================
-
-//
-// Defaults
-// --------
-
-small,
-sup,
-sub {
- // Use the next smaller size in the scale
- font-size: 100% / $scale-ratio;
-
- @media ($breakpoint) {
- font-size: 100% / $scale-ratio-secondary;
- }
-}
-
-sup,
-sub {
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sup {
- top: -0.25em;
- font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
-}
-
-sub {
- bottom: -0.25em;
- font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
-}
-
-//
-// Links
-// -----
-
-a {
- background-color: transparent;
- color: getColor(base, primary);
- cursor: pointer;
- text-decoration: none;
- transition: $transition-duration;
-
- &:hover,
- &:focus { color: darken(getColor(base, primary), 15%); }
-}
-
-h1, h2, h3 {
- a {
- color: inherit;
-
- &:hover,
- &:focus {
- color: getColor(base, primary);
- text-decoration: none;
- }
- }
-}
-
-
-//
-// Abbreviations
-// -------------
-// 1. Change all letters to uppercase
-// 2. Turn on small caps for upper and lowercase letters
-//
-
-abbr {
- text-transform: uppercase; /* 1 */
- font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; /* 2 */
-}
-
-
-//
-// Pre, Code, and User Input
-// -------------------------
-
-code,
-pre,
-kbd,
-samp {
- font-family: $font-mono;
- font-size: typeScale(1);
-
- @media ($breakpoint) {
- font-size: typeScale(1, $scale-ratio-secondary);
- }
-}
-
-pre { padding: 0.5lh 1em; }
-
-code {
- vertical-align: middle;
- white-space: nowrap;
-}
-
-code,
-pre {
- background-color: getColor(background, light);
- border: 1px solid getColor(base, lines);
- border-radius: 3px;
- color: darken(getColor(text, primary), 5%);
-}
-
-code { padding: 2px 3px; }
-
-pre code {
- background-color: transparent;
- border: none;
- padding: 0;
- vertical-align: inherit;
- white-space: pre;
- font-size: inherit;
-}
-
-kbd {
- background-color: transparent;
- border: 1px solid getColor(base, lines);
- border-radius: 3px;
- box-shadow: 0 2px 0 -1px white,
- 0 2px 0 darken(getColor(base, lines), 1.5%);
- display: inline-block;
- padding: 0 6px 0;
- white-space: nowrap;
-}
-
-samp { vertical-align: bottom; }
-
-
-//
-// Addresses
-// ---------
-
-address { font-style: normal; }
diff --git a/test.html b/test.html
index 36d15db..128e308 100644
--- a/test.html
+++ b/test.html
@@ -12,7 +12,7 @@
.grid--example {
- background-color: #D34A28;
+ background-color: #C65146;
color: white;
display: inline-block;
margin-bottom: 0.5em !important;
@@ -25,13 +25,14 @@
-
Heading 2 Helper text
Heading 3 Helper text
Heading 4 Helper text
Heading 5 Helper text
Heading 6 Helper text
+
+
Link Heading 6 Helper text
- Lorem ipsum dolor sit amet , sadipscing elitr , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna small aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet2 clita2 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.
+ Lorem ipsum dolor sit amet sadipscing elitr sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna small aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet2 clita2 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.
Heading 6 Helper text
List Item
List Item
+ List Item
List Item
List Item
List Item
+ List Item
+ List Item
@@ -73,17 +77,24 @@ Heading 6 Helper text
+ List Item
List Item
List Item
+ List Item
+ List Item
List Item
List Item
+ List Item
+ List Item
List Item
+ List Item
+ List Item
@@ -94,147 +105,187 @@ Heading 6 Helper text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
-
-
- 1
-
+
-
-
- 2
-
+
-
-
- 3
-
+
-
-
- 4
-
+
-
-
- 5
-
+
-
-
- 6
-
+
-
-
- 4
-
+
+
+ 4
+
-
- 4
-
+
+ 4
+
-
-
-
-
- 3
-
+
+
+ 3
+
-
- 3
-
+
+ 3
+
-
- 3
-
+
+ 3
+
-
-
-
-
- 2
-
+
+
+ 2
+
-
- 2
-
+
+ 2
+
-
- 2
-
+
+ 2
+
+
+
+ 2
+
+
+
+ 2
+
-
-
-
2
+
-
-
-
-
-
-
1 +2
+
+
+ xs-1 sm-2 md-3 lg-4 xl-5
+
-
-
-
-
1 +3
+
+
+ 1 +xs-1 +sm-2 +md-3 +lg-4 +xl-5
+
-
+
+
+
+ 1st
+
+
+
+ 2nd
+
+
+
+ 3rd
+
+
+
+ 4th
+
+
+
+ 5th
+
+
+
+ 6th
+
+
+