diff --git a/app/assets/stylesheets/_colors.scss b/app/assets/stylesheets/_colors.scss deleted file mode 100644 index f3243dafb..000000000 --- a/app/assets/stylesheets/_colors.scss +++ /dev/null @@ -1,29 +0,0 @@ -$smoke-100: #08090a; -$smoke-90: #202428; -$smoke-80: #363d44; -$smoke-70: #4d5760; -$smoke-60: #64707d; -$smoke-50: #7d8a97; -$smoke-40: #99a3ad; -$smoke-30: #b5bdc4; -$smoke-20: #d2d6db; -$smoke-10: #eef0f1; -$smoke-00: #f9fafa; - -$snowflake: #fff; - -$dolphin: #3b49df; -$dolphin-darker: #1a2be5; -$dolphin-lighter: #8d95f2; - -$avocado: #26d9ca; -$avocado-darker: #1ab3a6; -$avocado-lighter: #79ece2; - -$peanut: #ffcf4c; -$peanut-darker: #f5b400; -$peanut-lighter: #ffe499; - -$raspberry: #dc1818; -$raspberry-darker: #c20a0a; -$raspberry-lighter: #ec5050; \ No newline at end of file diff --git a/app/assets/stylesheets/_spacing-units.scss b/app/assets/stylesheets/_spacing-units.scss deleted file mode 100644 index 7e9387e8e..000000000 --- a/app/assets/stylesheets/_spacing-units.scss +++ /dev/null @@ -1,9 +0,0 @@ -$su-1: 4px; -$su-2: 8px; -$su-3: 12px; -$su-4: 16px; -$su-5: 20px; -$su-6: 24px; -$su-7: 32px; -$su-8: 48px; -$su-9: 64px; diff --git a/app/assets/stylesheets/base/boxes.scss b/app/assets/stylesheets/base/boxes.scss new file mode 100644 index 000000000..f4d1de32a --- /dev/null +++ b/app/assets/stylesheets/base/boxes.scss @@ -0,0 +1,49 @@ +@import '../vars/variables'; + +// box() - generating classes for different style +// +// This mixin automates process of generating classes for different +// types of boxes: filled & outlined, each with variations +// for several levels of elevation (box-shadow). +// +// @param {object} $this Caching current parent +// @param {color} $color-1 Background color for filled variation +// @param {color} $color-2 Accent color for border & shadow +@mixin box($this: $this, $color-1: $smoke-90, $color-2: $smoke-100) { + border-color: $color-2; + + &#{$this}--filled { + background-color: $color-1; + } + + @for $i from 1 through 3 { + &#{$this + '--level-' + $i} { + box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2; + } + } +} + +.crayons-box { + $this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/ + border: 2px solid; + border-radius: $br-default; + background-color: $snowflake; + + @include box($this, $smoke-90, $smoke-100); + + &--danger { + @include box($this, $raspberry, $raspberry-darker); + } + + &--success { + @include box($this, $avocado, $avocado-darker); + } + + &--warning { + @include box($this, $peanut, $peanut-darker); + } + + &--info { + @include box($this, $dolphin, $dolphin-darker); + } +} diff --git a/app/assets/stylesheets/base/colors.scss b/app/assets/stylesheets/base/colors.scss new file mode 100644 index 000000000..a0d090a64 --- /dev/null +++ b/app/assets/stylesheets/base/colors.scss @@ -0,0 +1,34 @@ +@import '../vars/variables'; + +// Color +@include generate-classes( + 'color', + 'color', + ( + 'transparent': transparent, + 'current': currentColor, + ), + $colors +); + +// Background Color +@include generate-classes( + 'bg', + 'background-color', + ( + 'transparent': transparent, + 'current': currentColor, + ), + $colors +); + +// Border Color +@include generate-classes( + 'border', + 'border-color', + ( + 'transparent': transparent, + 'current': currentColor, + ), + $colors +); \ No newline at end of file diff --git a/app/assets/stylesheets/base/decorations.scss b/app/assets/stylesheets/base/decorations.scss new file mode 100644 index 000000000..7eada6936 --- /dev/null +++ b/app/assets/stylesheets/base/decorations.scss @@ -0,0 +1,124 @@ +@import '../vars/variables'; + +// Opacity +@include generate-classes( + 'opacity', + 'opacity', + ( + '100': 1, + '75': 0.75, + '50': 0.5, + '25': 0.25, + '0': 0, + ) +); + +// Box Shadow +.shadow-none { + box-shadow: none !important; +} + +// Cursor +@include generate-classes( + 'cursor', + 'cursor', + ( + 'auto': auto, + 'default': default, + 'pointer': pointer, + 'wait': wait, + 'text': text, + 'move': move, + 'not-allowed': not-allowed, + ) +); + +// Outline +.outline-none { + outline: none !important; +} + +// Pointer events +@include generate-classes( + 'pointer-events', + 'pointer-events', + ( + 'auto': auto, + 'none': none, + ) +); + +// Screen reader only +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border-width: 0 !important; +} + +// Border radius +@include generate-classes( + 'radius', + 'border-radius', + ( + 'default': $br-default, + '0': 0, + 'full': 9999px, + ) +); + +// Background Position +@include generate-classes( + 'bg', + 'background-position', + ( + 'bottom': bottom, + 'center': center, + 'left': left, + 'right': right, + 'top': top, + 'left-bottom': left bottom, + 'left-top': left top, + 'right-bottom': right bottom, + 'right-top': right top, + ) +); + +// Background Repeat +@include generate-classes( + 'bg', + 'background-repeat', + ( + 'repeat': repeat, + 'repeat-x': repeat-x, + 'repeat-y': repeat-y, + 'no-repeat': no-repeat, + ) +); + +// Background Size +@include generate-classes( + 'bg', + 'background-size', + ( + 'auto': auto, + 'cover': cover, + 'contain': contain, + ) +); + +// Background Attachement +@include generate-classes( + 'bg', + 'background-attachment', + ( + 'fixed': fixed, + 'local': local, + 'scroll': scroll, + ) +); diff --git a/app/assets/stylesheets/base/flexbox.scss b/app/assets/stylesheets/base/flexbox.scss new file mode 100644 index 000000000..14f5d893c --- /dev/null +++ b/app/assets/stylesheets/base/flexbox.scss @@ -0,0 +1,119 @@ +@import '../vars/variables'; + +// Flex flow +@include generate-classes( + 'flex', + 'flex-direction', + ( + 'row': row, + 'col': column, + 'row-reverse': row-reverse, + 'col-reverse': column-reverse, + ) +); + +// Flex wrap +@include generate-classes( + 'flex', + 'flex-wrap', + ( + 'wrap': wrap, + 'nowrap': nowrap, + 'wrap-reverse': wrap-reverse, + ) +); + +// Align items +@include generate-classes( + 'items', + 'align-items', + ( + 'stretch': stretch, + 'start': flex-start, + 'center': center, + 'end': flex-end, + 'baseline': baseline, + ) +); + +// Align content +@include generate-classes( + 'content', + 'align-content', + ( + 'start': flex-start, + 'center': center, + 'end': flex-end, + 'between': space-between, + 'around': space-around, + ) +); + +// Align self +@include generate-classes( + 'self', + 'align-self', + ( + 'auto': auto, + 'start': flex-start, + 'center': center, + 'end': flex-end, + 'stretch': stretch, + ) +); + +// Justify content +@include generate-classes( + 'justify', + 'justify-content', + ( + 'start': flex-start, + 'center': center, + 'end': flex-end, + 'between': space-between, + 'around': space-around, + ) +); + +// Flex +@include generate-classes( + 'flex', + 'flex', + ( + 'initial': 0 auto, + '1': 1 1 0%, + 'auto': 1 1 auto, + 'none': none, + ) +); + +// Flex grow +@include generate-classes( + 'grow', + 'flex-grow', + ( + '0': 0, + '1': 1, + ) +); + +// Flex shrink +@include generate-classes( + 'shrink', + 'flex-shrink', + ( + '0': 0, + '1': 1, + ) +); + +// Order +@include generate-classes( + 'order', + 'order', + ( + 'first': -9999, + 'last': 9999, + '0': 0, + ) +); diff --git a/app/assets/stylesheets/base/grid.scss b/app/assets/stylesheets/base/grid.scss new file mode 100644 index 000000000..e52f30b79 --- /dev/null +++ b/app/assets/stylesheets/base/grid.scss @@ -0,0 +1,53 @@ +@import '../vars/variables'; + +// Gap +@include generate-classes( + 'gap', + 'grid-gap', + ( + '0': 0, + ), + $spacing-units +); + +// Grid Template Columns +@include generate-classes( + 'grid-cols', + 'grid-template-columns', + ( + 'none': none, + '1': repeat(1,minmax(0,1fr)), + '2': repeat(2,minmax(0,1fr)), + '3': repeat(3,minmax(0,1fr)), + '4': repeat(4,minmax(0,1fr)), + '5': repeat(5,minmax(0,1fr)), + '6': repeat(6,minmax(0,1fr)), + '7': repeat(7,minmax(0,1fr)), + '8': repeat(8,minmax(0,1fr)), + ) +); + +// Grid Template Rows +@include generate-classes( + 'grid-rows', + 'grid-template-columns', + ( + 'none': none, + '1': repeat(1,minmax(0,1fr)), + '2': repeat(2,minmax(0,1fr)), + '3': repeat(3,minmax(0,1fr)), + '4': repeat(4,minmax(0,1fr)), + ) +); + +// Grid Flow +@include generate-classes( + 'grid-flow', + 'grid-auto-flow', + ( + 'row': row, + 'col': column, + 'row-dense': row dense, + 'col-dense': column dense, + ) +); \ No newline at end of file diff --git a/app/assets/stylesheets/base/icons.scss b/app/assets/stylesheets/base/icons.scss new file mode 100644 index 000000000..d65ba52a0 --- /dev/null +++ b/app/assets/stylesheets/base/icons.scss @@ -0,0 +1,13 @@ +.crayons-icon { + vertical-align: bottom; + -moz-transform: rotate(360deg); + + // If we ever have an icon with its own colors that we don't want to overwrite, + // lets use modifier class `.crayons-icon__default`. It will prevent applying + // currentColor from parent element. + &:not(#{& + --default}) { + * { + fill: currentColor; + } + } +} diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss new file mode 100644 index 000000000..4cee4fd28 --- /dev/null +++ b/app/assets/stylesheets/base/layout.scss @@ -0,0 +1,152 @@ +@import '../vars/variables'; + +// Display +.hidden { + display: none !important; +} + +.block { + display: block !important; +} + +.inline { + display: inline !important; +} + +.inline-block { + display: inline-block !important; +} + +.flex { + display: flex !important; +} + +.inline-flex { + display: inline-flex !important; +} + +.grid { + display: grid !important; +} + +// Floats +@include generate-classes( + 'float', + 'float', + ( + 'left': left, + 'right': right, + 'none': none, + 'unset': unset, + ) +); + +.clear { + clear: both !important; +} + +// Visibility +.visible { + visiblity: visible !important; +} + +.invisible { + visiblity: hidden !important; +} + +// Box sizing +@include generate-classes( + 'box', + 'box-sizing', + ( + 'border': border-box, + 'content': content-box, + ) +); + +// Table layout +@include generate-classes( + 'table', + 'table-layout', + ( + 'auto': auto, + 'fixed': fixed, + ) +); + +// Border style +@include generate-classes( + 'border', + 'border-style', + ( + 'solid': solid, + 'dashed': dashed, + 'dotted': dotted, + 'none': none, + ) +); + +// Border width +@include generate-classes( + 'border', + 'border-width', + ( + '1': 1px, + '2': 2px, + '3': 3px, + '4': 4px, + '8': 8px, + ) +); + +// Border top width +@include generate-classes( + 'border', + 'border-top-width', + ( + 't-1': 1px, + 't-2': 2px, + 't-3': 3px, + 't-4': 4px, + 't-8': 8px, + ) +); + +// Border bottom width +@include generate-classes( + 'border', + 'border-bottom-width', + ( + 'b-1': 1px, + 'b-2': 2px, + 'b-3': 3px, + 'b-4': 4px, + 'b-8': 8px, + ) +); + +// Border left width +@include generate-classes( + 'border', + 'border-left-width', + ( + 'l-1': 1px, + 'l-2': 2px, + 'l-3': 3px, + 'l-4': 4px, + 'l-8': 8px, + ) +); + +// Border right width +@include generate-classes( + 'border', + 'border-right-width', + ( + 'r-1': 1px, + 'r-2': 2px, + 'r-3': 3px, + 'r-4': 4px, + 'r-8': 8px, + ) +); diff --git a/app/assets/stylesheets/base/positioning.scss b/app/assets/stylesheets/base/positioning.scss new file mode 100644 index 000000000..f5b9598af --- /dev/null +++ b/app/assets/stylesheets/base/positioning.scss @@ -0,0 +1,202 @@ +@import '../vars/variables'; + +// Positions +.static { + position: static !important; +} + +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +.sticky { + position: sticky !important; +} + +.relative { + position: relative !important; +} + +// All directions +@include generate-classes( + 'all', + (top, left, right, bottom), + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ) +); + +// Top +@include generate-classes( + 'top', + 'top', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + '1': $su-1, + '2': $su-2, + '3': $su-3, + '4': $su-4, + ) +); + +// Top negative +@include generate-classes( + '-top', + 'top', + ( + '1': -$su-1, + '2': -$su-2, + '3': -$su-3, + '4': -$su-4, + ) +); + +// Bottom +@include generate-classes( + 'bottom', + 'bottom', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + '1': $su-1, + '2': $su-2, + '3': $su-3, + '4': $su-4, + ) +); + +// Bottom negative +@include generate-classes( + '-bottom', + 'bottom', + ( + '1': -$su-1, + '2': -$su-2, + '3': -$su-3, + '4': -$su-4, + ) +); + +// Left +@include generate-classes( + 'left', + 'left', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + '1': $su-1, + '2': $su-2, + '3': $su-3, + '4': $su-4, + ) +); + +// Left negative +@include generate-classes( + '-left', + 'left', + ( + '1': -$su-1, + '2': -$su-2, + '3': -$su-3, + '4': -$su-4, + ) +); + +// Right +@include generate-classes( + 'left', + 'left', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + '1': $su-1, + '2': $su-2, + '3': $su-3, + '4': $su-4, + ) +); + +// Right negative +@include generate-classes( + '-right', + 'right', + ( + '1': -$su-1, + '2': -$su-2, + '3': -$su-3, + '4': -$su-4, + ) +); + +// Z-index +@include generate-classes( + 'z', + 'z-index', + ( + 'z-negative': -1, + 'z-0': 0, + 'z-10': 10, + 'z-20': 20, + 'z-30': 30, + 'z-40': 40, + 'z-50': 50, + 'z-auto': auto, + ) +); + +// Overflow +@include generate-classes( + 'overflow', + 'overflow', + ( + 'auto': auto, + 'visible': visible, + 'scroll': scroll, + 'hidden': hidden, + ) +); + +// Overflow X +@include generate-classes( + 'overflow-x', + 'overflow-x', + ( + 'auto': auto, + 'visible': visible, + 'scroll': scroll, + 'hidden': hidden, + ) +); + +// Overflow Y +@include generate-classes( + 'overflow-y', + 'overflow-y', + ( + 'auto': auto, + 'visible': visible, + 'scroll': scroll, + 'hidden': hidden, + ) +); + + +// Smooth scrolling on iOS +.scrolling-touch { + -webkit-overflow-scrolling: touch !important; +} +.scrolling-auto { + -webkit-overflow-scrolling: auto !important; +} diff --git a/app/assets/stylesheets/base/reset.scss b/app/assets/stylesheets/base/reset.scss new file mode 100644 index 000000000..7ac92bff4 --- /dev/null +++ b/app/assets/stylesheets/base/reset.scss @@ -0,0 +1,136 @@ +// TODO: uncomment when we're ready! +// *, +// *::before, +// *::after { +// box-sizing: border-box; +// } + +// Remove default padding +ul[class], +ol[class] { + padding: 0; +} + +html { + line-height: 1.5; + -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS. +} + +// Remove default margin +body, +h1, +h2, +h3, +h4, +p, +ul[class], +ol[class], +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +// Set core body defaults +body { + min-height: 100vh; + scroll-behavior: smooth; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +// Render the `main` element consistently in IE. +main { + display: block; +} + +// Remove list styles on ul, ol elements with a class attribute +ul[class], +ol[class] { + list-style: none; +} + +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Unify styling +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.5; + margin: 0; +} + +// Correct the inability to style clickable types in iOS and Safari. +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; +} + +// Remove the inner border and padding in Firefox. +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +// Add the correct font weight in Chrome, Edge, and Safari. +b, +strong { + font-weight: bolder; +} + +// Add the correct font size in all browsers. +small { + font-size: 80%; +} + +//Prevent `sub` and `sup` elements from affecting the line height in all browsers. +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +// Remove all animations and transitions for people that prefer not to see them +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/app/assets/stylesheets/base/sizing.scss b/app/assets/stylesheets/base/sizing.scss new file mode 100644 index 000000000..b62685728 --- /dev/null +++ b/app/assets/stylesheets/base/sizing.scss @@ -0,0 +1,61 @@ +@import '../vars/variables'; + +// Width +@include generate-classes( + 'w', + 'width', + ( + '0': 0, + '25': 25%, + '50': 50%, + '100': 100%, + 'auto': auto, + 'full': 100vw, + ) +); + +// Min width +@include generate-classes( + 'min-w', + 'min-width', + ( + '0': 0, + '100': 100%, + ) +); + +// Height +@include generate-classes( + 'h', + 'height', + ( + '0': 0, + '25': 25%, + '50': 50%, + '100': 100%, + 'auto': auto, + 'full': 100vh, + ) +); + +// Min height +@include generate-classes( + 'min-h', + 'min-height', + ( + '0': 0, + '100': 100%, + 'full': 100vh, + ) +); + +// Max height +@include generate-classes( + 'max-h', + 'max-height', + ( + '0': 0, + '100': 100%, + 'full': 100vh, + ) +); diff --git a/app/assets/stylesheets/base/spacing.scss b/app/assets/stylesheets/base/spacing.scss new file mode 100644 index 000000000..65c31f86b --- /dev/null +++ b/app/assets/stylesheets/base/spacing.scss @@ -0,0 +1,195 @@ +@import '../vars/variables'; + +// Margin +@include generate-classes( + 'm', + 'margin', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin negative +@include generate-classes('-m', 'margin', $negative-spacing-units); + +// Margin top & bottom +@include generate-classes( + 'my', + ('margin-top', 'margin-bottom'), + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin top & bottom negative +@include generate-classes( + '-my', + ('margin-top', 'margin-bottom'), + $negative-spacing-units +); + +// Margin left & right +@include generate-classes( + 'mx', + ('margin-left', 'margin-right'), + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin left & right negative +@include generate-classes( + '-mx', + ('margin-left', 'margin-right'), + $negative-spacing-units +); + +// Margin top +@include generate-classes( + 'mt', + 'margin-top', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin top negative +@include generate-classes('-mt', 'margin-top', $negative-spacing-units); + +// Margin bottom +@include generate-classes( + 'mb', + 'margin-bottom', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin bottom negative +@include generate-classes('-mb', 'margin-bottom', $negative-spacing-units); + +// Margin left +@include generate-classes( + 'ml', + 'margin-left', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin left negative +@include generate-classes('-ml', 'margin-left', $negative-spacing-units); + +// Margin right +@include generate-classes( + 'mr', + 'margin-right', + ( + 'auto': auto, + 'unset': unset, + '0': 0, + ), + $spacing-units +); + +// Margin right negative +@include generate-classes('-mr', 'margin-right', $negative-spacing-units); + +/////////////////// +// Paddings +/////////////////// + +// Padding +@include generate-classes( + 'p', + 'padding', + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); + +// Padding top & bottom +@include generate-classes( + 'py', + ('padding-top', 'padding-bottom'), + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); + +// Padding left & right +@include generate-classes( + 'px', + ('padding-left', 'padding-right'), + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); + +// Padding top +@include generate-classes( + 'pt', + 'padding-top', + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); + +// Padding bottom +@include generate-classes( + 'pb', + 'padding-bottom', + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); + +// Padding left +@include generate-classes( + 'pl', + 'padding-left', + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); + +// Padding right +@include generate-classes( + 'pr', + 'padding-right', + ( + '0': 0, + 'unset': unset, + ), + $spacing-units +); diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss new file mode 100644 index 000000000..813a6a187 --- /dev/null +++ b/app/assets/stylesheets/base/typography.scss @@ -0,0 +1,127 @@ +@import '../vars/variables'; + +// Font family +@include generate-classes( + 'ff', + 'font-family', + ( + 'default': $ff-default, + 'accent': $ff-accent, + ) +); + +// Font size +@include generate-classes( + 'fs', + 'font-size', + ( + 'xs': $fs-xs, + 's': $fs-s, + 'base': $fs-base, + 'l': $fs-l, + 'xl': $fs-xl, + '2xl': $fs-2xl, + '3xl': $fs-3xl, + '4xl': $fs-4xl, + '5xl': $fs-5xl, + ) +); + +// Line height +@include generate-classes( + 'lh', + 'line-height', + ( + 'tight': $lh-tight, + 'base': $lh-base, + ) +); + +// Font weight +@include generate-classes( + 'fw', + 'font-weight', + ( + 'normal': $fw-normal, + 'medium': $fw-medium, + 'bold': $fw-bold, + 'heavy': $fw-heavy, + ) +); + +// List styles +@include generate-classes( + 'list', + 'list-style-type', + ( + 'none': none, + 'disc': disc, + 'decimal': decimal, + ) +); + +// Text decoration +@include generate-classes( + 'text', + 'text-decoration', + ( + 'underline': underline, + 'none': none, + ) +); + +// Text decoration +@include generate-classes( + 'text', + 'text-transform', + ( + 'uppercase': uppercase, + 'lowercase': lowercase, + 'capitalize': capitalize, + 'normal': none, + ) +); + +// Text align +@include generate-classes( + 'align', + 'text-align', + ( + 'left': left, + 'center': center, + 'right': right, + 'justify': justify, + ) +); + +// Vertical alignment +@include generate-classes( + 'align', + 'vertical-align', + ( + 'baseline': baseline, + 'top': top, + 'middle': middle, + 'bottom': bottom, + 'text-top': text-top, + 'text-bottom': text-bottom, + ) +); + +// White space +@include generate-classes( + 'whitespace', + 'white-space', + ( + 'normal': normal, + 'nowrap': nowrap, + 'pre': pre, + ) +); + +// Truncate +.truncate { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} diff --git a/app/assets/stylesheets/components/avatars.scss b/app/assets/stylesheets/components/avatars.scss new file mode 100644 index 000000000..e0748fa2b --- /dev/null +++ b/app/assets/stylesheets/components/avatars.scss @@ -0,0 +1,65 @@ +@import '../vars/variables'; + +// avatar-logo() - Generates styles for Avatars or Logos component +// +// Logos & avatars look almost the same with tiny difference. They're +// supposed to be separate components so for that reason they have +// separate classes. Because of that we have mixing which is meant to +// generate specific styles for both. +// +// @param {string} $name Name of the component, will be included in class name +// @param {number} $radius Value for border-radius +// @param {color} $background Background visible until image loads in. + +@mixin avatar-logo($name, $radius, $background) { + .crayons-#{$name} { + display: inline-block; + border-radius: $radius; + position: relative; + background-color: $background; + width: $su-6; + height: $su-6; + + &__image { + border-radius: $radius; + width: 100%; + height: 100%; + vertical-align: bottom; // todo: do we need it? + } + + &::after { + content: ''; + border: 1px solid rgba($smoke-100, 0.15); + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + border-radius: $radius; + pointer-events: none; + } + + &--l { + width: $su-7; + height: $su-7; + } + + &--xl { + width: $su-8; + height: $su-8; + } + + &--2xl { + width: $su-9; + height: $su-9; + } + + &--3xl { + width: $su-10; + height: $su-10; + } + } +} + +@include avatar-logo('avatar', 100%, $smoke-60); +@include avatar-logo('logo', $br-default, $snowflake); diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss new file mode 100644 index 000000000..40d27d1f4 --- /dev/null +++ b/app/assets/stylesheets/components/buttons.scss @@ -0,0 +1,113 @@ +@import '../vars/variables'; + +// Basic styling +.crayons-btn { + position: relative; + display: inline-block; + padding: 0.5em 1em; + border-radius: $br-default; + outline: none; + font-family: inherit; + font-size: $fs-base; + line-height: $lh-base; + font-weight: $fw-medium; + text-align: center; + text-decoration: none; + cursor: pointer; + transition: all $transition-props; +} + +// Styles +.crayons-btn { + background-color: $dolphin; + color: $snowflake; + + &--disabled, + &[disabled] { + color: rgba($snowflake, 0.8); + background-color: $dolphin-lighter; + } + + &:hover { + background-color: $dolphin-darker; + } + + &--secondary { + background-color: $smoke-20; + color: $smoke-80; + + &--disabled, + &[disabled] { + color: $smoke-40; + background-color: $smoke-10; + } + + &:hover { + color: $smoke-100; + background-color: $smoke-30; + } + } + + &--outlined { + border: 2px solid $smoke-30; + color: $smoke-80; + background-color: transparent; + + &--disabled, + &[disabled] { + color: $smoke-40; + border-color: $smoke-20; + background-color: transparent; + } + + &:hover { + color: $smoke-100; + border-color: $smoke-40; + background-color: transparent; + } + } + + &--danger { + background-color: $raspberry; + + &--disabled, + &[disabled] { + color: rgba($snowflake, 0.8); + background-color: $raspberry-lighter; + } + + &:hover { + background-color: $raspberry-darker; + } + } + + &--text { + background-color: transparent; + color: $dolphin; + + &--disabled, + &[disabled] { + background-color: transparent; + color: $dolphin-lighter; + } + + &:hover { + background-color: transparent; + color: $dolphin-darker; + } + } +} + +// Icon Left +.crayons-btn--icon-left { + padding-left: 0.75em; + + .crayons-icon { + margin-right: 0.5em; + } +} + +// Full width +.crayons-btn--full { + width: 100%; +} diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss new file mode 100644 index 000000000..3bd443f94 --- /dev/null +++ b/app/assets/stylesheets/components/dropdowns.scss @@ -0,0 +1,25 @@ +@import '../vars/variables'; +@import '../base/boxes'; + +%dropdown-style { + @extend .crayons-box; + @extend .crayons-box--level-2; + display: inline-block; +} + +.crayons-dropdown { + @extend %dropdown-style; + padding: $su-4; + min-width: 164px; + max-width: 250px; + + &--l { + min-width: 251px; + max-width: 320px; + padding: $su-6; + } + + &--padding-0 { + padding: 0; + } +} diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss new file mode 100644 index 000000000..1d8800294 --- /dev/null +++ b/app/assets/stylesheets/components/forms.scss @@ -0,0 +1,188 @@ +@import '../vars/variables'; + +%form-styling { + background-color: $smoke-00; + border: 1px solid $smoke-30; + appearance: none; + border-radius: $br-default; + transition: all $transition-props; + + &-hover { + border-color: $smoke-40; + } + + &-disabled { + color: $smoke-60; + background-color: $smoke-10; + } + + &-checked { + background-color: $dolphin; + border-color: $dolphin-darker; + color: $snowflake; + background-position: center center; + background-repeat: no-repeat; + } + + &-checked-disabled { + background-color: $dolphin-lighter; + border-color: $dolphin-lighter; + color: rgba($snowflake, 0.5); + } +} + +// Text inputs and textareas. +.crayons-textfield { + line-height: $lh-base; + padding: 0.5em; + font-family: inherit; + font-size: $fs-base; + width: 100%; + @extend %form-styling; + + &::placeholder { + color: $smoke-60; + } + + &:hover { + @extend %form-styling-hover; + } + + &:focus { + background-color: $snowflake; + border-color: $dolphin; + box-shadow: 1px 1px 0 $dolphin; + } + + &--disabled, + &[disabled] { + @extend %form-styling-disabled; + } + + &::-ms-clear { + display: none; + } + + &--icon { + padding-left: $su-7; + } +} + +// Checkboxes, Radios +.crayons-checkbox, +.crayons-radio { + width: 1.125em; + height: 1.125em; + cursor: pointer; + background-position: center center; + vertical-align: middle; + @extend %form-styling; + + &:hover { + @extend %form-styling-hover; + } + + &--disabled, + &[disabled] { + @extend %form-styling-disabled; + } + + &--checked, + &:checked { + @extend %form-styling-checked; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.157.933a.75.75 0 01.077 1.058L4.817 9.407a.75.75 0 01-1.134 0L.766 6.037a.75.75 0 011.135-.982L4.25 7.77l5.85-6.76a.75.75 0 011.057-.077z' fill='%23fff'/%3E%3C/svg%3E"); + + &--disabled, + &[disabled] { + @extend %form-styling-checked-disabled; + } + } +} + +// Radios +.crayons-radio { + border-radius: 50%; + + &--checked, + &:checked { + @extend %form-styling-checked; + background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E"); + } +} + +/////////////////////////////////////////////////// + +// Full Fields markup +.crayons-field { + display: flex; + flex-flow: column; + font-size: $fs-base; // todo: do we need it? + + $this: &; + + &__label { + color: $smoke-90; + font-weight: $fw-medium; + + + .crayons-field__description { + margin-top: 0; + } + } + + &__description { + color: $smoke-60; + font-size: $fs-s; + font-weight: $fw-normal; // for when it's inside --label + margin: 0; //todo remove + } + + > * + * { + margin-top: $su-2; + } + + &--checkbox, + &--radio { + display: grid; + grid-template-columns: 1.5em 1fr; + grid-gap: $su-2; + border-radius: $br-default; + transition: all $transition-props; + + &:hover { + background: $smoke-10; + box-shadow: 0 0 0 $su-1 $smoke-10; + } + + #{$this}__label { + margin-top: 0; + padding-right: $su-2; // adding this to make hovers look slightly better. + } + } + + .crayons-checkbox, + .crayons-radio { + margin: 0.1875em; // centering checkbox within 1.5em grid cell. + justify-self: center; + } +} + +.crayons-fields { + display: flex; + flex-flow: column; + $this: &; + + &:not(#{$this}--horizontal) { + > .crayons-field + .crayons-field { + margin-top: $su-2; + } + } + + &--horizontal { + flex-flow: row; + flex-wrap: wrap; + + > .crayons-field:not(:last-child) { + margin-right: $su-4; + } + } +} diff --git a/app/assets/stylesheets/components/indicators.scss b/app/assets/stylesheets/components/indicators.scss new file mode 100644 index 000000000..e40cea796 --- /dev/null +++ b/app/assets/stylesheets/components/indicators.scss @@ -0,0 +1,53 @@ +@import '../vars/variables'; + +// indicator() - Generates styles for Indicators +// +// Indicators have bunch of styles combines with bunch of states. To make +// it easier to generate all these classes, we created a help which should +// do the job. +// +// @param {object} $this Cached variable with parent element +// @param {string} $name Value for border-radius +// @param {color} $color-1 Main color. + +@mixin indicator($this, $name, $color-1) { + &#{'--' + $name} { + background-color: $color-1; + color: $snowflake; + &#{$this + '--outlined'} { + background-color: transparent; + color: $color-1; + border-color: $color-1; + } + } +} + +// Basic styling +.crayons-indicator { + font-family: $ff-accent; + font-size: $fs-xs; + padding: $su-1; + background-color: $smoke-20; + text-align: center; + line-height: $lh-tight; + border-radius: $br-default; + display: inline-block; + + &--outlined { + background-color: transparent; + border: 1px solid $smoke-20; + color: $smoke-80; + } + + @include indicator(&, accent, $dolphin); + @include indicator(&, critical, $raspberry); + @include indicator(&, inverted, $smoke-90); + + // Circle, no text + &--bullet { + width: $su-3; + height: $su-3; + padding: 0; + border-radius: 100%; + } +} diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss new file mode 100644 index 000000000..cd86adc9d --- /dev/null +++ b/app/assets/stylesheets/components/modals.scss @@ -0,0 +1,29 @@ +@import '../vars/variables'; +@import '../base/boxes'; + +%modal-style { + @extend .crayons-box; + @extend .crayons-box--level-3; + display: inline-block; + width: 100%; +} + +.crayons-modal { + @extend %modal-style; + padding: $su-7; + max-width: 640px; + + &--s { + max-width: 480px; + padding: $su-6; + } + + &--l { + max-width: 800px; + padding: $su-8; + } + + &--padding-0 { + padding: 0; + } +} diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss new file mode 100644 index 000000000..a9c599bf3 --- /dev/null +++ b/app/assets/stylesheets/components/navigation.scss @@ -0,0 +1,70 @@ +@import '../vars/variables'; + +.crayons-nav-block { + display: flex; + align-items: center; + padding: $su-2; + border-radius: $br-default; + color: $smoke-90; + + &:hover:not(&--current) { + background: $smoke-00; + color: $smoke-100; + } + + &--current { + font-weight: $fw-medium; + color: $smoke-100; + background: $snowflake; + } + + .crayons-icon { + margin-right: $su-2; + vertical-align: middle; + width: $su-6; + height: $su-6; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: $fs-xl; + } + + .crayons-indicator { + margin-left: $su-2; + } + + // Indented for when there's no icon + &--indented { + padding-left: $su-2 + $su-7; // 40px + } +} + +.crayons-tabs { + display: flex; + + &__item { + padding: 0 0.5em; + color: $smoke-80; + position: relative; + display: inline-block; + + &:hover { + color: $smoke-100; + } + + &--current { + color: $smoke-100; + font-weight: $fw-medium; + + &::after { + position: absolute; + left: 0.5em; + right: 0.5em; + bottom: -2px; + height: 2px; + content: ''; + background-color: $dolphin; + } + } + } +} diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss new file mode 100644 index 000000000..78a512c82 --- /dev/null +++ b/app/assets/stylesheets/components/notices.scss @@ -0,0 +1,28 @@ +@import '../vars/variables'; +@import '../base/boxes'; + +%notice-style { + @extend .crayons-box; + @extend .crayons-box--level-1; + padding: $su-4; +} + +.crayons-notice { + @extend %notice-style; + + &--danger { + @extend .crayons-box--danger; + } + + &--warning { + @extend .crayons-box--warning; + } + + &--success { + @extend .crayons-box--success; + } + + &--info { + @extend .crayons-box--info; + } +} diff --git a/app/assets/stylesheets/item-list.scss b/app/assets/stylesheets/item-list.scss index a93fe2bed..5f676c888 100644 --- a/app/assets/stylesheets/item-list.scss +++ b/app/assets/stylesheets/item-list.scss @@ -7,9 +7,6 @@ } .filters { - // width: 300px; - // float: left; - // min-height: 356px; position: relative; input { diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index ae18e8ab6..aa0c20911 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -45,3 +45,26 @@ @import 'email_subscriptions'; @import 'article-form-needed-legacy'; + +// New approach +@import 'base/reset'; +@import 'base/boxes'; +@import 'base/colors'; +@import 'base/decorations'; +@import 'base/flexbox'; +@import 'base/grid'; +@import 'base/icons'; +@import 'base/layout'; +@import 'base/positioning'; +@import 'base/sizing'; +@import 'base/spacing'; +@import 'base/typography'; + +@import 'components/avatars'; +@import 'components/buttons'; +@import 'components/dropdowns'; +@import 'components/forms'; +@import 'components/indicators'; +@import 'components/modals'; +@import 'components/navigation'; +@import 'components/notices'; diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index ac2ad89e0..c2787d3d2 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -1,3 +1,5 @@ +@import 'vars/variables'; + @import 'variables'; @import 'mixins'; @import 'fonts'; @@ -5,8 +7,7 @@ body { @include themeable(background, theme-background, $lightest-gray); @include themeable(color, theme-color, $black); - font-family: $helvetica; - font-size: 18px; + font-family: $ff-default; padding: 0; margin: 0; overflow-y: scroll; @@ -61,6 +62,7 @@ body { overflow: hidden; min-height: 88vh; visibility: visible; + font-size: 18px; } a { diff --git a/app/assets/stylesheets/vars/_colors.scss b/app/assets/stylesheets/vars/_colors.scss new file mode 100644 index 000000000..5429d2c7a --- /dev/null +++ b/app/assets/stylesheets/vars/_colors.scss @@ -0,0 +1,56 @@ +$smoke-100: #08090a; +$smoke-90: #202428; +$smoke-80: #363d44; +$smoke-70: #4d5760; +$smoke-60: #64707d; +$smoke-50: #7d8a97; +$smoke-40: #99a3ad; +$smoke-30: #b5bdc4; +$smoke-20: #d2d6db; +$smoke-10: #eef0f1; +$smoke-00: #f9fafa; + +$snowflake: #fff; + +$dolphin: #3b49df; +$dolphin-darker: #1827ce; +$dolphin-lighter: #8d95f2; + +$avocado: #26d9ca; +$avocado-darker: #1ab3a6; +$avocado-lighter: #79ece2; + +$peanut: #ffcf4c; +$peanut-darker: #f5b400; +$peanut-lighter: #ffe499; + +$raspberry: #dc1818; +$raspberry-darker: #c20a0a; +$raspberry-lighter: #ec5050; + +$colors: ( + 'smoke-100': $smoke-100, + 'smoke-90': $smoke-90, + 'smoke-80': $smoke-80, + 'smoke-70': $smoke-70, + 'smoke-60': $smoke-60, + 'smoke-50': $smoke-50, + 'smoke-40': $smoke-40, + 'smoke-30': $smoke-30, + 'smoke-20': $smoke-20, + 'smoke-10': $smoke-10, + 'smoke-00': $smoke-00, + 'snowflake': $snowflake, + 'dolphin': $dolphin, + 'dolphin-darker': $dolphin-darker, + 'dolphin-lighter': $dolphin-lighter, + 'avocado': $avocado, + 'avocado-darker': $avocado-darker, + 'avocado-lighter': $avocado-lighter, + 'peanut': $peanut, + 'peanut-darker': $peanut-darker, + 'peanut-lighter': $peanut-lighter, + 'raspberry': $raspberry, + 'raspberry-darker': $raspberry-darker, + 'raspberry-lighter': $raspberry-lighter, +); \ No newline at end of file diff --git a/app/assets/stylesheets/vars/_spacing-units.scss b/app/assets/stylesheets/vars/_spacing-units.scss new file mode 100644 index 000000000..6648bfcc3 --- /dev/null +++ b/app/assets/stylesheets/vars/_spacing-units.scss @@ -0,0 +1,36 @@ +$su-1: 0.25rem; // 4px +$su-2: 0.5rem; // 8px +$su-3: 0.75rem; // 12px +$su-4: 1rem; // 16px +$su-5: 1.25rem; // 20px +$su-6: 1.5rem; // 24px +$su-7: 2rem; // 32px +$su-8: 3rem; // 48px +$su-9: 4rem; // 64px +$su-10: 8rem; // 128px + +$spacing-units: ( + '1': $su-1, + '2': $su-2, + '3': $su-3, + '4': $su-4, + '5': $su-5, + '6': $su-6, + '7': $su-7, + '8': $su-8, + '9': $su-9, + '10': $su-10, +); + +$negative-spacing-units: ( + '1': -$su-1, + '2': -$su-2, + '3': -$su-3, + '4': -$su-4, + '5': -$su-5, + '6': -$su-6, + '7': -$su-7, + '8': -$su-8, + '9': -$su-9, + '10': -$su-10, +); \ No newline at end of file diff --git a/app/assets/stylesheets/vars/_typography.scss b/app/assets/stylesheets/vars/_typography.scss new file mode 100644 index 000000000..ad5765de9 --- /dev/null +++ b/app/assets/stylesheets/vars/_typography.scss @@ -0,0 +1,26 @@ +// Font stacks +$ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; +$ff-accent: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, + monospace; + +// Font sizes +$fs-xs: 0.75rem; // 12px +$fs-s: 0.875rem; // 14px +$fs-base: 1rem; // 16px +$fs-l: 1.125rem; // 18px +$fs-xl: 1.25rem; // 20px +$fs-2xl: 1.5rem; // 24px +$fs-3xl: 1.875rem; // 30px +$fs-4xl: 2.25rem; // 36px +$fs-5xl: 3rem; // 48px + +// Line heights +$lh-tight: 1.25; // 20px for 16px font-size +$lh-base: 1.5; // 24px for 16px font-size + +// Font weights +$fw-normal: 400; +$fw-medium: 500; +$fw-bold: 700; +$fw-heavy: 800; diff --git a/app/assets/stylesheets/vars/_utils.scss b/app/assets/stylesheets/vars/_utils.scss new file mode 100644 index 000000000..68596f460 --- /dev/null +++ b/app/assets/stylesheets/vars/_utils.scss @@ -0,0 +1,44 @@ +// Border radius +$br-default: 3px; + +// Break points +$breakpoint-s: 640px; +$breakpoint-m: 768px; +$breakpoint-l: 1024px; +$breakpoint-xl: 1280px; + +// Transitions +$transition-props: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + +// pow() - Raise number to the nth power +// +// @param {number} $base The base number +// @param {number} $exponents The exponent to which to raise $base +@function pow($base, $exponents) { + $raised: 1; + + @for $i from 1 through $exponents { + $raised: $raised * $base; + } + + @return $raised; +} + +// generate-classes() +// +// Generating classes for Tailwind approach. +// +// @param {string} $prefix Prefix for utility class, for example `mr` +// @param {string || list} $properties Defines CSS property(ies) that, for example `margin-right` +// @param {list} $values-1 List of values for which we gonna generate classes +// @param {list} $values-2 Additional list of values, useful when we want to combine two lists. +@mixin generate-classes($prefix, $properties, $values-1, $values-2: ()) { + $values: map-merge($values-1, $values-2); + @each $name, $value in $values { + .#{$prefix}-#{$name} { + @each $property in $properties { + #{$property}: $value !important; + } + } + } +} diff --git a/app/assets/stylesheets/vars/_variables.scss b/app/assets/stylesheets/vars/_variables.scss new file mode 100644 index 000000000..7acce0941 --- /dev/null +++ b/app/assets/stylesheets/vars/_variables.scss @@ -0,0 +1,4 @@ +@import 'utils'; +@import 'colors'; +@import 'spacing-units'; +@import 'typography'; diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index ce7b9d82a..4e5e5f744 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -87,6 +87,12 @@ class PagesController < ApplicationController ) end + def crayons + @page = Page.find_by(slug: "crayons") + render :show if @page + set_surrogate_key_header "crayons_page" + end + private def latest_published_thread(tag_name) diff --git a/app/views/layouts/_styles.html.erb b/app/views/layouts/_styles.html.erb index 4bec39c4d..1f13d648b 100644 --- a/app/views/layouts/_styles.html.erb +++ b/app/views/layouts/_styles.html.erb @@ -7,6 +7,7 @@ <% elsif @story_show %> <% elsif view_class.start_with? "comments" %> <% elsif view_class.include?("registrations") || @new_article_not_logged_in %> <% elsif view_class.include? "classified_listings-" %> <% elsif view_class.include? "credits-" %> <% elsif view_class.include? "videos-index" %> + +
+
+

