diff --git a/dist/mini-default.css b/dist/mini-default.css index 067266b..a3e13b8 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -13,11 +13,11 @@ --fore-color: #111; --secondary-fore-color: #444; --back-color: #f8f8f8; - --secondary-back-color: #e6e6e6; + --secondary-back-color: #eee; --blockquote-color: #f57c00; --pre-color: #1565c0; - --border-color: #acacac; - --secondary-border-color: #c9c9c9; + --border-color: #aaa; + --secondary-border-color: #ddd; --heading-ratio: 1.19; --universal-margin: 0.5rem; --universal-padding: 0.5rem; @@ -122,7 +122,7 @@ hr { border: 0; line-height: 1.25em; margin: var(--universal-margin); - height: 0.03125rem; + height: 0.0625rem; background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); } @@ -208,7 +208,7 @@ figcaption { } a { - text-decoration: underline; + text-decoration: none; } a:link { diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css index 99a13ca..64ea5c0 100644 --- a/dist/mini-default.min.css +++ b/dist/mini-default.min.css @@ -1 +1 @@ -@charset "UTF-8";blockquote,details{display:block}code,pre{background:var(--secondary-back-color)}blockquote,hr,ol,p,pre,ul{margin:var(--universal-margin)}blockquote,figcaption{color:var(--secondary-fore-color)}:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#e6e6e6;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#acacac;--secondary-border-color:#c9c9c9;--heading-ratio:1.19;--universal-margin:0.5rem;--universal-padding:0.5rem;--universal-border-radius:0.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}*,html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}ol,ul{padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;height:.03125rem;background:linear-gradient(to right,transparent,var(--border-color) 20%,var(--border-color) 80%,transparent)}blockquote{position:relative;font-style:italic;padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius)var(--universal-border-radius)0}code,kbd{border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding)/ 4) calc(var(--universal-padding)/ 2)}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo,Consolas,monospace;font-size:.85em}kbd{background:var(--fore-color);color:var(--back-color)}pre{overflow:auto;padding:calc(1.5 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius)var(--universal-border-radius)0}code,kbd,sub,sup{line-height:0;position:relative;vertical-align:baseline}figcaption,small,sub,sup{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}a,a:focus,a:hover{text-decoration:underline}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)} +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index c193224..564de59 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -61,3 +61,8 @@ - Tweaked the splash screen, looks a bit better now and is easier to read. - Reverted the `hr` fix, as it caused problems. - Moved some of the documentation from the old website to the `/docs/v3` website. + +## 20171024 + +- Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size. +- Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`. diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss index 1098fad..eee5314 100644 --- a/src/flavors/mini-doc.scss +++ b/src/flavors/mini-doc.scss @@ -4,7 +4,7 @@ // Use the old grid for a little bit - TODO: Replace when grid is done -@import '../_v2/mini/grid'; +@import '../mini/grid'; :not(.doc) { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; diff --git a/src/mini/_grid.scss b/src/mini/_grid.scss new file mode 100644 index 0000000..8130f98 --- /dev/null +++ b/src/mini/_grid.scss @@ -0,0 +1,281 @@ +/* + Definitions for the grid system. +*/ +// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers. +$use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`). +$include-parent-layout: true !default; // Flag for rows defining column layouts (`true`/`false`). +$grid-container-name: 'container' !default; // Class name for the grid system container. +$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only). +$grid-row-name: 'row' !default; // Class name for the grid system rows. +$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents. +$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns. +$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets. +$grid-column-count: 12 !default; // Number of columns in the grid (integer value only). +$grid-column-padding: 0 4px !default; // Padding for the columns of the grid. +$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority. +$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority. +$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty. +$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid (four-step-grid-only). +$grid-small-breakpoint: 480px !default; // Small screen breakpoint for grid (four-step-grid-only). +$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid. +$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid. +$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid. +$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid. +$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid. +// Fluid grid system container definition. +.#{$grid-container-name} { + margin: 0 auto; + padding: 0 $grid-container-side-padding; +} +// Grid row definition. +.#{$grid-row-name} { + box-sizing: border-box; + display: -webkit-flex; + display: flex; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +// Small screen grid definitions. +@if $include-parent-layout { + // Grid column generic definitions for small screens. + .#{$grid-column-prefix}-#{$grid-small-prefix}, + [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'], + [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'], + .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: $grid-column-padding; + } + // Grid column specific definition for flexible column. + .#{$grid-column-prefix}-#{$grid-small-prefix}, + .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * { + // max-width: 100%; -- TODO: Are we certain we don't need this? + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; + } +} +@else { + // Grid column generic definitions for small screens. + .#{$grid-column-prefix}-#{$grid-small-prefix}, + [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'], + [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] { + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: $grid-column-padding; + } + // Grid column specific definition for flexible column. + .#{$grid-column-prefix}-#{$grid-small-prefix} { + // max-width: 100%; -- TODO: Are we certain we don't need this? + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; + } +} +// Grid column specific definitions for predefined columns. +@for $i from 1 through $grid-column-count { + @if $include-parent-layout { + .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i}, + .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * { + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; + } + } + @else { + .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} { + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; + } + } +} +// Grid column specific definitions for offset columns. +@for $i from 0 through ($grid-column-count - 1) { + .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} { + @if $i == 0 { + margin-left: 0; + } + @else { + margin-left: #{($i * 100% / $grid-column-count)}; + } + } +} +.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} { + -webkit-order: initial; + order: initial; +} +.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} { + -webkit-order: -999; + order: -999; +} +.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} { + -webkit-order: 999; + order: 999; +} +// Medium screen breakpoint. +@media screen and (min-width: #{$grid-medium-breakpoint}){ + @if $include-parent-layout { + // Grid column generic definitions for medium screens. + .#{$grid-column-prefix}-#{$grid-medium-prefix}, + [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'], + [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: $grid-column-padding; + } + // Grid column specific definition for flexible column. + .#{$grid-column-prefix}-#{$grid-medium-prefix}, + .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * { + // max-width: 100%; -- TODO: Are we certain we don't need this? + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; + } + } + @else { + // Grid column generic definitions for medium screens. + .#{$grid-column-prefix}-#{$grid-medium-prefix}, + [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'], + [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: $grid-column-padding; + } + // Grid column specific definition for flexible column. + .#{$grid-column-prefix}-#{$grid-medium-prefix} { + // max-width: 100%; -- TODO: Are we certain we don't need this? + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; + } + } + // Grid column specific definitions for predefined columns. + @for $i from 1 through $grid-column-count { + @if $include-parent-layout { + .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i}, + .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * { + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; + } + } + @else { + .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} { + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; + } + } + } + // Grid column specific definitions for offset columns. + @for $i from 0 through ($grid-column-count - 1) { + .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-#{$i} { + @if $i == 0 { + margin-left: 0; + } + @else { + margin-left: #{($i * 100% / $grid-column-count)}; + } + } + } + .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} { + -webkit-order: initial; + order: initial; + } + .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} { + -webkit-order: -999; + order: -999; + } + .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} { + -webkit-order: 999; + order: 999; + } +} +// Large screen breakpoint. +@media screen and (min-width: #{$grid-large-breakpoint}){ + @if $include-parent-layout { + // Grid column generic definitions for large screens. + .#{$grid-column-prefix}-#{$grid-large-prefix}, + [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'], + [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'], + .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: $grid-column-padding; + } + // Grid column specific definition for flexible column. + .#{$grid-column-prefix}-#{$grid-large-prefix}, + .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * { + // max-width: 100%; -- TODO: Are we certain we don't need this? + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; + } + } + @else { + // Grid column generic definitions for large screens. + .#{$grid-column-prefix}-#{$grid-large-prefix}, + [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'], + [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; + padding: $grid-column-padding; + } + // Grid column specific definition for flexible column. + .#{$grid-column-prefix}-#{$grid-large-prefix} { + // max-width: 100%; -- TODO: Are we certain we don't need this? + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + flex-basis: 0; + } + } + // Grid column specific definitions for predefined columns. + @for $i from 1 through $grid-column-count { + @if $include-parent-layout { + .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i}, + .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * { + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; + } + } + @else { + .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} { + -webkit-flex-basis: #{($i * 100% / $grid-column-count)}; + flex-basis: #{($i * 100% / $grid-column-count)}; + } + } + } + // Grid column specific definitions for offset columns. + @for $i from 0 through ($grid-column-count - 1) { + .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-#{$i} { + @if $i == 0 { + margin-left: 0; + } + @else { + margin-left: #{($i * 100% / $grid-column-count)}; + } + } + } + .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} { + -webkit-order: initial; + order: initial; + } + .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} { + -webkit-order: -999; + order: -999; + } + .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} { + -webkit-order: 999; + order: 999; + } +}