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

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

2. Boris Kaiser
Senior Front End Engineer
superReal
@boriskaiser

3. Boris Kaiser
Senior Front End Engineer
superReal
@boriskaiser
We’re hiring

4. INCEPTION

5. INCEPTION
INCEPTION BASICS FEATURES NEXT STEPS

6. INCEPTION BASICS FEATURES NEXT STEPS

7. INCEPTION BASICS FEATURES NEXT STEPS

8. INCEPTION BASICS FEATURES NEXT STEPS

9. since 1999
INCEPTION BASICS FEATURES NEXT STEPS

10. since 1999
INCEPTION BASICS FEATURES NEXT STEPS

11. since 1999
INCEPTION BASICS FEATURES NEXT STEPS

12. since 1999
ca. 80% Fashion & Lifestyle Bereich
INCEPTION BASICS FEATURES NEXT STEPS

13. INCEPTION BASICS FEATURES NEXT STEPS

14. INCEPTION BASICS FEATURES NEXT STEPS

15. Slider Plugin
mit vielen Features
INCEPTION BASICS FEATURES NEXT STEPS

16. Slider Plugin
mit vielen Features
UNIQUE SLIDER
INCEPTION BASICS FEATURES NEXT STEPS

17. Slider Plugin
mit vielen Features
UNIQUE SLIDER
INCEPTION BASICS FEATURES NEXT STEPS

18. Slider Plugin
mit vielen Features
Plugin Anpassungen
mit projektbezogenen Features
INCEPTION BASICS FEATURES NEXT STEPS

19. Slider Plugin
mit vielen Features
Globale
Plugin Anpassungen
mit Bugfixes
Plugin Anpassungen
mit projektbezogenen Features
INCEPTION BASICS FEATURES NEXT STEPS

20. Slider Plugin
mit vielen Features
Globale
Plugin Anpassungen
mit Bugfixes
Plugin Anpassungen
mit projektbezogenen Features
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. 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. 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. INCEPTION BASICS FEATURES NEXT STEPS

27. TREE-SHAKING KONZEPT
INCEPTION BASICS FEATURES NEXT STEPS

28. TREE-SHAKING KONZEPT
// module.js
export const sayHello = name => `Hello ${name}!`;
export const sayBye = name => `Bye ${name}!`;
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. TREE-SHAKING KONZEPT
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. INCEPTION BASICS FEATURES NEXT STEPS

36. INCEPTION BASICS FEATURES NEXT STEPS

37. sR AtomsInternes Projekt
INCEPTION BASICS FEATURES NEXT STEPS

38. sR AtomsInternes Projekt
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
INCEPTION BASICS FEATURES NEXT STEPS

39. sR AtomsInternes Projekt
INCEPTION BASICS FEATURES NEXT STEPS

40. sR AtomsInternes Projekt
IST ZUSTAND
ANALYSIEREN
INCEPTION BASICS FEATURES NEXT STEPS

41. sR AtomsInternes Projekt
IST ZUSTAND
ANALYSIEREN
ALTERNATIVEN
ANSCHAUEN
INCEPTION BASICS FEATURES NEXT STEPS

42. sR AtomsInternes Projekt
IST ZUSTAND
ANALYSIEREN
MIT DEM TEAM
SPRECHEN
ALTERNATIVEN
ANSCHAUEN
INCEPTION BASICS FEATURES NEXT STEPS

43. sR AtomsInternes Projekt
IST ZUSTAND
ANALYSIEREN
MIT DEM TEAM
SPRECHEN
FEATURES
DEFINIEREN
ALTERNATIVEN
ANSCHAUEN
INCEPTION BASICS FEATURES NEXT STEPS

44. Basis: „csswizardry-grids”
von Harry Roberts
Lo rem ipsum
dolor sit amet,
con setetur
sadipscing e
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. display: inline-block;
INCEPTION BASICS FEATURES NEXT STEPS

49. display: inline-block;
display: grid;
INCEPTION BASICS FEATURES NEXT STEPS

50. display: inline-block;
display: grid;
INCEPTION BASICS FEATURES NEXT STEPS

51. display: inline-block;
display: grid;
display: flex;
INCEPTION BASICS FEATURES NEXT STEPS

52. display: inline-block;
display: grid;
display: flex;
INCEPTION BASICS FEATURES NEXT STEPS

53. BASICS
INCEPTION BASICS FEATURES NEXT STEPS

54. // srgrid.scss
@mixin srgrid-create-grid() {
// ...
}
// styles.scss
@import 'srgrid';
@include srgrid-create-grid();
INCEPTION BASICS FEATURES NEXT STEPS

55. // srgrid.scss
@mixin srgrid-create-grid() {
// ...
}
// styles.scss
@import 'srgrid';
@include srgrid-create-grid();
BREAKPOINTS DECLARATION
INCEPTION BASICS FEATURES NEXT STEPS

56. // srgrid.scss
@mixin srgrid-create-grid(
$breakpoints
) {
// ...
}
// styles.scss
@import 'srgrid';
@include srgrid-create-grid();
BREAKPOINTS DECLARATION
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. BREAKPOINTS DECLARATION
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. // 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. SR BREAKPOINTS MODULE
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // styles.scss
body {
background: red;
}
SR BREAKPOINTS HELPER MIXINS
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. // 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. SR BREAKPOINTS MODULE
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. // srgrid.scss
@mixin srgrid-create-grid(
) {
// ...
}
// styles.scss
// ...
@include srgrid-create-grid();
INCEPTION BASICS FEATURES NEXT STEPS

77. // srgrid.scss
@mixin srgrid-create-grid(
) {
// ...
}
// styles.scss
// ...
@include srgrid-create-grid();
SR GRID METRICS
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. // 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. SR GRID METRICS
INCEPTION BASICS FEATURES NEXT STEPS