Main Typography

+

Default font is set to 16px (fs-base). It should be standard in UI. Smaller and bigger font sizes should be used carefully with respect to good visual rythm between elements.

+

XS size should be used as little as possible in edge cases. Even though it’s readable we could consider it not meeting DEV’s standards. So keep it for like “asterisk copy” etc.

+

By default you should be using Regular font weight.

+

Medium should be used to emphasize something but not make it as loud as Bold.

+

Heavy should be used only for bigger title.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+ Line height: 1.5 – .lh-base (default) + Line height: 1.25 – .lh-tight + +

This is a bit longer text title to present line-height difference.

+

This is a bit longer text title to present line-height difference.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.

+
+ + 
<%='
+  
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+
+  
+  
...
 
+  
...
 
+  
...

+  
...

+
+  
+  
 
+  
 
+  '.rstrip %>
+ +
+

Accent typography

+

Its main purpose is to add a bit of flavor to DEV brand but it should never be the main font.

+

Please, do not overuse Accent typography.

+

We strongly encourage to limit number of sizes and weights to what presetned below.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ + 
<%='
+  
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+
+  
+  
...
 
+  
...

+
+  
+  
 
+  
 
+  '.rstrip %>
+
+ +
+
+

Form elements

+
+
+

+ +
+ + 
<%='
+  
+  
+  '.rstrip %>
+ +
+

