Skip to content
This repository was archived by the owner on Jul 18, 2024. It is now read-only.

Commit dfb66dd

Browse files
author
Jen Downs
committed
docs(readme): Moved util functions and mixin info into handlebars template & generated example readme file.
1 parent 52359ea commit dfb66dd

File tree

8 files changed

+288
-73
lines changed

8 files changed

+288
-73
lines changed

‎README.md

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -72,79 +72,6 @@ The config file is where all of your design system specs live. See this [example
7272

7373
The first breakpoint min-width media query is not used to save kilobytes, but we recommend stating it anyways for future artboard-making tools.
7474

75-
## Utility Mixin and Functions
76-
77-
Gridish has several utility SCSS functions and a mixin to help you add sizing to elements and components within your grid by using your own grid configuration.
78-
79-
80-
### Media Query Mixin
81-
You can use the media query mixin to use breakpoints you've defined.
82-
83-
**Example SCSS**
84-
```scss
85-
button {
86-
@include media-query('sm') {
87-
border: 2px solid hotpink;
88-
}
89-
}
90-
```
91-
92-
**Output CSS**
93-
```css
94-
@media screen and (min-width: 20rem) {
95-
button {
96-
border: 2px solid hotpink;
97-
}
98-
}
99-
```
100-
101-
Moreover, can then **combine this mixin with the functions below** to construct media queries that set fluid and fixed sizes based on your grid configuration.
102-
103-
### Get a Fluid Size
104-
Use the `get-fluid-size()` SCSS function to calculate a fluid width based on: (1) a defined breakpoints, and (2) a number of columns to span, relative to the number of available columns for the given breakpoint.
105-
106-
**Example SCSS**
107-
```scss
108-
@media screen and (min-width: 20rem) {
109-
button {
110-
@include media-query('sm') {
111-
max-width: get-fluid-size('sm', 1);
112-
}
113-
}
114-
}
115-
```
116-
117-
**Output CSS**
118-
```css
119-
@media screen and (min-width: 20rem) {
120-
button {
121-
max-width: 25vw;
122-
}
123-
}
124-
```
125-
126-
### Get a Fixed Size
127-
Use the `get-fixed-size()` SCSS function to calculate a fixed size based on a number of fixed nondimensional units multiplied by the base value from the current row height of the grid (`$rowHeight`);
128-
129-
**Example SCSS**
130-
```scss
131-
button {
132-
@include media-query('sm') {
133-
max-width: get-fixed-size(10);
134-
}
135-
}
136-
```
137-
138-
**Output CSS**
139-
```css
140-
@media screen and (min-width: 20rem) {
141-
button {
142-
max-width: 5rem;
143-
}
144-
}
145-
```
146-
147-
14875
## Legacy support
14976

15077
If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css-gridish/yourPrefix-legacy.min.css` and the legacy classes detailed in the `README.md`. With the legacy file and classes, the browsers that do not support the final CSS Grid Legacy spec will fallback to a CSS Flexbox alternative. The CSS Flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.

‎examples/bootstrap/css-gridish/README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,78 @@ We provide the fixed height variables for items that are not direct children of
109109
}
110110
```
111111

112+
## Utility Mixin and Functions
113+
114+
Gridish has several utility SCSS functions and a mixin to help you add sizing to elements and components within your grid by using your own grid configuration.
115+
116+
117+
### Media Query Mixin
118+
You can use the media query mixin to use breakpoints you've defined.
119+
120+
**Example SCSS**
121+
```scss
122+
button {
123+
@include media-query('sm') {
124+
border: 2px solid hotpink;
125+
}
126+
}
127+
```
128+
129+
**Output CSS**
130+
```css
131+
@media screen and (min-width: 20rem) {
132+
button {
133+
border: 2px solid hotpink;
134+
}
135+
}
136+
```
137+
138+
Moreover, can then **combine this mixin with the functions below** to construct media queries that set fluid and fixed sizes based on your grid configuration.
139+
140+
### Get a Fluid Size
141+
Use the `get-fluid-size()` SCSS function to calculate a fluid width based on: (1) a defined breakpoints, and (2) a number of columns to span, relative to the number of available columns for the given breakpoint.
142+
143+
**Example SCSS**
144+
```scss
145+
@media screen and (min-width: 20rem) {
146+
button {
147+
@include media-query('sm') {
148+
max-width: get-fluid-size('sm', 1);
149+
}
150+
}
151+
}
152+
```
153+
154+
**Output CSS**
155+
```css
156+
@media screen and (min-width: 20rem) {
157+
button {
158+
max-width: 25vw;
159+
}
160+
}
161+
```
162+
163+
### Get a Fixed Size
164+
Use the `get-fixed-size()` SCSS function to calculate a fixed size based on a number of fixed nondimensional units multiplied by the base value from the current row height of the grid (`$rowHeight`);
165+
166+
**Example SCSS**
167+
```scss
168+
button {
169+
@include media-query('sm') {
170+
max-width: get-fixed-size(10);
171+
}
172+
}
173+
```
174+
175+
**Output CSS**
176+
```css
177+
@media screen and (min-width: 20rem) {
178+
button {
179+
max-width: 5rem;
180+
}
181+
}
182+
```
183+
112184
## FAQs
113185

114186
### Why does none of the CSS Grid code use `grid-gap` for gutters?

‎examples/bootstrap/css-gridish/bootstrap-grid.sketch

42 Bytes
Binary file not shown.

‎examples/carbon/css-gridish/README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,78 @@ We provide the fixed height variables for items that are not direct children of
109109
}
110110
```
111111

112+
## Utility Mixin and Functions
113+
114+
Gridish has several utility SCSS functions and a mixin to help you add sizing to elements and components within your grid by using your own grid configuration.
115+
116+
117+
### Media Query Mixin
118+
You can use the media query mixin to use breakpoints you've defined.
119+
120+
**Example SCSS**
121+
```scss
122+
button {
123+
@include media-query('sm') {
124+
border: 2px solid hotpink;
125+
}
126+
}
127+
```
128+
129+
**Output CSS**
130+
```css
131+
@media screen and (min-width: 20rem) {
132+
button {
133+
border: 2px solid hotpink;
134+
}
135+
}
136+
```
137+
138+
Moreover, can then **combine this mixin with the functions below** to construct media queries that set fluid and fixed sizes based on your grid configuration.
139+
140+
### Get a Fluid Size
141+
Use the `get-fluid-size()` SCSS function to calculate a fluid width based on: (1) a defined breakpoints, and (2) a number of columns to span, relative to the number of available columns for the given breakpoint.
142+
143+
**Example SCSS**
144+
```scss
145+
@media screen and (min-width: 20rem) {
146+
button {
147+
@include media-query('sm') {
148+
max-width: get-fluid-size('sm', 1);
149+
}
150+
}
151+
}
152+
```
153+
154+
**Output CSS**
155+
```css
156+
@media screen and (min-width: 20rem) {
157+
button {
158+
max-width: 25vw;
159+
}
160+
}
161+
```
162+
163+
### Get a Fixed Size
164+
Use the `get-fixed-size()` SCSS function to calculate a fixed size based on a number of fixed nondimensional units multiplied by the base value from the current row height of the grid (`$rowHeight`);
165+
166+
**Example SCSS**
167+
```scss
168+
button {
169+
@include media-query('sm') {
170+
max-width: get-fixed-size(10);
171+
}
172+
}
173+
```
174+
175+
**Output CSS**
176+
```css
177+
@media screen and (min-width: 20rem) {
178+
button {
179+
max-width: 5rem;
180+
}
181+
}
182+
```
183+
112184
## FAQs
113185

114186
### Why does none of the CSS Grid code use `grid-gap` for gutters?

‎examples/carbon/css-gridish/bx-grid.sketch

35 Bytes
Binary file not shown.

‎examples/material/css-gridish/README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,78 @@ We provide the fixed height variables for items that are not direct children of
113113
}
114114
```
115115