83. SR GRID METRICS
INCEPTION BASICS FEATURES NEXT STEPS

84. SR GRID METRICS
INCEPTION BASICS FEATURES NEXT STEPS

85. SR GRID METRICS
Lo rem psuolsaddor
sit asdamet, con
setetur nn dadwer
sdnisadi ping asdw
elitr,
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. SR GRID MARKUP
INCEPTION BASICS FEATURES NEXT STEPS

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. <!-- 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. INCEPTION BASICS FEATURES NEXT STEPS

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. <!-- 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. <!-- 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. <!-- 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. // 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. // 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. // 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. // 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. FEATURES
INCEPTION BASICS FEATURES NEXT STEPS

101. SR GRID FEATURES
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. WRAPPER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

106. WRAPPER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. WRAPPER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

110. WRAPPER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. 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. 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. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

117. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

118. SR GRID MODES
INCEPTION BASICS FEATURES NEXT STEPS
REGULAR RESPONSIVE BETWEEN ONLY

119. SR GRID MODES
INCEPTION BASICS FEATURES NEXT STEPS
REGULAR RESPONSIVE BETWEEN ONLY

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. 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. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

123. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

124. SR GRID MODES
INCEPTION BASICS FEATURES NEXT STEPS
REGULAR RESPONSIVE BETWEEN ONLY

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. 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. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

128. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

129. SR GRID MODES
INCEPTION BASICS FEATURES NEXT STEPS
REGULAR RESPONSIVE BETWEEN ONLY

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. 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. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

133. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

134. SR GRID MODES
INCEPTION BASICS FEATURES NEXT STEPS
REGULAR RESPONSIVE BETWEEN ONLY

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. 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. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

138. FLUID FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. // 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. // 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. // 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. 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. 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. 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. HIDE FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

147. HIDE FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. 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. OFFSET FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

153. OFFSET FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

154. // srgrid.scss
@mixin srgrid-create-grid(
// ...
// Offset feature
$offset-feature: null,
$offset-attr-addition: 'offset'
) {
// ...
}
OFFSET FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. DISTRIBUTION FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. DISTRIBUTION FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

161. DISTRIBUTION FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. 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. REVERSE FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

167. REVERSE FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

168. // srgrid.scss
@mixin srgrid-create-grid(
// ...
// Reverse feature
$reverse-feature: null,
$reverse-attr-addition: 'reverse'
) {
// ...
}
REVERSE FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. REORDER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

173. REORDER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

174. // srgrid.scss
@mixin srgrid-create-grid(
// ...
// Reorder feature
$reorder-feature: null,
$reorder-attr-addition: 'reorder'
) {
// ...
}
REORDER FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. ALIGNMENT FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. ALIGNMENT FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

182. ALIGNMENT FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. ALIGNMENT FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

186. ALIGNMENT FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. 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. ALIGN COLUMN FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

192. ALIGN COLUMN FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. 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. BLOCK FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

198. BLOCK FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

199. // srgrid.scss
@mixin srgrid-create-grid(
// ...
// Block feature
$block-feature: null,
$block-attr-addition: 'block'
) {
// ...
}
BLOCK FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. GAPLESS FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

204. GAPLESS FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

205. // srgrid.scss
@mixin srgrid-create-grid(
// ...
// Gapless feature
$gapless-feature: null,
$gapless-attr-addition: 'gapless'
) {
// ...
}
GAPLESS FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. COLUMN FRACTIONS FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

210. COLUMN FRACTIONS FEATURE
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. NESTED GRIDS
INCEPTION BASICS FEATURES NEXT STEPS

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. 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. 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. 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. NESTED GRIDS
INCEPTION BASICS FEATURES NEXT STEPS

219. NEXT STEPS
INCEPTION BASICS FEATURES NEXT STEPS

220. OPEN SOURCE
INCEPTION BASICS FEATURES NEXT STEPS

221. OPEN SOURCE
INCEPTION BASICS FEATURES NEXT STEPS

222. OPEN SOURCE
INCEPTION BASICS FEATURES NEXT STEPS

223. OPEN SOURCE
INCEPTION BASICS FEATURES NEXT STEPS

224. OPEN SOURCE
INCEPTION BASICS FEATURES NEXT STEPS

225. MODULE TESTING
INCEPTION BASICS FEATURES NEXT STEPS
STYLELINT
SASS LINTING
ESLINT
JS LINTING

226. MODULE TESTING
INCEPTION BASICS FEATURES NEXT STEPS
STYLELINT
SASS LINTING
ESLINT
JS LINTING
TRAVIS
CONTINUOUS INTEGRATION

227. MODULE TESTING
INCEPTION BASICS FEATURES NEXT STEPS
STYLELINT
SASS LINTING
ESLINT
JS LINTING
TRAVIS
CONTINUOUS INTEGRATION
BACKSTOPJS
VISUAL REGRESSION TESTING

228. MODULE TESTING
INCEPTION BASICS FEATURES NEXT STEPS

229. MODULE TESTING
INCEPTION BASICS FEATURES NEXT STEPS

230. MODULE TESTING
INCEPTION BASICS FEATURES NEXT STEPS

231. NEXT FEATURES
INCEPTION BASICS FEATURES NEXT STEPS

232. NEXT FEATURES
INCEPTION BASICS FEATURES NEXT STEPS

233. NEXT FEATURES
INCEPTION BASICS FEATURES NEXT STEPS

234. HOMEPAGE
INCEPTION BASICS FEATURES NEXT STEPS

235. HOMEPAGE
INCEPTION BASICS FEATURES NEXT STEPS

237. We’re hiring