+ +
+ + 
<%='
+  
+  
+  '.rstrip %>
+ +
+ + + + +
+ + 
<%='
+  
+  
+  
+  
+  '.rstrip %>
+ +
+ + + + +
+ + 
<%='
+  
+  
+  
+  
+  '.rstrip %>
+
+ +
+
+

Field Component

+

Because of accessibility most (ideally all) fields should have label above.

+

Fields can also have optional description - between Label and Field itself.

+

Fields can also have additional optional description, for example characters count.

+
+ +
+ + +

Another description just in case...

+
+ + 
<%='
+  

+    
+    
+    
Another description just in case...

+  

+  '.rstrip %>
+ +
+

Fields with Checkboxes & Radios

+

Labels for checkboxes and radios should be placed next to the form element.

+

Using additional description is optional.

+

It is possible to group checkboxes or radios into logical sections. Section may require having it’s own label (title).

+
+ +
+
+ + +
+
+ + 
<%='
+  

+    
+    
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+
+    ...
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+    
+    ...
+  

+  '.rstrip %>
+ + +
+
+ + +
+
+ + 
<%='
+  

+    
+    
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+
+    ...
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+    
+    ...
+  

+  '.rstrip %>
+
+ +
+
+

Buttons

+

Use Danger style only for destructive actions like removing something. Do not use it for, for example “unfollow” action.