116+
## Utility Mixin and Functions
117+
118+
Gridish has several utility SCSS functions and a mixin to help you add sizing to elements and components within your grid by using your own grid configuration.
119+
120+
121+
### Media Query Mixin
122+
You can use the media query mixin to use breakpoints you've defined.
123+
124+
**Example SCSS**
125+
```scss
126+
button {
127+
@include media-query('sm') {
128+
border: 2px solid hotpink;
129+
}
130+
}
131+
```
132+
133+
**Output CSS**
134+
```css
135+
@media screen and (min-width: 20rem) {
136+
button {
137+
border: 2px solid hotpink;
138+
}
139+
}
140+
```
141+
142+
Moreover, can then **combine this mixin with the functions below** to construct media queries that set fluid and fixed sizes based on your grid configuration.
143+
144+
### Get a Fluid Size
145+
Use the `get-fluid-size()` SCSS function to calculate a fluid width based on: (1) a defined breakpoints, and (2) a number of columns to span, relative to the number of available columns for the given breakpoint.
146+
147+
**Example SCSS**
148+
```scss
149+
@media screen and (min-width: 20rem) {
150+
button {
151+
@include media-query('sm') {
152+
max-width: get-fluid-size('sm', 1);
153+
}
154+
}
155+
}
156+
```
157+
158+
**Output CSS**
159+
```css
160+
@media screen and (min-width: 20rem) {
161+
button {
162+
max-width: 25vw;
163+
}
164+
}
165+
```
166+
167+
### Get a Fixed Size
168+
Use the `get-fixed-size()` SCSS function to calculate a fixed size based on a number of fixed nondimensional units multiplied by the base value from the current row height of the grid (`$rowHeight`);
169+
170+
**Example SCSS**
171+
```scss
172+
button {
173+
@include media-query('sm') {
174+
max-width: get-fixed-size(10);
175+
}
176+
}
177+
```
178+
179+
**Output CSS**
180+
```css
181+
@media screen and (min-width: 20rem) {
182+
button {
183+
max-width: 5rem;
184+
}
185+
}
186+
```
187+
116188
## FAQs
117189

