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

Commit ab86c93

Browse files
seejamescodeseejamescode
committed
chore(git): merge conflicts resolved
2 parents 4d16d65 + dfb66dd commit ab86c93

File tree

7 files changed

+288
-0
lines changed

7 files changed

+288
-0
lines changed

‎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‎

-3.09 KB
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‎

-3.16 KB
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‎

-3.16 KB
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)