+

If you have to use several buttons together, keep in mind you should always have ONE Primary button. Rest of them should be Secondary and/or Outlined and/or Text buttons.

+

It is ok to use ONLY Secondary or outlined button without being accompanied by Primary one.

+

For Stacking buttons (vertically or horizontally) please use 8px spacing unit for default size buttons (no matter if stacking horizontally or vertically).

+
+
+ Button label

+ Full Button label

+ Secondary Button label

+ Outlined Button label

+ Text Button label

+ Danger Button label

+ Button

+ Button +
+ + 
<%='
+  Button label
+  Full Button label
+  Secondary Button label
+  Outlined Button label
+  Text Button label
+  Danger Button label
+  ...Button
+  ...Button
+  '.rstrip %>
+
+ +
+
+

Boxes

+

“Box” will be a background element used for many other components, for example banners, dropdowns, modals. This component does not have any guidelines in terms of placement or spacing, since it’s supposed to be used to build other components.

+

There are:

+ +

By default use “outlined” type unless you really have to make something stand out - then use “filled”. But double check if it makes sense since “filled” style really steals attention.

+

Use style that makes the most sense for you current use case. It’s pretty obvious when to use Danger, Warning and Success. But for Default and Info - it’s more up to designer to make a good call :).

+

Elevations should define what kind of element it is:

