Source: grid.scss

  1. /**
  2. * @namespace Grid
  3. */
  4. @use 'sass:meta';
  5. @use 'sass:string';
  6. @use 'sass:map';
  7. @use 'globals' as *;
  8. @use 'breakpoints';
  9. /**
  10. * @namespace Grid:grid-container
  11. */
  12. /**
  13. * Renders the basic properties of a grid container, which is the bracket element for elements, which are
  14. * to be placed in a grid, thereby making the container, more or less, "the grid itself".
  15. *
  16. * The basic characteristic of this container is the pre-definition of usable grid columns, according to our config.
  17. *
  18. * @memberof Grid:grid-container
  19. * @function
  20. * @name grid-container
  21. * @alias grid-container
  22. *
  23. * @see grid-item
  24. *
  25. * @example
  26. * \@include grid-container();
  27. */
  28. @mixin grid-container(){
  29. display: grid;
  30. grid-auto-flow: row;
  31. grid-template-columns: repeat(map.get($jig---grid-config, 'columns'), 1fr);
  32. @include breakpoints.attributes-for-breakpoints((
  33. 'grid-column-gap' : map.get($jig---grid-config, 'gutters', 'horizontal'),
  34. 'grid-row-gap' : map.get($jig---grid-config, 'gutters', 'vertical')
  35. ));
  36. }
  37. /**
  38. * @namespace Grid:grid-item
  39. */
  40. /**
  41. * Renders the basic properties of a grid item, which is an item inside a grid, being placed according to
  42. * pre-defined columns.
  43. *
  44. * The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are
  45. * several means of definition. Either just giving it a column-based width, aligning it at the end of other,
  46. * already existing items, or defining a specific area it should cover, by explicitly defining a start and end column
  47. * or a combination of both.
  48. *
  49. * Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to
  50. * our concepts.
  51. *
  52. * @memberof Grid:grid-item
  53. * @function
  54. * @name grid-item
  55. * @alias grid-item
  56. *
  57. * @param {?Number} [$span=null] - the width of the item in columns
  58. * @param {?Number} [$start=null] - the horizontal start offset of the item in columns, may be combined with end or span
  59. * @param {?Number} [$end=null] - the horizontal end offset of the item in columns, may be combined with start or span
  60. * @param {?Number} [$row-span=null] - the height of the item in rows
  61. * @param {?Number} [$row-start=null] - the vertical start offset of the item in rows, may be combined with row-end or row-span
  62. * @param {?Number} [$row-end=null] - the vertical end offset of the item in rows, may be combined with row-start or row-span
  63. *
  64. * @see grid-container
  65. * @see grid-item-align
  66. *
  67. * @example
  68. * \@include grid-item(12);
  69. * \@include grid-item(6, 6);
  70. * \@include grid-item(null, 2, 2);
  71. * \@include grid-item(6, null, null, 2);
  72. * \@include grid-item(6, null, null, null, 0, 5);
  73. */
  74. @mixin grid-item(
  75. $span:null,
  76. $start:null,
  77. $end:null,
  78. $row-span:null,
  79. $row-start:null,
  80. $row-end:null
  81. ){
  82. @if ($span == null) and ($start == null) {
  83. grid-column-end: span map.get($jig---grid-config, 'columns');
  84. } @else {
  85. @if $span != null {
  86. grid-column-end: span $span;
  87. }
  88. @if $start != null {
  89. grid-column-start: $start + 1;
  90. }
  91. @if ($end != null) and ($span == null) {
  92. grid-column-end: $end + 1;
  93. }
  94. }
  95. @if ($row-span != null) or ($row-start != null) {
  96. @if $row-span != null {
  97. grid-row-end: span $row-span;
  98. }
  99. @if $row-start != null {
  100. grid-row-start: $row-start + 1;
  101. }
  102. @if ($row-end != null) and ($row-span == null) {
  103. grid-row-end: $row-end + 1;
  104. }
  105. }
  106. }
  107. /**
  108. * @namespace Grid:grid-item-align
  109. */
  110. /**
  111. * Renders properties of a grid item, to define the item's alignment inside the area defined for the item using
  112. * the grid-item mixin. The usage of this only make sense for grid items.
  113. *
  114. * @memberof Grid:grid-item-align
  115. * @function
  116. * @name grid-item-align
  117. * @alias grid-item-align
  118. *
  119. * @param {String} [$horizontal=null] - "left"/"start", "right"/"end", "middle"/"center" or "full"/"stretch"
  120. * @param {String} [$vertical=null] - "top"/"start", "bottom"/"end", "middle"/"center" or "full"/"stretch"
  121. *
  122. * @see grid-item
  123. *
  124. * @example
  125. * \@include grid-item-align('left');
  126. * \@include grid-item-align(center, center);
  127. * \@include grid-item-align(null, 'full');
  128. */
  129. @mixin grid-item-align($horizontal:null, $vertical:null){
  130. @if $horizontal == 'left' {
  131. $horizontal: 'start';
  132. } @else if $horizontal == 'right' {
  133. $horizontal: 'end';
  134. } @else if $horizontal == 'middle' {
  135. $horizontal: 'center';
  136. } @else if $horizontal == 'full' {
  137. $horizontal: 'stretch';
  138. }
  139. @if $vertical == 'top' {
  140. $vertical: 'start';
  141. } @else if $vertical == 'bottom' {
  142. $vertical: 'end';
  143. } @else if $vertical == 'middle' {
  144. $vertical: 'center';
  145. } @else if $vertical == 'full' {
  146. $vertical: 'stretch';
  147. }
  148. @if $horizontal != null {
  149. justify-self: string.unquote($horizontal);
  150. }
  151. @if $vertical != null {
  152. align-self: string.unquote($vertical);
  153. }
  154. }
  155. /**
  156. * @namespace Grid:gutter-value
  157. */
  158. /**
  159. * Returns the value of the defined distance between two columns/rows for a breakpoint.
  160. *
  161. * The main usage for this is, to define a property value based on the current gutter.
  162. * This is why the parameter order may seem flipped, but usually, you'd use this inside a breakpoint
  163. * using auto-breakpoint detection, primarily rather working with the value itself. For other cases:
  164. * Remember, that that you can simply use named parameters.
  165. *
  166. * @memberof Grid:gutter-value
  167. * @function
  168. * @name gutter-value
  169. * @alias gutter-value
  170. *
  171. * @param {String} [$direction='horizontal'] - either "horizontal" or "vertical", determines the gutter direction in the grid
  172. * @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
  173. * @returns {Number} the determined gutter value with applied factor and/or addition
  174. * @throws error if no gutter value could be determined, based on given breakpoint and/or direction
  175. *
  176. * @example
  177. * \@include breakpoint(medium){
  178. * padding-left: gutter-value() * 0.5;
  179. * }
  180. * margin-top: gutter-value($direction:'vertical', $breakpoint:'small');
  181. */
  182. @function gutter-value($direction:'horizontal', $breakpoint:'auto'){
  183. $gutter: map.get($jig---grid-config, 'gutters', $direction);
  184. $res: null;
  185. @if $gutter != null {
  186. @if meta.type-of($gutter) == 'map' {
  187. $res: breakpoints.breakpoint-value($gutter, $breakpoint);
  188. } @else {
  189. $res: $gutter;
  190. }
  191. }
  192. @if $res == null {
  193. @error 'jig:gutter-value | could not resolve gutter, check direction and/or breakpoint';
  194. }
  195. @return $res;
  196. }