- commit
- 70bd45978cf16804275ceedba32e8a6f50476c68
- parent
- 4e25bb62ecf165993ccdd42b13c9f50f740365b5
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2022-05-03 20:17
rm grid module no longer relevant
Diffstat
| M | README.md | 1 | - |
| D | sass/grid.scss | 176 | ------------------------------------------------------------ |
| D | test/grid.js | 77 | ------------------------------------------------------------ |
3 files changed, 0 insertions, 254 deletions
diff --git a/README.md b/README.md
@@ -15,7 +15,6 @@ The following modules are included: 15 15 contrast](https://www.w3.org/TR/WCAG20/#contrast-ratiodef) functions 16 16 - **color** for CIELAB/CIELUV based color functions (with support for 17 17 [HSLuv](http://www.hsluv.org/))18 -1 - **grid** for simple grid mixins19 18 20 19 These modules can be imported individually (color depends on math though). 21 20 Also note that these modules will only define mixins and variables. They will
diff --git a/sass/grid.scss b/sass/grid.scss
@@ -1,176 +0,0 @@1 -1 ////2 -1 /// @group grid3 -1 ///4 -1 /// There are already so many grid systems out there. So why write yet another5 -1 /// one? Why not?6 -1 ///7 -1 /// The math behind grids is extremely simple, so you should be able to come up8 -1 /// with some custom mixins for your project in less than 5 minutes. The9 -1 /// complexity in many frameworks comes from a flexibility that you will10 -1 /// probably not need.11 -1 ///12 -1 /// This module collects all the best practices I found around the topic of13 -1 /// grids. Most importantly, it offers `calc()` based gutters with arbitrary14 -1 /// units. Please, do not feel pressured to use this, but maybe it is15 -1 /// interesting to read.16 -1 ///17 -1 /// Many grid systems offer classes that you can apply directly to your HTML.18 -1 /// This is inflexible and violates against separation of content and19 -1 /// presentation. So they are out.20 -1 ///21 -1 /// There are basically 4 options how to do grids:22 -1 ///23 -1 /// - Inline has the issue that whitespace is significant, so it violates the24 -1 /// separation of content and presentation.25 -1 /// - CSS Grid and Flexbox are expressive enough to be used without the overhead26 -1 /// of a grid system.27 -1 /// - Floats were the implementation of choice for quite some time, but they are28 -1 /// not very robust and prone to rounding errors.29 -1 /// - Isolation is an extension of floats that is much more robust by specifying30 -1 /// the position of each cell independently of the others. This is the method31 -1 /// that is used here.32 -1 ///33 -1 /// Then, there is the topic of gutters. With inline and float, the gutters34 -1 /// influence the position of subsequent cells, so it is quite complex to get35 -1 /// them right. With isolation, this is much simpler and more flexible.36 -1 ///37 -1 /// With this module, you can use gutters of any unit (e.g. em or rem).38 -1 /// However, you also need to define a fallback for browsers that do not39 -1 /// provide `calc()`.40 -1 ///41 -1 /// You can use the `grid-span($width, $position)` mixin or use the atomic42 -1 /// mixins directly. Note that you have to clear the container yourself.43 -1 ///44 -1 /// More high-level functionality (e.g. responsive layouts) can easily be added45 -1 /// on top of this. This module already contains a `grid-same-with()` mixin that46 -1 /// covers some usecases.47 -1 ////48 -149 -1 /// Default configuration.50 -1 ///51 -1 /// Most mixins and functions accept a map that can overwrite these values52 -1 /// locally.53 -1 ///54 -1 /// @prop {number} columns [12] - Total number of columns.55 -1 /// @prop {width} gutter [1rem] - Gutter width.56 -1 /// @prop {width} gutter-fallback [2%] - Gutter width if `calc()` is57 -1 /// not available. Must be a percentage.58 -1 $grid: (59 -1 'columns': 12,60 -1 'gutter': 1rem,61 -1 'gutter-fallback': 2%,62 -1 );63 -164 -1 @function _grid-get($key, $settings: ()) {65 -1 @if map-has-key($settings, $key) {66 -1 @return map-get($settings, $key);67 -1 } @else {68 -1 @return map-get($grid, $key);69 -1 }70 -1 }71 -172 -1 /// Set default value in $grid.73 -1 ///74 -1 /// @param {string} $key75 -1 /// @param {any} $value76 -1 @mixin grid-set($key, $value) {77 -1 @if map-has-key($grid, $key) {78 -1 $grid: map-merge($grid, ($key: $value)) !global;79 -1 } @else {80 -1 @error 'grid setting does not exist: #{$key}';81 -1 }82 -1 }83 -184 -1 @function _grid-width($w, $gutter, $settings) {85 -1 @return (100% + $gutter) * $w - $gutter;86 -1 }87 -188 -1 @function _grid-width-mixed($w, $gutter, $settings) {89 -1 @return calc((100% + #{$gutter}) * #{$w} - #{$gutter});90 -1 }91 -192 -1 @function _grid-position($p, $gutter, $settings) {93 -1 @return (100% + $gutter) * $p;94 -1 }95 -196 -1 @function _grid-position-mixed($p, $gutter, $settings) {97 -1 @return calc((100% + #{$gutter}) * #{$p});98 -1 }99 -1100 -1 /// Atomic width mixin.101 -1 ///102 -1 /// @param {number} $width - Number of columns.103 -1 /// @param {map} $settings [()]104 -1 @mixin grid-width($width, $settings: ()) {105 -1 $columns: _grid-get('columns', $settings);106 -1 $gutter: _grid-get('gutter', $settings);107 -1 $gutter-fallback: _grid-get('gutter-fallback', $settings);108 -1109 -1 $w: $width / $columns;110 -1111 -1 @if unit($gutter) == '%' {112 -1 width: _grid-width($w, $gutter, $settings);113 -1 } @else {114 -1 width: _grid-width($w, $gutter-fallback, $settings);115 -1 width: _grid-width-mixed($w, $gutter, $settings);116 -1 }117 -1 }118 -1119 -1 /// Atomic position mixin.120 -1 ///121 -1 /// @param {number} $position - Number of columns (starting from 0).122 -1 /// @param {map} $settings [()]123 -1 @mixin grid-position($position, $settings: ()) {124 -1 $columns: _grid-get('columns', $settings);125 -1 $gutter: _grid-get('gutter', $settings);126 -1 $gutter-fallback: _grid-get('gutter-fallback', $settings);127 -1128 -1 $p: $position / $columns;129 -1130 -1 @if unit($gutter) == '%' {131 -1 margin-left: _grid-position($p, $gutter, $settings);132 -1 } @else {133 -1 margin-left: _grid-position($p, $gutter-fallback, $settings);134 -1 margin-left: _grid-position-mixed($p, $gutter, $settings);135 -1 }136 -1 }137 -1138 -1 /// Basic cell styling.139 -1 ///140 -1 /// @param {map} $settings [()]141 -1 @mixin grid-cell($settings: ()) {142 -1 float: left;143 -1 margin-right: -100%;144 -1 }145 -1146 -1 /// Shortcut for a cell.147 -1 ///148 -1 /// Note that you need to clear the container yourself.149 -1 ///150 -1 /// @param {number} $width - Number of columns.151 -1 /// @param {number} $position - Number of columns (starting from 0).152 -1 /// @param {map} $settings [()]153 -1 @mixin grid-span($width, $position, $settings: ()) {154 -1 @include grid-cell($settings);155 -1 @include grid-width($width, $settings);156 -1 @include grid-position($position, $settings);157 -1 }158 -1159 -1 /// Layout $n cells per row with equal width.160 -1 ///161 -1 /// @param {number} $n - Number of cells per row.162 -1 /// @param {map} $settings [()]163 -1 @mixin grid-same-width($n, $settings: ()) {164 -1 $columns: _grid-get('columns', $settings);165 -1 $width: $columns / $n;166 -1167 -1 @include grid-cell($settings);168 -1 @include grid-width($width, $settings);169 -1170 -1 @for $i from 1 through $n {171 -1 &:nth-child(#{$n}n+#{$i}) {172 -1 @include grid-position($width * ($i - 1), $settings);173 -1 clear: if($i == 1, both, none);174 -1 }175 -1 }176 -1 }
diff --git a/test/grid.js b/test/grid.js
@@ -1,77 +0,0 @@1 -1 var assert = require('assert');2 -1 var shared = require('./shared');3 -14 -1 describe('grid', function() {5 -1 var renderer = new shared.Renderer('@import "grid";');6 -17 -1 describe('_grid-get', function() {8 -1 it('get value', function() {9 -1 assert.equal(renderer.value('_grid-get(columns)'), '12')10 -1 });11 -1 it('get overwritten value', function() {12 -1 assert.equal(renderer.value('_grid-get(columns, ("columns": 13))'), 13)13 -1 });14 -1 });15 -116 -1 describe('grid-width', function() {17 -1 it('uses calc() for output', function() {18 -1 var call = renderer.block('@include grid-width(1)')19 -1 shared.declares(call, 'width', 'calc((100% + 1rem) * 0.08333 - 1rem)');20 -1 });21 -1 it('provides a fallback', function() {22 -1 var call = renderer.block('@include grid-width(1)')23 -1 shared.declares(call, 'width', '6.5%');24 -1 });25 -1 it('grid-width(2)', function() {26 -1 var call = renderer.block('@include grid-width(2)')27 -1 shared.declares(call, 'width', 'calc((100% + 1rem) * 0.16667 - 1rem)');28 -1 shared.declares(call, 'width', '15%');29 -1 });30 -1 it('uses gutter setting', function() {31 -1 var call = renderer.block('@include grid-width(1, (gutter: 2em))')32 -1 shared.declares(call, 'width', 'calc((100% + 2em) * 0.08333 - 2em)');33 -1 shared.declares(call, 'width', '6.5%');34 -1 });35 -1 it('uses gutter-fallback setting', function() {36 -1 var call = renderer.block('@include grid-width(1, (gutter-fallback: 8%))')37 -1 shared.declares(call, 'width', 'calc((100% + 1rem) * 0.08333 - 1rem)');38 -1 shared.declares(call, 'width', '1%');39 -1 });40 -1 it('uses columns setting', function() {41 -1 var call = renderer.block('@include grid-width(1, (columns: 8))')42 -1 shared.declares(call, 'width', 'calc((100% + 1rem) * 0.125 - 1rem)');43 -1 shared.declares(call, 'width', '10.75%');44 -1 });45 -1 });46 -147 -1 describe('grid-position', function() {48 -1 it('uses calc() for output', function() {49 -1 var call = renderer.block('@include grid-position(1)')50 -1 shared.declares(call, 'margin-left', 'calc((100% + 1rem) * 0.08333)');51 -1 });52 -1 it('provides a fallback', function() {53 -1 var call = renderer.block('@include grid-position(1)')54 -1 shared.declares(call, 'margin-left', '8.5%');55 -1 });56 -1 it('grid-position(2)', function() {57 -1 var call = renderer.block('@include grid-position(2)')58 -1 shared.declares(call, 'margin-left', 'calc((100% + 1rem) * 0.16667)');59 -1 shared.declares(call, 'margin-left', '17%');60 -1 });61 -1 it('uses gutter setting', function() {62 -1 var call = renderer.block('@include grid-position(1, (gutter: 2em))')63 -1 shared.declares(call, 'margin-left', 'calc((100% + 2em) * 0.08333)');64 -1 shared.declares(call, 'margin-left', '8.5%');65 -1 });66 -1 it('uses gutter-fallback setting', function() {67 -1 var call = renderer.block('@include grid-position(1, (gutter-fallback: 8%))')68 -1 shared.declares(call, 'margin-left', 'calc((100% + 1rem) * 0.08333)');69 -1 shared.declares(call, 'margin-left', '9%');70 -1 });71 -1 it('uses columns setting', function() {72 -1 var call = renderer.block('@include grid-position(1, (columns: 8))')73 -1 shared.declares(call, 'margin-left', 'calc((100% + 1rem) * 0.125)');74 -1 shared.declares(call, 'margin-left', '12.75%');75 -1 });76 -1 });77 -1 });