+ +
+ +
+
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+
+ + 
<%='
+  
+  
box, level 0

+
+  <-- levels 0-3 -->
+  
box, level 1

+  
box, level 2

+  
box, level 3

+
+  <-- filled variation -->
+  
filled box, level 0

+
+  <-- styles: danger, success, warning, info -->
+  

+  

+  

+  

+  '.rstrip %>
+
+ +
+
+

Dropdowns

+

Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...

+

Dropdowns should not be bigger than 320px.

+

Dropdown default padding should be dependent on width:

+ +

If you need to utilize entire dropdown area and you have to get rid of default padding, please use modifier class crayons-dropdown--padding-0.

+

FYI: Dropdowns use “Box” component as background, with Level 3 elevation.

+
+ +
+
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ + 
<%='
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  
  
+  '.rstrip %>
+
+ +
+
+

Modals

+

Modals should be positioned centered in relation to entire viewport. So relation to its tirgger doesn’t really matter.

+

There are 3 sizes of modals:

+ +

Use your best judgements when choosing the right size.

+

If you need to utilize entire modal area and you have to get rid of default padding, please use modifier class crayons-modal--padding-0.

+

FYI: Modals use “Box” component as background, with Level 3 elevation.

+
+ +
+
+ Hey, I'm a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a Small Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a Large Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a modal content with no padding! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ + 
<%='
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  
  
