├── 1.base ├── 1.layers.css └── 2.general.css ├── 2.theming ├── 0.config.css ├── 1.setup.css ├── 2.typesetting.css ├── 3.rhythm.css └── 5.controls │ └── button.css ├── 3.features ├── README.md ├── x-autolineheight.css └── x-superdiv.css ├── 4.regions └── README.md ├── 5.compositions └── README.md ├── 6.components └── README.md ├── README.md ├── e.css └── x.dev ├── x-debug.css └── x-quarantine.css /1.base/1.layers.css: -------------------------------------------------------------------------------- 1 | @layer config, api, base, theming, features, regions, composition, components, utilities, special; 2 | -------------------------------------------------------------------------------- /1.base/2.general.css: -------------------------------------------------------------------------------- 1 | @layer base { 2 | /* Basic generic styles ----------------------- */ 3 | /* Should only contain tag selectors. No classes are accepted. 4 | Must not change from project to project. Versioned. */ 5 | 6 | /* Remove all margins */ 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | /* Force all elements, including controls 13 | * to apply the default fonts. */ 14 | * { 15 | font-family: inherit; 16 | } 17 | 18 | /* Ensure that they are not displayed 19 | * when integrated into content. */ 20 | link, script { 21 | display: none; 22 | } 23 | 24 | /* Anchor decoration is unwanted in nav. */ 25 | nav a { 26 | text-decoration: none; 27 | } 28 | 29 | /* Restrict images to dimensions 30 | * of their parent. Avoid space 31 | * line height (inline vs. block) */ 32 | img { 33 | display: block; 34 | max-width: 100%; 35 | object-fit: cover; 36 | } 37 | 38 | /* Keep dot inside 39 | * of the text column */ 40 | ul, ol { 41 | padding-left: var(--bullet-padding, 1.1em); 42 | } 43 | 44 | /* Better typographic display */ 45 | html { 46 | text-rendering: geometricPrecision; 47 | -webkit-font-smoothing: antialiased; 48 | } 49 | 50 | /* Prevent the spring effect */ 51 | body { 52 | overscroll-behavior-y: none; 53 | } 54 | 55 | 56 | /* Better line heights */ 57 | html { 58 | line-height: 1.4; 59 | } 60 | 61 | h1, h2, h3, h4, h5, h6 { 62 | line-height: 1.1; 63 | } 64 | 65 | /* Better graphic style than the browser's */ 66 | hr { 67 | max-height: 0; 68 | line-height: 0; 69 | border: none; 70 | border-top: 2px solid currentColor; 71 | } 72 | 73 | /* Prepare svg to be manipulated */ 74 | use, svg, path { 75 | fill: inherit; 76 | } 77 | 78 | /* Icons integrated into the text */ 79 | i>svg { 80 | display: inline-block; 81 | height: 1.1ch; 82 | margin-right: var(--icon-spacing, 0.5em); 83 | margin-left: var(--icon-spacing, 0.5em); 84 | } 85 | 86 | /* Emphasis styles */ 87 | p>em { 88 | font-style: italic; 89 | } 90 | 91 | /* Generic maximum & minimum 92 | * widths for any paragraph */ 93 | p { 94 | min-width: var(--p-min-width, 22ch); 95 | max-width: var(--p-max-width, 75ch); 96 | } 97 | 98 | /* Disable delay on iOS 99 | * when tapping on an element */ 100 | @media (hover:none) { 101 | html { 102 | touch-action: manipulation; 103 | } 104 | } 105 | 106 | } 107 | -------------------------------------------------------------------------------- /2.theming/0.config.css: -------------------------------------------------------------------------------- 1 | @layer theming { 2 | /* Master configuration ----------------------- */ 3 | /* Library of values and design tokens 4 | * To ensure minimal weight in the browser, 5 | * only the values used are declared. 6 | * Refer to the bottom of this file for the full list. */ 7 | html { 8 | /* Palette colors */ 9 | --rgbPink: 255, 214, 231; 10 | --rgbYellow: 246, 229, 197; 11 | --rgbBlue: 10, 12, 91; 12 | --Pink: rgb(var(--rgbPink)); 13 | --Yellow: rgb(var(--rgbYellow)); 14 | --Blue: rgb(var(--rgbBlue)); 15 | 16 | /* Logical colors */ 17 | --Color: var(--Blue); 18 | --ColorSupport: var(--Pink); 19 | --ColorAccent:; 20 | --ColorBg: var(--Yellow); 21 | --rgbColor: var(--rgbBlue); 22 | --rgbColorSupport: var(--rgbPink); 23 | --rgbColorAccent:; 24 | --rgbColorBg: var(--rgbYellow); 25 | 26 | 27 | /* Fluid Typography */ 28 | --MinFontSize: 16px; 29 | --TargetFontSize: 1.2dvw; 30 | --MaxFontSize: 19px; 31 | 32 | --BodyWidth: auto; 33 | 34 | /* Row-based spacing scale */ 35 | --RowFactor: 1.56125; 36 | --RowUnit: 1rem; 37 | --Row: calc(var(--RowFactor) * var(--RowUnit)); 38 | 39 | --SpacingPico: 0.1rem; 40 | --SpacingNano: 0.3rem; 41 | --SpacingMicro: 0.5rem; 42 | /*--- */ 43 | --SpacingThinnest: calc(var(--Row) * 0.25); 44 | --SpacingThinner: calc(var(--Row) * 0.50); 45 | --SpacingThin: calc(var(--Row) * 0.75); 46 | --SpacingRow: var(--Row); 47 | --SpacingBroad: calc(var(--Row) * 1.25); 48 | --SpacingBroader: calc(var(--Row) * 1.5); 49 | --SpacingBroadest: calc(var(--Row) * 2); 50 | --SpacingLarge: calc(var(--Row) * 4); 51 | --SpacingLarger: calc(var(--Row) * 7); 52 | --SpacingLargest: calc(var(--Row) * 10); 53 | /*--- */ 54 | --SpacingMega: 24rem; 55 | --SpacingGiga: 54rem; 56 | --SpacingTera: 78rem; 57 | 58 | 59 | 60 | /* Music-based typographic scale */ 61 | --MajorSecond: 1.125; 62 | --MinorThird: 1.200; 63 | --MajorThird: 1.250; 64 | --PerfectFourth: 1.333; 65 | --AugmentedFourth: 1.414; 66 | 67 | /* Base value for scale level calculations */ 68 | /* !NOTE: Keep without unit if using the ECSS scale system. */ 69 | --Base: 1; 70 | 71 | --Shorter: calc(var(--Short) / var(--Scale, 1)); 72 | --Short: calc(var(--Base, 1) / var(--Scale, 1)); 73 | --Tall: calc(var(--Base, 1) * var(--Scale, 1)); 74 | --Taller: calc(var(--Tall) * var(--Scale, 1)); 75 | --Tallest: calc(var(--Taller) * var(--Scale, 1)); 76 | --Huge: calc(var(--Tallest) * var(--Scale, 1)); 77 | --Huger: calc(var(--Huge) * var(--Scale, 1)); 78 | --Hugest: calc(var(--Huger) * var(--Scale, 1)); 79 | 80 | /* Easings */ 81 | --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 82 | --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); 83 | --ease-bounce-light: cubic-bezier(0, 1.1, 1, 1.1); 84 | } 85 | } 86 | 87 | /* Typographic scales (musical harmonies) ----------------------- */ 88 | /* --MajorSecond: 1.125; */ 89 | /* --MajorThird: 1.250; */ 90 | /* --PerfectFourth: 1.333; */ 91 | /* --AugmentedFourth: 1.414; */ 92 | /* --MinorThird: 1.200; */ 93 | /* --MinorSecond: 1.067; */ 94 | /* --PerfectFifth: 1.500; */ 95 | /* --GoldenRatio: 1.618; */ 96 | 97 | /* Levels of the typographic scale ----------------------- */ 98 | /* --Miniature: calc(var(--Shortest) / var(--Scale, 1)); */ 99 | /* --Shortest: calc(var(--Short) / var(--Scale, 1)); */ 100 | /* --Short: calc(var(--Base, 1) / var(--Scale, 1)); */ 101 | /* --Base: 1; */ 102 | /* --Tall: calc(var(--Base, 1) * var(--Scale, 1)); */ 103 | /* --Taller: calc(var(--Tall) * var(--Scale, 1)); */ 104 | /* --Tallest: calc(var(--Taller) * var(--Scale, 1)); */ 105 | /* --Huge: calc(var(--Tallest) * var(--Scale, 1)); */ 106 | /* --Huger: calc(var(--Huge) * var(--Scale, 1)); */ 107 | /* --Hugest: calc(var(--Huger) * var(--Scale, 1)); */ 108 | 109 | /* Easing functions ----------------------- */ 110 | /* --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); */ 111 | /* --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); */ 112 | /* --ease-bounce-light: cubic-bezier(0, 1.1, 1, 1.1); */ 113 | /* --ease-in-out-back: cubic-bezier(0.68, -0.25, 0.265, 1.25); */ 114 | /* --ease-linear: cubic-bezier(0, 0, 1, 1); */ 115 | /* --ease-in: cubic-bezier(0.42, 0, 1, 1); */ 116 | /* --ease-out: cubic-bezier(0, 0, 0.58, 1); */ 117 | /* --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); */ 118 | /* --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); */ 119 | /* --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); */ 120 | /* --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); */ 121 | /* --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); */ 122 | /* --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045); */ 123 | /* --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); */ 124 | /* --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); */ 125 | /* --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); */ 126 | /* --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); */ 127 | /* --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); */ 128 | /* --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); */ 129 | /* --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); */ 130 | /* --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); */ 131 | /* --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); */ 132 | /* --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); */ 133 | /* --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); */ 134 | /* --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); */ 135 | /* --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); */ 136 | /* --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); */ 137 | /* --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); */ 138 | /* --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); */ 139 | 140 | -------------------------------------------------------------------------------- /2.theming/1.setup.css: -------------------------------------------------------------------------------- 1 | @layer theming { 2 | /* Initial system rules ----------------------- */ 3 | 4 | /* Apply basic typographic styles */ 5 | html { 6 | color: var(--Color, initial); 7 | font-weight: var(--FontWeight, inherit); 8 | font-size: var(--FontSize, clamp(var(--MinFontSize, 15px), var(--TargetFontSize, 1.2vw), var(--MaxFontSize, 18px))); 9 | line-height: var(--RowFactor, 1.67125); 10 | } 11 | 12 | /* Page canvas */ 13 | body { 14 | max-width: var(--MaxBodyWidth, initial); 15 | } 16 | 17 | /* Basic typographic sizes, colors & spacing */ 18 | *::before, *::after, 19 | select, input, textarea, button, legend, figcaption, 20 | p, ul, ol, a, q, cite, span, small, th, td, 21 | h1, h2, h3, h4, h5, h6 { 22 | --FontSize: calc(var(--ScaleLevel, 1) * 1em); 23 | } 24 | 25 | select, input, textarea, button, legend, figcaption, 26 | p, ul, ol, a, q, cite, span, small, th, td, 27 | h1, h2, h3, h4, h5, h6 { 28 | color: var(--Color, inherit); 29 | font-weight: var(--FontWeight, inherit); 30 | font-size: var(--FontSize, inherit); 31 | font-style: var(--FontStyle, inherit); 32 | line-height: var(--LineHeight, inherit); 33 | } 34 | 35 | strong, b { 36 | font-weight: var(--FontWeight, 600); 37 | } 38 | 39 | 40 | /* Inheritance in place for child “inline” elements */ 41 | legend *, figcaption *, button *, p *, ul *, ol *, a *, q *, cite *, span *, small *, th *, td *, 42 | h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { 43 | font-size: inherit; 44 | font-style: inherit; 45 | line-height: inherit; 46 | } 47 | 48 | /* Allow icons to receive context color */ 49 | i { 50 | fill: currentColor; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /2.theming/2.typesetting.css: -------------------------------------------------------------------------------- 1 | @layer theming { 2 | /* Typography based on system fonts ----------------------- */ 3 | html { font-family: var(--BaseFontStack, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"); } 4 | 5 | /* Adaptation of the typography ----------------------- */ 6 | @media (max-width: 60em) { :root { --Scale: var(--MajorSecond); } } 7 | @media (min-width: 60em) { :root { --Scale: var(--MinorThird); } } 8 | 9 | 10 | /* Typographic scale ----------------------- */ 11 | h1, .h1 { --ScaleLevel: var(--Huger); --LineHeightFactor: .8125;} 12 | h2, .h2 { --ScaleLevel: var(--Huge); } 13 | h3, .h3 { --ScaleLevel: var(--Tall); } 14 | h4, .h4 { --ScaleLevel: var(--Short); } 15 | h5, .h5 { --ScaleLevel: var(--Short); --LineHeightFactor: .75; } 16 | h6, .h6 { --ScaleLevel: var(--Shorter); --LineHeightFactor: .75; } 17 | 18 | h1, h2, h3, h4, h5, h6, 19 | .h1, .h2, .h3, .h4, .h5, .h6 { 20 | --FontWeight: 800; 21 | } 22 | 23 | strong { 24 | --FontWeight: 600; 25 | } 26 | 27 | small { 28 | font-size: .75em; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /2.theming/3.rhythm.css: -------------------------------------------------------------------------------- 1 | @layer theming { 2 | /* Content rhythm ----------------------- */ 3 | /* stylelint-disable-next-line -- exception for visually-hidden */ 4 | :not(:where(html, body, nav, div, label, ul, ol, li, p, a, span))>:not(:where(link, script, .as-visually-hidden))~* { 5 | margin-top: var(--SpacingRow); 6 | } 7 | 8 | :is(h1, h2, h3, h4, h5, h6)+:is(h1, h2, h3, h4, h5, h6) { 9 | margin-top: var(--SpacingThinner); 10 | } 11 | 12 | :is(h4, h5, h6)+:is(p, ul, ol) { 13 | margin-top: var(--SpacingThinnest); 14 | } 15 | 16 | p+p { 17 | margin-top: var(--SpacingThinner); 18 | } 19 | 20 | *+li { 21 | margin-top: var(--SpacingThinnest); 22 | } 23 | 24 | i+* { 25 | margin-left: var(--SpacingThinnest); 26 | } 27 | 28 | :is(h3, h4)+* { 29 | margin-top: var(--SpacingThinner); 30 | } 31 | 32 | /* *+:is(a, button) */ 33 | 34 | /* *+is(input, select, textarea) */ 35 | 36 | /* Basic container rhythm */ 37 | main>*+* { 38 | margin-top: var(--SpacingLarge); 39 | } 40 | 41 | main>:is(section, div)>*+* { 42 | margin-top: var(--SpacingBroadest); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /2.theming/5.controls/button.css: -------------------------------------------------------------------------------- 1 | button, .button { 2 | -webkit-appearance: none; 3 | appearance: none; 4 | } 5 | 6 | :is(button, .button):focus { 7 | box-shadow: 0px 0px 1px 2px var(--ColorAccent, cyan); 8 | } 9 | -------------------------------------------------------------------------------- /3.features/README.md: -------------------------------------------------------------------------------- 1 | # Features — ECSS Documentation 2 | 3 | - Fundamentally game changing, far reaching and consequential. 4 | - Should be used from the start or not at all. 5 | -------------------------------------------------------------------------------- /3.features/x-autolineheight.css: -------------------------------------------------------------------------------- 1 | @layer features { 2 | /* Automated Line Height System — WARNING! Radioactive */ 3 | /* Processing is expensive. In this sense, it must be optimized as much as possible, 4 | by manually choosing the elements that will be affected by the different calculations. */ 5 | /* Relies on ECSS theme variables */ 6 | 7 | *::after, *::before, p, ul, ol, a, span, small, 8 | h1, h2, h3, h4, h5, h6 { 9 | --alh-threshold_1_5: var(--alh-multiplier) * 0.875; 10 | --alh-threshold_2: var(--alh-multiplier) * 1.25; 11 | --alh-threshold_2_5: var(--alh-multiplier) * 1.5; 12 | --alh-threshold_3: var(--alh-multiplier) * 2; 13 | --alh-multiplier: (var(--ScaleLevel) * 1rem) - var(--Row); 14 | --magic-1_5: clamp(0px, calc((var(--alh-threshold_1_5)) * 9999999), var(--Row)); 15 | --magic-2: clamp(0px, calc((var(--alh-threshold_2)) * 9999999), var(--Row)); 16 | --switch-2: var(--switch-2_5) + var(--is-2_5-rows, 0px); 17 | --switch-1_5: var(--switch-2) + var(--is-2-rows); 18 | --switch-1: var(--switch-1_5) + var(--is-1_5-row); 19 | --is-2-rows: calc(var(--magic-2) - (var(--switch-2))); 20 | --is-1_5-row: calc(var(--magic-1_5) - (var(--switch-1_5))); 21 | --is-1-row: calc(var(--Row) - (var(--switch-1))); 22 | 23 | --alh-line_height: calc(var(--is-1-row, var(--Row)) + (var(--is-1_5-row, 0px) * 1.5) + (var(--is-2-rows, 0px) * 2) + (var(--is-2_5-rows, 0px) * 2.5) + (var(--is-3-rows, 0px) * 3)); 24 | --LineHeight: calc(var(--alh-line_height, 1.5625) * var(--LineHeightFactor, 1)); 25 | } 26 | 27 | h1, h2, h3, p { 28 | --magic-2_5: clamp(0px, calc((var(--alh-threshold_2_5)) * 9999999), var(--Row)); 29 | --magic-3: clamp(0px, calc((var( --alh-threshold_3)) * 9999999), var(--Row)); 30 | --switch-2_5: var(--is-3-rows, 0px); 31 | --is-3-rows: var(--magic-3); 32 | --is-2_5-rows: calc(var(--magic-2_5) - (var(--switch-2_5))); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /3.features/x-superdiv.css: -------------------------------------------------------------------------------- 1 | @layer features { 2 | 3 | /* SuperDIV - Multi-use container ----------------------- */ 4 | /* API */ 5 | @layer config { 6 | div { 7 | --DivDisplay: flex; 8 | --DivItemBasis: 0px; 9 | --DivItemGrow: 1; 10 | --DivItemShrink: 1; 11 | --DivItemGutter: var(--SpacingRow); 12 | --DivItemMaxWidth: initial; 13 | } 14 | } 15 | 16 | /* Container models ------------ */ 17 | /* Fluid Grid / Albatross ---------- */ 18 | /* Holy Albatross. See Heydon Pickering: 19 | (https://heydonworks.com/article/the-flexbox-holy-albatross/) */ 20 | .grille { 21 | --DivItemBasis: calc((54ch - 100%) * 999); 22 | --DivItemGrow: 1; 23 | /* --DivItemShrink: 0; */ 24 | --DivItemGutter: var(--SpacingRow); 25 | --DivItemMaxWidth: 100%; 26 | } 27 | 28 | /* Prose container ------------- */ 29 | .prose { 30 | --DivMaxWidth: 70ch; 31 | --DivColumnWidth: 30ch; 32 | --DivItemMaxWidthOnly: 45ch; 33 | } 34 | 35 | .prose { 36 | --DivDisplay: block; 37 | max-width: var(--DivMaxWidth); 38 | column-count: 2; 39 | column-gap: var(--SpacingRow); 40 | column-width: var(--DivColumnWidth); 41 | } 42 | 43 | .prose>* { 44 | --DivItemGutter: 0; 45 | --DivItemMaxWidth: 22ch; 46 | } 47 | 48 | .prose>*+* { 49 | margin-top: var(--SpacingThinner); 50 | } 51 | 52 | .prose>*:only-child { 53 | max-width: var(--DivItemMaxWidthOnly); 54 | margin-right: auto; 55 | margin-left: auto; 56 | column-span: all; 57 | } 58 | 59 | /* Scaffolding: properties and default values --------- */ 60 | /* 1. Display & space occupation ---- */ 61 | div { 62 | /* Flex context with 63 | row break for fluidity */ 64 | display: var(--DivDisplay, flex); 65 | flex-wrap: wrap; 66 | gap: var(--DivItemGutter, 0px); 67 | align-items: inherit; 68 | /* Allow inheritance of alignment rules. 69 | Facilitates extension by parents */ 70 | justify-content: inherit; 71 | } 72 | 73 | div>* { 74 | /* Initial dimensions 75 | (can be adjusted!) */ 76 | flex-basis: var(--DivItemBasis, auto); 77 | /* Distribute vacant space 78 | equally among children */ 79 | flex-grow: var(--DivItemGrow, 0); 80 | flex-shrink: var(--DivItemShrink, 1); 81 | max-width: var(--DivItemMaxWidth, initial); 82 | } 83 | 84 | /* Break the inheritance chain 85 | to allow successive inclusion */ 86 | div *:not(div)>* { 87 | --DivItemBasis: initial; 88 | --DivItemGrow: initial; 89 | --DivItemShrink: initial; 90 | --DivItemGutter: initial; 91 | --DivItemMaxWidth: initial; 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /4.regions/README.md: -------------------------------------------------------------------------------- 1 | # Regions — ECSS Documentation 2 | 3 | - Unique, high-level elements. 4 | - One file per region. 5 | - Should be selected through ID attribute selectors matching the filename. 6 | - Example files: 7 | - nav.css 8 | - header.css 9 | - footer.css 10 | - body.css 11 | - aside.css 12 | - main.css 13 | - ... 14 | -------------------------------------------------------------------------------- /5.compositions/README.md: -------------------------------------------------------------------------------- 1 | # Compositions — ECSS Documentation 2 | 3 | - Should select only unique region items and their generic children. 4 | - Layout-related properties only. 5 | - Tied to HTML structure. 6 | -------------------------------------------------------------------------------- /6.components/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/efficientcss/scaffolding/86ce80c84b4f35cc5e758cdae8b16aad7b208747/6.components/README.md -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Scaffolding — ECSS Documentation 2 | 3 | Work in progress. More coming soon. 4 | -------------------------------------------------------------------------------- /e.css: -------------------------------------------------------------------------------- 1 | /* MASTER SETUP */ 2 | /* Comment out, delete & add imports 3 | to tailor your ECSS stylesystem. */ 4 | 5 | 6 | /* Base rules ---------------------------------------- */ 7 | 8 | @import url("1.base/2.general.css"); 9 | 10 | 11 | /* Theming ------------------------------------------- */ 12 | 13 | /* Choose between the two following flavors... 14 | or create your own! */ 15 | 16 | /* -- Default ECSS tokens --------------- */ 17 | 18 | @import url("2.theming/0.config.css"); 19 | /* @import url("2.theming/0.default.tokens.css"); */ 20 | 21 | /* ----- Default ECSS theming system -- */ 22 | /* Uses the ECSS tokens above */ 23 | 24 | @import url("2.theming/0.setup.css"); 25 | @import url("2.theming/2.typesetting.css"); 26 | @import url("2.theming/3.rhythm.css"); 27 | 28 | 29 | /* -- Windy ECSS tokens ------------------ */ 30 | 31 | /* @import url("2.theming/0.windy.tokens.css"); */ 32 | 33 | /* Theme-related general rules ----------- */ 34 | 35 | @import url("2.theming/5.controls/button.css"); 36 | /* @import url("2.theming/5.controls/input.css"); */ 37 | /* @import url("2.theming/6.interactive/1.transitions.css"); */ 38 | /* @import url("2.theming/6.interactive/2.animations.css"); */ 39 | 40 | /* ECSS special features ----------------------------- */ 41 | /* See the files for documentation */ 42 | 43 | @import url("3.features/x-autolineheight.css"); 44 | @import url("3.features/x-superdiv.css"); 45 | 46 | /* General utilities ---------------------------------- */ 47 | /* Prefixed by usage. See ECSS documentation 48 | at https://ecss.info for details */ 49 | 50 | @import url("7.utilities/1.as-forms/build.css"); 51 | /* @import url("7.utilities/2.with-styles/build.css"); */ 52 | /* @import url("7.utilities/3.on-interactions/build.css"); */ 53 | /* @import url("7.utilities/4.is-states/build.css"); */ 54 | /* @import url("7.utilities/5.and-rules/build.css"); */ 55 | /* @import url("7.utilities/6.from-to-patterns/build.css"); */ 56 | 57 | /* Third-party or extrageneous rulesets -------------- */ 58 | @import url("x-special.css"); 59 | @import url("../fonts/hankenGrotesk.css"); 60 | -------------------------------------------------------------------------------- /x.dev/x-debug.css: -------------------------------------------------------------------------------- 1 | /* Development utilities ----------------------- */ 2 | /* Display of master grid guides */ 3 | :root { 4 | --RowColor: #ff000010; 5 | --BaselineColor: #00000030; 6 | } 7 | 8 | body:after { 9 | content: ""; 10 | position: fixed; 11 | z-index: 10000; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | display: block; 17 | max-width: var(--MaxBodyWidth, initial); 18 | margin: inherit; 19 | pointer-events: none; 20 | background-image: 21 | linear-gradient(to right, var(--RowColor) var(--Row), transparent 0), 22 | linear-gradient(to bottom, transparent calc(100% - 1px), var(--BaselineColor) 0); 23 | background-size: 24 | calc(100% / var(--Grid, 12) - var(--Row) / var(--Grid, 12)) 100%, 25 | 100% var(--Row); 26 | } 27 | 28 | /* Display of tag boxes */ 29 | body * { 30 | outline: 1px dashed red; 31 | } 32 | -------------------------------------------------------------------------------- /x.dev/x-quarantine.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/efficientcss/scaffolding/86ce80c84b4f35cc5e758cdae8b16aad7b208747/x.dev/x-quarantine.css --------------------------------------------------------------------------------