Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

sR Grid

447 views

Published on

Ein Grid-System nicht für gestern,
nicht für morgen — aber perfekt für den Moment.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

sR Grid

  1. 1. sR Grid Ein Grid-System nicht für gestern, nicht für morgen — aber perfekt für den Moment. BORIS KAISER
  2. 2. Boris Kaiser Senior Front End Engineer superReal @boriskaiser
  3. 3. Boris Kaiser Senior Front End Engineer superReal @boriskaiser We’re hiring
  4. 4. INCEPTION
  5. 5. INCEPTION INCEPTION BASICS FEATURES NEXT STEPS
  6. 6. INCEPTION BASICS FEATURES NEXT STEPS
  7. 7. INCEPTION BASICS FEATURES NEXT STEPS
  8. 8. INCEPTION BASICS FEATURES NEXT STEPS
  9. 9. since 1999 INCEPTION BASICS FEATURES NEXT STEPS
  10. 10. since 1999 INCEPTION BASICS FEATURES NEXT STEPS
  11. 11. since 1999 INCEPTION BASICS FEATURES NEXT STEPS
  12. 12. since 1999 ca. 80% Fashion & Lifestyle Bereich INCEPTION BASICS FEATURES NEXT STEPS
  13. 13. INCEPTION BASICS FEATURES NEXT STEPS
  14. 14. INCEPTION BASICS FEATURES NEXT STEPS
  15. 15. Slider Plugin mit vielen Features INCEPTION BASICS FEATURES NEXT STEPS
  16. 16. Slider Plugin mit vielen Features UNIQUE SLIDER INCEPTION BASICS FEATURES NEXT STEPS
  17. 17. Slider Plugin mit vielen Features UNIQUE SLIDER INCEPTION BASICS FEATURES NEXT STEPS
  18. 18. Slider Plugin mit vielen Features Plugin Anpassungen mit projektbezogenen Features INCEPTION BASICS FEATURES NEXT STEPS
  19. 19. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features INCEPTION BASICS FEATURES NEXT STEPS
  20. 20. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features INCEPTION BASICS FEATURES NEXT STEPS
  21. 21. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features Lo rem ipsum dolor sit amet, con setetur sadipscing e INCEPTION BASICS FEATURES NEXT STEPS
  22. 22. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features Lo rem ipsum dolor sit amet, con setetur sadipscing e Lo rem ipsum dolor s INCEPTION BASICS FEATURES NEXT STEPS
  23. 23. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features Lo rem ipsum dolor sit amet, con setetur sadipscing e Lo rem ipsum dolor s Lo rem ipsum dolor sit amet, con setetur sadipsc ing e Lo rem blah we Asd INCEPTION BASICS FEATURES NEXT STEPS
  24. 24. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features Lo rem ipsum dolor sit amet, con setetur sadipscing e Lo rem ipsum dolor s Lo rem ipsum dolor sit amet, con setetur sadipsc ing e Lo rem blah we Asd & ein paar schlank gehaltenen Features INCEPTION BASICS FEATURES NEXT STEPS
  25. 25. Slider Plugin mit vielen Features Globale Plugin Anpassungen mit Bugfixes Plugin Anpassungen mit projektbezogenen Features Lo rem ipsum dolor sit amet, con setetur sadipscing e Lo rem ipsum dolor s ing e Lo rem blah we Asd & ein paar schlank gehaltenen Features INCEPTION BASICS FEATURES NEXT STEPS
  26. 26. INCEPTION BASICS FEATURES NEXT STEPS
  27. 27. TREE-SHAKING KONZEPT INCEPTION BASICS FEATURES NEXT STEPS
  28. 28. TREE-SHAKING KONZEPT // module.js export const sayHello = name => `Hello ${name}!`; export const sayBye = name => `Bye ${name}!`; INCEPTION BASICS FEATURES NEXT STEPS
  29. 29. TREE-SHAKING KONZEPT // module.js export const sayHello = name => `Hello ${name}!`; export const sayBye = name => `Bye ${name}!`; // index.js import { sayHello } from ‘./module’; alert(sayHello('code.talks')); INCEPTION BASICS FEATURES NEXT STEPS
  30. 30. TREE-SHAKING KONZEPT // module.js export const sayHello = name => `Hello ${name}!`; export const sayBye = name => `Bye ${name}!`; // index.js import { sayHello } from ‘./module’; alert(sayHello('code.talks')); // bundle.js const sayHello = name => `Hello ${name}!`; alert(sayHello('code.talks')); INCEPTION BASICS FEATURES NEXT STEPS
  31. 31. TREE-SHAKING KONZEPT INCEPTION BASICS FEATURES NEXT STEPS
  32. 32. // _module.scss @mixin say-hello($name) { &::before { content: 'Hello #{$name}!'; } } @mixin say-bye($name) { &::before { content: 'Bye #{$name}!'; } } TREE-SHAKING KONZEPT INCEPTION BASICS FEATURES NEXT STEPS
  33. 33. // styles.scss @import ‘module'; body { @include say-hello('code.talks'); } // _module.scss @mixin say-hello($name) { &::before { content: 'Hello #{$name}!'; } } @mixin say-bye($name) { &::before { content: 'Bye #{$name}!'; } } TREE-SHAKING KONZEPT INCEPTION BASICS FEATURES NEXT STEPS
  34. 34. // styles.scss @import ‘module'; body { @include say-hello('code.talks'); } // _module.scss @mixin say-hello($name) { &::before { content: 'Hello #{$name}!'; } } @mixin say-bye($name) { &::before { content: 'Bye #{$name}!'; } } /* styles.css */ body::before { content: "Hello code.talks!"; } TREE-SHAKING KONZEPT INCEPTION BASICS FEATURES NEXT STEPS
  35. 35. INCEPTION BASICS FEATURES NEXT STEPS
  36. 36. INCEPTION BASICS FEATURES NEXT STEPS
  37. 37. sR AtomsInternes Projekt INCEPTION BASICS FEATURES NEXT STEPS
  38. 38. sR AtomsInternes Projekt ATOMS MOLECULES ORGANISMS TEMPLATES PAGES INCEPTION BASICS FEATURES NEXT STEPS
  39. 39. sR AtomsInternes Projekt INCEPTION BASICS FEATURES NEXT STEPS
  40. 40. sR AtomsInternes Projekt IST ZUSTAND ANALYSIEREN INCEPTION BASICS FEATURES NEXT STEPS
  41. 41. sR AtomsInternes Projekt IST ZUSTAND ANALYSIEREN ALTERNATIVEN ANSCHAUEN INCEPTION BASICS FEATURES NEXT STEPS
  42. 42. sR AtomsInternes Projekt IST ZUSTAND ANALYSIEREN MIT DEM TEAM SPRECHEN ALTERNATIVEN ANSCHAUEN INCEPTION BASICS FEATURES NEXT STEPS
  43. 43. sR AtomsInternes Projekt IST ZUSTAND ANALYSIEREN MIT DEM TEAM SPRECHEN FEATURES DEFINIEREN ALTERNATIVEN ANSCHAUEN INCEPTION BASICS FEATURES NEXT STEPS
  44. 44. Basis: „csswizardry-grids” von Harry Roberts Lo rem ipsum dolor sit amet, con setetur sadipscing e INCEPTION BASICS FEATURES NEXT STEPS
  45. 45. Basis: „csswizardry-grids” von Harry Roberts Lo rem ipsum dolor sit amet, con setetur sadipscing e Globale Grid Anpassungen mit einfachen Features Lo rem ipsum dolor s INCEPTION BASICS FEATURES NEXT STEPS
  46. 46. Basis: „csswizardry-grids” von Harry Roberts Lo rem ipsum dolor sit amet, con setetur sadipscing e Globale Grid Anpassungen mit einfachen Features Lo rem ipsum dolor s Grid Anpassungen mit projektbezogenen Features Lo rem ipsum dolor sit amet, con setetur sadipsc ing e Lo rem blah we Asd INCEPTION BASICS FEATURES NEXT STEPS
  47. 47. Lo rem psuolsaddor sit asdamet, con setetur nn dadwer sdnisadi ping asdw elitr, sed no numy eirmod tempor invidun INCEPTION BASICS FEATURES NEXT STEPS
  48. 48. display: inline-block; INCEPTION BASICS FEATURES NEXT STEPS
  49. 49. display: inline-block; display: grid; INCEPTION BASICS FEATURES NEXT STEPS
  50. 50. display: inline-block; display: grid; INCEPTION BASICS FEATURES NEXT STEPS
  51. 51. display: inline-block; display: grid; display: flex; INCEPTION BASICS FEATURES NEXT STEPS
  52. 52. display: inline-block; display: grid; display: flex; INCEPTION BASICS FEATURES NEXT STEPS
  53. 53. BASICS INCEPTION BASICS FEATURES NEXT STEPS
  54. 54. // srgrid.scss @mixin srgrid-create-grid() { // ... } // styles.scss @import 'srgrid'; @include srgrid-create-grid(); INCEPTION BASICS FEATURES NEXT STEPS
  55. 55. // srgrid.scss @mixin srgrid-create-grid() { // ... } // styles.scss @import 'srgrid'; @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  56. 56. // srgrid.scss @mixin srgrid-create-grid( $breakpoints ) { // ... } // styles.scss @import 'srgrid'; @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  57. 57. // srgrid.scss @mixin srgrid-create-grid( $breakpoints ) { // ... } // styles.scss @import 'srgrid'; // Breakpoints $breakpoint-s: 480px; $breakpoint-m: 768px; $breakpoint-l: 1024px; $breakpoint-xl: 1280px; @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  58. 58. // srgrid.scss @mixin srgrid-create-grid( $breakpoints ) { // ... } // styles.scss @import 'srgrid'; // Breakpoints $breakpoints: ( s: 480px, m: 768px, l: 1024px, xl: 1280px ); @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  59. 59. BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  60. 60. // srbreakpoints.scss /// Init sR Breakpoints module @mixin srbreakpoints-init( // Breakpoints declaration $breakpoints: ( xs: 0, s: 480, m: 768, l: 1024, xl: 1280 ), // Debug mode $debug: false ) { // ... } SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  61. 61. // srbreakpoints.scss /// Init sR Breakpoints module @mixin srbreakpoints-init( // Breakpoints declaration $breakpoints: ( xs: 0, s: 480, m: 768, l: 1024, xl: 1280 ), // Debug mode $debug: false ) { // ... } SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  62. 62. // srbreakpoints.scss /// Init sR Breakpoints module @mixin srbreakpoints-init( // Breakpoints declaration $breakpoints: ( xs: 0, s: 480, m: 768, l: 1024, xl: 1280 ), // Debug mode $debug: false ) { // ... } SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  63. 63. // srbreakpoints.scss /// Init sR Breakpoints module @mixin srbreakpoints-init( // Breakpoints declaration $breakpoints: ( xs: 0, s: 480, m: 768, l: 1024, xl: 1280 ), // Debug mode $debug: false ) { // ... } // styles.scss @import 'path_to_node_modules_folder/ srbreakpoints/src/styles/srbreakpoints.scss'; @include srbreakpoints-init( // Bootstrap's breakpoints $breakpoints: ( xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 ) ); SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  64. 64. SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  65. 65. // srbreakpoints.scss /// Init sR Breakpoints module @mixin srbreakpoints-init( // Breakpoints declaration $breakpoints: ( xs: 0, s: 480, m: 768, l: 1024, xl: 1280 ), // Debug mode $debug: false ) { // ... } // styles.scss @import 'path_to_node_modules_folder/ srbreakpoints/src/styles/srbreakpoints.scss'; @include srbreakpoints-init( // Bootstrap's breakpoints $breakpoints: ( xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 ) ); SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  66. 66. // srbreakpoints.scss /// Init sR Breakpoints module @mixin srbreakpoints-init( // Breakpoints declaration $breakpoints: ( xs: 0, s: 480, m: 768, l: 1024, xl: 1280 ), // Debug mode $debug: false ) { // ... } // styles.scss @import 'srbreakpoints'; @include srbreakpoints-init( // Bootstrap's breakpoints $breakpoints: ( xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 ) ); SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  67. 67. // styles.scss body { background: red; } SR BREAKPOINTS HELPER MIXINS INCEPTION BASICS FEATURES NEXT STEPS
  68. 68. // srbreakpoints.scss /// Wrap content from a specific breakpoint @mixin srbreakpoints-wrap-content-from( $from-breakpoint-name ) { // ... } // styles.scss body { background: red; } SR BREAKPOINTS HELPER MIXINS INCEPTION BASICS FEATURES NEXT STEPS
  69. 69. // srbreakpoints.scss /// Wrap content from a specific breakpoint @mixin srbreakpoints-wrap-content-from( $from-breakpoint-name ) { // ... } // styles.scss @include srbreakpoints-wrap-content-from(m) { body { background: red; } } SR BREAKPOINTS HELPER MIXINS INCEPTION BASICS FEATURES NEXT STEPS
  70. 70. // srbreakpoints.scss /// Wrap content between two specific breakpoints @mixin srbreakpoints-wrap-content-between( $start-breakpoint-name, $end-breakpoint-name ) { // ... } // styles.scss @include srbreakpoints-wrap-content-between(s, l) { body { background: red; } } SR BREAKPOINTS HELPER MIXINS INCEPTION BASICS FEATURES NEXT STEPS
  71. 71. // srbreakpoints.scss /// Wrap content within a specific breakpoint @mixin srbreakpoints-wrap-content-within( $within-breakpoint-name ) { // ... } // styles.scss @include srbreakpoints-wrap-content-within(xl) { body { background: red; } } SR BREAKPOINTS HELPER MIXINS INCEPTION BASICS FEATURES NEXT STEPS
  72. 72. SR BREAKPOINTS MODULE INCEPTION BASICS FEATURES NEXT STEPS
  73. 73. // srgrid.scss @mixin srgrid-create-grid( $breakpoints ) { // ... } // styles.scss @import 'srgrid'; // Breakpoints $breakpoints: ( xs: 0, s: 480px, m: 768px, l: 1024px, xl: 1280px ); @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  74. 74. // srgrid.scss @mixin srgrid-create-grid( $breakpoints ) { // ... } // styles.scss @import 'srbreakpoints'; @import 'srgrid'; // Init sR Breakpoints module @include srbreakpoints-init(); @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  75. 75. // srgrid.scss @mixin srgrid-create-grid( ) { // ... } // styles.scss @import 'srbreakpoints'; @import 'srgrid'; // Init sR Breakpoints module @include srbreakpoints-init(); @include srgrid-create-grid(); BREAKPOINTS DECLARATION INCEPTION BASICS FEATURES NEXT STEPS
  76. 76. // srgrid.scss @mixin srgrid-create-grid( ) { // ... } // styles.scss // ... @include srgrid-create-grid(); INCEPTION BASICS FEATURES NEXT STEPS
  77. 77. // srgrid.scss @mixin srgrid-create-grid( ) { // ... } // styles.scss // ... @include srgrid-create-grid(); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  78. 78. // srgrid.scss @mixin srgrid-create-grid( // Gutter widths $gutter-widths: ( xs: 5, s: 5, m: 10, l: 15, xl: 20 ) ) { // ... } // styles.scss // ... @include srgrid-create-grid(); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  79. 79. // srgrid.scss @mixin srgrid-create-grid( // Gutter widths $gutter-widths: ( xs: 5, s: 5, m: 10, l: 15, xl: 20 ) ) { // ... } // styles.scss // ... @include srgrid-create-grid( $gutter-widths: ( xs: 10, s: 15, m: 20, l: 25, xl: 30 ) ); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  80. 80. // srgrid.scss @mixin srgrid-create-grid( // Gutter widths $gutter-widths: ( xs: 5, s: 5, m: 10, l: 15, xl: 20 ) ) { // ... } // styles.scss // ... @include srgrid-create-grid( $gutter-widths: 10 ); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  81. 81. // srgrid.scss @mixin srgrid-create-grid( // ... // Column count $column-count: 36 ) { // ... } // styles.scss // ... @include srgrid-create-grid(); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  82. 82. SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  83. 83. SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  84. 84. SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  85. 85. SR GRID METRICS Lo rem psuolsaddor sit asdamet, con setetur nn dadwer sdnisadi ping asdw elitr, INCEPTION BASICS FEATURES NEXT STEPS
  86. 86. // srgrid.scss @mixin srgrid-create-grid( // ... // Column count $column-count: 36 ) { // ... } // styles.scss // ... @include srgrid-create-grid(); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  87. 87. // srgrid.scss @mixin srgrid-create-grid( // ... // Column count $column-count: 36 ) { // ... } // styles.scss // ... @include srgrid-create-grid( $column-count: 12 ); SR GRID METRICS INCEPTION BASICS FEATURES NEXT STEPS
  88. 88. SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  89. 89. <!-- index.html --> <div class=“srgrid"> <div class="srgrid__row srgrid__row_start srgrid__row_middle_l srgrid__row_between srgrid__row_block_2_s_l”> <div class="srgrid__col srgrid__col_8 srgrid__col_20_m srgrid__col_20_xl_only srgrid__col_offset_10_s"> ... </div> <div class="srgrid__col srgrid__col_10 srgrid__col_reorder_1_l srgrid__col_stretch_l"> ... </div> </div> </div> SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  90. 90. <!-- index.html --> <div class=“srgrid"> <div class="srgrid__row srgrid__row_start srgrid__row_middle_l srgrid__row_between srgrid__row_block_2_s_l”> <div class="srgrid__col srgrid__col_8 srgrid__col_20_m srgrid__col_20_xl_only srgrid__col_offset_10_s"> ... </div> <div class="srgrid__col srgrid__col_10 srgrid__col_reorder_1_l srgrid__col_stretch_l"> ... </div> </div> </div> SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  91. 91. INCEPTION BASICS FEATURES NEXT STEPS
  92. 92. <!-- index.html --> <div class=“srgrid"> <div class="srgrid__row srgrid__row_start srgrid__row_middle_l srgrid__row_between srgrid__row_block_2_s_l”> <div class="srgrid__col srgrid__col_8 srgrid__col_20_m srgrid__col_20_xl_only srgrid__col_offset_10_s"> ... </div> <div class="srgrid__col srgrid__col_10 srgrid__col_reorder_1_l srgrid__col_stretch_l"> ... </div> </div> </div> SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  93. 93. <!-- index.html --> <div srgrid> <div srgrid-row="start middle_l between block_2_s_l"> <div srgrid-col="8 20_m 20_xl_only offset_10_s"> ... </div> <div srgrid-col="10 reorder_1_l stretch_l"> ... </div> </div> </div> SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  94. 94. <!-- index.html --> <div srgrid> <div srgrid-row="start middle-l between block-2-s-l"> <div srgrid-col="8 20-m 20-xl-only offset-10-s"> ... </div> <div srgrid-col="10 reorder-1-l stretch-l"> ... </div> </div> </div> SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  95. 95. <!-- index.html --> <div data-srgrid> <div data-srgrid-row="start middle-l between block-2-s-l"> <div data-srgrid-col="8 20-m 20-xl-only offset-10-s"> ... </div> <div data-srgrid-col="10 reorder-1-l stretch-l"> ... </div> </div> </div> SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  96. 96. // srgrid.scss @mixin srgrid-create-grid( // ... // Grid id $grid-id: 'srgrid', // Grid attribute names $grid-attr-name: 'data-#{$grid-id}', $row-attr-name: 'data-#{$grid-id}-row', $column-attr-name: 'data-#{$grid-id}-col' ) { // ... } // styles.scss // ... @include srgrid-create-grid(); SR GRID MARKUP INCEPTION BASICS FEATURES NEXT STEPS
  97. 97. // srgrid.scss @mixin srgrid-create-grid( // ... // Grid id $grid-id: 'srgrid', // Grid attribute names $grid-attr-name: 'data-#{$grid-id}', $row-attr-name: 'data-#{$grid-id}-row', $column-attr-name: 'data-#{$grid-id}-col' ) { // ... } // styles.scss // ... @include srgrid-create-grid(); SR GRID MARKUP <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col></div> <div data-srgrid-col></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  98. 98. // srgrid.scss @mixin srgrid-create-grid( // ... // Grid id $grid-id: 'srgrid', // Grid attribute names $grid-attr-name: 'data-#{$grid-id}', $row-attr-name: 'data-#{$grid-id}-row', $column-attr-name: 'data-#{$grid-id}-col' ) { // ... } // styles.scss // ... @include srgrid-create-grid( $grid-id: 'grid' ); SR GRID MARKUP <!-- index.html --> <div data-grid> <div data-grid-row> <div data-grid-col></div> <div data-grid-col></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  99. 99. // srgrid.scss @mixin srgrid-create-grid( // ... // Grid id $grid-id: 'srgrid', // Grid attribute names $grid-attr-name: 'data-#{$grid-id}', $row-attr-name: 'data-#{$grid-id}-row', $column-attr-name: 'data-#{$grid-id}-col' ) { // ... } // styles.scss // ... @include srgrid-create-grid( $grid-id: 'grid', $grid-attr-name: '#{$grid-id}', $row-attr-name: '#{$grid-id}-row', $column-attr-name: '#{$grid-id}-col' ); SR GRID MARKUP <!-- index.html --> <div grid> <div grid-row> <div grid-col></div> <div grid-col></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  100. 100. FEATURES INCEPTION BASICS FEATURES NEXT STEPS
  101. 101. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS
  102. 102. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  103. 103. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  104. 104. WRAPPER FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  105. 105. WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  106. 106. WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  107. 107. WRAPPER FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  108. 108. WRAPPER FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-wrapper> <!-- wrapper element --> <div data-srgrid-row> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  109. 109. WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  110. 110. WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  111. 111. // srgrid.scss @mixin srgrid-create-grid( // ... // Wrapper feature $wrapper-feature: false, $wrapper-attr-name: 'data-#{$grid-id}-wrapper', $wrapper-max-widths: ( xl: 1200 ) ) { // ... } // styles.scss // ... @include srgrid-create-grid(); WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  112. 112. // srgrid.scss @mixin srgrid-create-grid( // ... // Wrapper feature $wrapper-feature: false, $wrapper-attr-name: 'data-#{$grid-id}-wrapper', $wrapper-max-widths: ( xl: 1200 ) ) { // ... } // styles.scss // ... @include srgrid-create-grid( $wrapper-feature: true ); WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  113. 113. // srgrid.scss @mixin srgrid-create-grid( // ... // Wrapper feature $wrapper-feature: false, $wrapper-attr-name: 'data-#{$grid-id}-wrapper', $wrapper-max-widths: ( xl: 1200 ) ) { // ... } // styles.scss // ... @include srgrid-create-grid( $wrapper-feature: true, $wrapper-max-widths: ( s: 400, l: 1000 ) ); WRAPPER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  114. 114. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  115. 115. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  116. 116. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  117. 117. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  118. 118. SR GRID MODES INCEPTION BASICS FEATURES NEXT STEPS REGULAR RESPONSIVE BETWEEN ONLY
  119. 119. SR GRID MODES INCEPTION BASICS FEATURES NEXT STEPS REGULAR RESPONSIVE BETWEEN ONLY
  120. 120. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  121. 121. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="6"><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  122. 122. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  123. 123. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  124. 124. SR GRID MODES INCEPTION BASICS FEATURES NEXT STEPS REGULAR RESPONSIVE BETWEEN ONLY
  125. 125. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="6"><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  126. 126. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col=“l-6”><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  127. 127. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  128. 128. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  129. 129. SR GRID MODES INCEPTION BASICS FEATURES NEXT STEPS REGULAR RESPONSIVE BETWEEN ONLY
  130. 130. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col=“l-6”><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  131. 131. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col=“m-l-6”><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  132. 132. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  133. 133. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  134. 134. SR GRID MODES INCEPTION BASICS FEATURES NEXT STEPS REGULAR RESPONSIVE BETWEEN ONLY
  135. 135. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col=“m-l-6”><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  136. 136. FLUID FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col=“m-only-6”><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> <div data-srgrid-col><div class="box"></div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  137. 137. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  138. 138. FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  139. 139. // srgrid.scss @mixin srgrid-create-grid( // Only attribute addition $only-attr-addition: 'only', // ... // Fluid feature $fluid-feature: null ) { // ... } // styles.scss // ... @include srgrid-create-grid(); FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  140. 140. // srgrid.scss @mixin srgrid-create-grid( // Only attribute addition $only-attr-addition: 'only', // ... // Fluid feature $fluid-feature: null ) { // ... } // styles.scss // ... @include srgrid-create-grid( $fluid-feature: regular ); FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  141. 141. // srgrid.scss @mixin srgrid-create-grid( // Only attribute addition $only-attr-addition: 'only', // ... // Fluid feature $fluid-feature: null ) { // ... } // styles.scss // ... @include srgrid-create-grid( $fluid-feature: regular between ); FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  142. 142. // srgrid.scss @mixin srgrid-create-grid( // Only attribute addition $only-attr-addition: 'only', // ... // Fluid feature $fluid-feature: null ) { // ... } // styles.scss // ... @include srgrid-create-grid( $fluid-feature: regular responsive between only ); FLUID FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  143. 143. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  144. 144. HIDE FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  145. 145. HIDE FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col data-srgrid-hide="xs-m"><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  146. 146. HIDE FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  147. 147. HIDE FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  148. 148. // srgrid.scss @mixin srgrid-create-grid( // ... // Hide feature $hide-feature: null, $hide-attr-name: 'data-#{$grid-id}-hide' ) { // ... } HIDE FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  149. 149. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  150. 150. OFFSET FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  151. 151. OFFSET FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="m-offset-18"><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  152. 152. OFFSET FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  153. 153. OFFSET FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  154. 154. // srgrid.scss @mixin srgrid-create-grid( // ... // Offset feature $offset-feature: null, $offset-attr-addition: 'offset' ) { // ... } OFFSET FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  155. 155. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  156. 156. DISTRIBUTION FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  157. 157. DISTRIBUTION FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class="box">1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  158. 158. DISTRIBUTION FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  159. 159. DISTRIBUTION FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row="s-only-between l-only-around"> <div data-srgrid-col="10"><div class="box">1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  160. 160. DISTRIBUTION FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  161. 161. DISTRIBUTION FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  162. 162. // srgrid.scss @mixin srgrid-create-grid( // ... // Distribution feature $distribution-feature: null, $distribution-around-attr-addition: 'around', $distribution-between-attr-addition: 'between' ) { // ... } DISTRIBUTION FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  163. 163. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  164. 164. REVERSE FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  165. 165. REVERSE FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row="m-l-reverse"> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  166. 166. REVERSE FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  167. 167. REVERSE FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  168. 168. // srgrid.scss @mixin srgrid-create-grid( // ... // Reverse feature $reverse-feature: null, $reverse-attr-addition: 'reverse' ) { // ... } REVERSE FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  169. 169. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  170. 170. REORDER FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  171. 171. REORDER FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="l-reorder-2"><div class="box">1</div></div> <div data-srgrid-col="l-reorder-3"><div class="box">2</div></div> <div data-srgrid-col="l-reorder-1"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  172. 172. REORDER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  173. 173. REORDER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  174. 174. // srgrid.scss @mixin srgrid-create-grid( // ... // Reorder feature $reorder-feature: null, $reorder-attr-addition: 'reorder' ) { // ... } REORDER FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  175. 175. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  176. 176. ALIGNMENT FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  177. 177. ALIGNMENT FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  178. 178. ALIGNMENT FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  179. 179. ALIGNMENT FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  180. 180. ALIGNMENT FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row=“s-middle l-bottom"> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  181. 181. ALIGNMENT FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  182. 182. ALIGNMENT FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  183. 183. ALIGNMENT FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  184. 184. ALIGNMENT FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row="s-center l-end"> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  185. 185. ALIGNMENT FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  186. 186. ALIGNMENT FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  187. 187. // srgrid.scss @mixin srgrid-create-grid( // ... // Alignment feature $alignment-feature: null, $alignment-start-attr-addition: 'start', $alignment-center-attr-addition: 'center', $alignment-end-attr-addition: 'end', $alignment-top-attr-addition: 'top', $alignment-middle-attr-addition: 'middle', $alignment-bottom-attr-addition: 'bottom', $alignment-stretch-attr-addition: 'stretch' ) { // ... } ALIGNMENT FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  188. 188. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  189. 189. ALIGN COLUMN FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  190. 190. ALIGN COLUMN FEATURE <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box box_large”>1</div></div> <div data-srgrid-col=“10 m-middle"><div class="box">2</div></div> <div data-srgrid-col="10 m-bottom"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  191. 191. ALIGN COLUMN FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  192. 192. ALIGN COLUMN FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  193. 193. // srgrid.scss @mixin srgrid-create-grid( // ... // Align column feature $align-column-feature: null, $align-column-top-attr-addition: 'top', $align-column-middle-attr-addition: 'middle', $align-column-bottom-attr-addition: 'bottom', $align-column-stretch-attr-addition: 'stretch' ) { // ... } ALIGN COLUMN FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  194. 194. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  195. 195. BLOCK FEATURE <!-- index.html --> <div data-srgrid> <div data-grid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  196. 196. BLOCK FEATURE <!-- index.html --> <div data-srgrid> <div data-grid-row=“xs-block-1 m-block-2 l-block-3“> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  197. 197. BLOCK FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  198. 198. BLOCK FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  199. 199. // srgrid.scss @mixin srgrid-create-grid( // ... // Block feature $block-feature: null, $block-attr-addition: 'block' ) { // ... } BLOCK FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  200. 200. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  201. 201. GAPLESS FEATURE <!-- index.html --> <div data-srgrid> <div data-grid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  202. 202. GAPLESS FEATURE <!-- index.html --> <div data-srgrid> <div data-grid-row=“l-gapless"> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  203. 203. GAPLESS FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  204. 204. GAPLESS FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  205. 205. // srgrid.scss @mixin srgrid-create-grid( // ... // Gapless feature $gapless-feature: null, $gapless-attr-addition: 'gapless' ) { // ... } GAPLESS FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  206. 206. SR GRID FEATURES INCEPTION BASICS FEATURES NEXT STEPS WRAPPER FEATURE FLUID FEATURE HIDE FEATURE OFFSET FEATURE DISTRIBUTION FEATURE REVERSE FEATURE REORDER FEATURE ALIGNMENT FEATURE ALIGN COLUMN FEATURE BLOCK FEATURE GAPLESS FEATURE COLUMN FRACTIONS FEATURE
  207. 207. COLUMN FRACTIONS FEATURE <!-- index.html --> <div data-srgrid> <div data-grid-row> <div data-srgrid-col><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  208. 208. COLUMN FRACTIONS FEATURE <!-- index.html --> <div data-srgrid> <div data-grid-row> <div data-srgrid-col=“1-2 l-1-4"><div class="box">1</div></div> <div data-srgrid-col><div class="box">2</div></div> <div data-srgrid-col><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  209. 209. COLUMN FRACTIONS FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  210. 210. COLUMN FRACTIONS FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  211. 211. // srgrid.scss @mixin srgrid-create-grid( // ... // Column fractions feature $column-fractions-feature: null, $column-fractions: (1 2, 1 3, 1 4, 2 3, 3 4) ) { // ... } COLUMN FRACTIONS FEATURE INCEPTION BASICS FEATURES NEXT STEPS
  212. 212. NESTED GRIDS <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  213. 213. NESTED GRIDS INCEPTION BASICS FEATURES NEXT STEPS
  214. 214. NESTED GRIDS <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"><div class=“box”>1</div></div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  215. 215. NESTED GRIDS <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"> </div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  216. 216. NESTED GRIDS <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"> <div data-srgrid> <!-- nested grid --> <div data-srgrid-row> <div data-srgrid-col="10"><div class="box">1.1</div></div> <div data-srgrid-col="10"><div class="box">1.2</div></div> <div data-srgrid-col="10"><div class="box">1.3</div></div> </div> </div> </div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  217. 217. NESTED GRIDS <!-- index.html --> <div data-srgrid> <div data-srgrid-row> <div data-srgrid-col="10"> <div data-srgrid-row> <!-- nested grid --> <div data-srgrid-col="10"><div class="box">1.1</div></div> <div data-srgrid-col="10"><div class="box">1.2</div></div> <div data-srgrid-col="10"><div class="box">1.3</div></div> </div> </div> <div data-srgrid-col="10"><div class="box">2</div></div> <div data-srgrid-col="10"><div class="box">3</div></div> </div> </div> INCEPTION BASICS FEATURES NEXT STEPS
  218. 218. NESTED GRIDS INCEPTION BASICS FEATURES NEXT STEPS
  219. 219. NEXT STEPS INCEPTION BASICS FEATURES NEXT STEPS
  220. 220. OPEN SOURCE INCEPTION BASICS FEATURES NEXT STEPS
  221. 221. OPEN SOURCE INCEPTION BASICS FEATURES NEXT STEPS
  222. 222. OPEN SOURCE INCEPTION BASICS FEATURES NEXT STEPS
  223. 223. OPEN SOURCE INCEPTION BASICS FEATURES NEXT STEPS
  224. 224. OPEN SOURCE INCEPTION BASICS FEATURES NEXT STEPS
  225. 225. MODULE TESTING INCEPTION BASICS FEATURES NEXT STEPS STYLELINT SASS LINTING ESLINT JS LINTING
  226. 226. MODULE TESTING INCEPTION BASICS FEATURES NEXT STEPS STYLELINT SASS LINTING ESLINT JS LINTING TRAVIS CONTINUOUS INTEGRATION
  227. 227. MODULE TESTING INCEPTION BASICS FEATURES NEXT STEPS STYLELINT SASS LINTING ESLINT JS LINTING TRAVIS CONTINUOUS INTEGRATION BACKSTOPJS VISUAL REGRESSION TESTING
  228. 228. MODULE TESTING INCEPTION BASICS FEATURES NEXT STEPS
  229. 229. MODULE TESTING INCEPTION BASICS FEATURES NEXT STEPS
  230. 230. MODULE TESTING INCEPTION BASICS FEATURES NEXT STEPS
  231. 231. NEXT FEATURES INCEPTION BASICS FEATURES NEXT STEPS
  232. 232. NEXT FEATURES INCEPTION BASICS FEATURES NEXT STEPS
  233. 233. NEXT FEATURES INCEPTION BASICS FEATURES NEXT STEPS
  234. 234. HOMEPAGE INCEPTION BASICS FEATURES NEXT STEPS
  235. 235. HOMEPAGE INCEPTION BASICS FEATURES NEXT STEPS
  236. 236. We’re hiring

×