+  '.rstrip %>
+
+ +
+
+

Notices

+

Use Notices to focus user on specific piece of content, for example (but not limited to):

+ +

This should be simple message. And this is exactly what this Figma component let you do.

+

By default, this component has 16px padding.

+
+ +
+
This is Default Notice content.

+
This is Default Notice content.

+
This is Warning Notice content.

+
This is Success Notice content.

+
This is Info Notice content.
+
+ + 
<%='
+  
+  
This...

+
+  
+  
This...

+  
This...

+  
This...

+  
This...

+  '.rstrip %>
+
+ +
+
+

Indicators

+

Indicators are meant to be used to inform user about, for example, unread notifications. They supposed to steal user's attention and make him notice or click specific element.

+

We should keep in mind to never show too many indicators at the same time. Use your best judgment.

+

There're two types of indicators:

+ +

And there're four styles to pick from:

+ +
+
+ Label + Outlined + 1 + +
+ +
+ Label + Outlined + 1 + +
+ +
+ Label + Outlined + 1 + +
+ +
+ Label + Outlined + 1 + +
+ + 
<%='
+  Label
+  1
+  
+
+  
+  ...
+  ...
+  ...
+  '.rstrip %>
+
+ +
+
+

Avatars & Logos

+

An image representing a user is called an avatar.