118190
### Why does none of the CSS Grid code use `grid-gap` for gutters?

‎examples/material/css-gridish/material-grid.sketch

34 Bytes
Binary file not shown.

‎src/docs/README.md.hbs

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,78 @@ We provide the fixed height variables for items that are not direct children of
109109
}
110110
```
111111
112+
## Utility Mixin and Functions
113+
114+
Gridish has several utility SCSS functions and a mixin to help you add sizing to elements and components within your grid by using your own grid configuration.
115+
116+
117+
### Media Query Mixin
118+
You can use the media query mixin to use breakpoints you've defined.
119+
120+
**Example SCSS**
121+
```scss
122+
button {
123+
@include media-query('sm') {
124+
border: 2px solid hotpink;
125+
}
126+
}
127+
```
128+
129+
**Output CSS**
130+
```css
131+
@media screen and (min-width: 20rem) {
132+
button {
133+
border: 2px solid hotpink;
134+
}
135+
}
136+
```
137+
138+
Moreover, can then **combine this mixin with the functions below** to construct media queries that set fluid and fixed sizes based on your grid configuration.
139+
140+
### Get a Fluid Size
141+
Use the `get-fluid-size()` SCSS function to calculate a fluid width based on: (1) a defined breakpoints, and (2) a number of columns to span, relative to the number of available columns for the given breakpoint.
142+
143+
**Example SCSS**
144+
```scss
145+
@media screen and (min-width: 20rem) {
146+
button {
147+
@include media-query('sm') {
148+
max-width: get-fluid-size('sm', 1);
149+
}
150+
}
151+
}
152+
```
153+
154+
**Output CSS**
155+
```css
156+
@media screen and (min-width: 20rem) {
157+
button {
158+
max-width: 25vw;
159+
}
160+
}
161+
```
162+
163+
### Get a Fixed Size
164+
Use the `get-fixed-size()` SCSS function to calculate a fixed size based on a number of fixed nondimensional units multiplied by the base value from the current row height of the grid (`$rowHeight`);
165+
166+
**Example SCSS**
167+
```scss
168+
button {
169+
@include media-query('sm') {
170+
max-width: get-fixed-size(10);
171+
}
172+
}
173+
```
174+
175+
**Output CSS**
176+
```css
177+
@media screen and (min-width: 20rem) {
178+
button {
179+
max-width: 5rem;
180+
}
181+
}
182+
```
183+
112184
## FAQs
113185

114186
### Why does none of the CSS Grid code use `grid-gap` for gutters?

0 commit comments

Comments
 (0)