+

An image representing a company or organization is called a logo.

+

To make a distinction between these two different entities we should keep them visually different. For Avatars, we gonna use circle shape. And for Logos we gonna use square shape. This will help recognize what is what in a heartbeat.

+

Each of these will be available in 5 different sizes (use your best judgment in picking right size):

+ +

Remember to use descriptive alt="" values!

+
+
+ " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> +
+ + 
<%='
+  ...
+
+  
+  ...
+  ...
+  ...
+  ...
+  '.rstrip %>
+ +
+ + + + + +
+ + 
<%='
+  
+
+  
+  ...
+  ...
+  ...
+  ...
+  '.rstrip %>
+
+ +
+
+

Navigation: Main nav

+

Used as main nav in left sidebar or dropdowns...

+

Can contain icons.

+
+ +
+ 🏡Home + 📻Podcasts + 🏷Tags + 📑Listings 3 + 👍Code of Conduct + More... +
+ + 
<%='
+  ...
+  ...
+
+  
+  📻...
+  ......
+  
+  
+  ...3
+  
+  
+  More...
+  '.rstrip %>
+
+ +
+
+

Navigation: Tabs

+

Use tabs as 2nd level navigation or filtering options.

+
+ +
+
+ Feed + Popular + Latest +
+
+ + 
<%='
+  

+    Feed
+    Popular
+    Latest
+  

+  '.rstrip %>
+
\ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index afe64cd80..c1b3ae940 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -281,6 +281,7 @@ Rails.application.routes.draw do # You can have the root of your site routed with "root get "/about" => "pages#about" + get "/page/crayons" => "pages#crayons" get "/robots.:format" => "pages#robots" get "/api", to: redirect("https://docs.dev.to/api") get "/privacy" => "pages#privacy"