fix(grid): update grid
MODIFY
demo/scss/demo.scss
demo/scss/demo.scss
}
[class*="bx--col"] {
- padding: 1rem;
background-color: $color__gray-1;
- border: 10px solid $ui-02;
+
+ p {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+}
+
+.col-example {
+ background-color: rgba(blue, 0.2);
+ height: 100%;
+}
+
+.red {
+ background-color: rgba(red, 0.2);
+}
+
+.green {
+ background-color: rgba(green, 0.2);
+}
+
+.indigo {
+ background-color: rgba(indigo, 0.2);
}

MODIFY
server.js
server.js
@@ -24,62 +24,100 @@ app.use(express.static('scripts'));
app.use('/docs/js', express.static('docs/js'));
const getContent = glob =>
- globby(glob)
- .then((filePaths) => {
+ globby(glob).then(filePaths => {
if (filePaths.length === 0) {
return undefined;
}
- return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' })))
- .then(contents => contents.reduce((a, b) => a.concat(b)));
+ return Promise.all(
+ filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))
+ ).then(contents => contents.reduce((a, b) => a.concat(b)));
});
const getEachContent = glob =>
- globby(glob)
- .then((filePaths) => { // eslint-disable-line arrow-body-style
- return Promise.all(filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' })))
- .then(contents => contents.map((content, i) => ({ name: path.basename(filePaths[i], '.html'), content })));
+ globby(glob).then(filePaths => {
+ // eslint-disable-line arrow-body-style
+ return Promise.all(
+ filePaths.map(filePath => readFile(filePath, { encoding: 'utf8' }))
+ ).then(contents =>
+ contents.map((content, i) => ({
+ name: path.basename(filePaths[i], '.html'),
+ content,
+ }))
+ );
});
-const componentDirs = readdir('src/components')
- .then((items) => { // eslint-disable-line arrow-body-style
- return Promise.all(items.map(item => stat(path.resolve('src/components', item))))
- .then(stats => items.filter((item, i) => stats[i].isDirectory()));
+const componentDirs = readdir('src/components').then(items => {
+ // eslint-disable-line arrow-body-style
+ return Promise.all(
+ items.map(item => stat(path.resolve('src/components', item)))
+ ).then(stats => items.filter((item, i) => stats[i].isDirectory()));
});
const topRouteHandler = (req, res) => {
const name = req.params.component;
- if (name && path.relative('src/components', `src/components/${name}`).substr(0, 2) === '..') {
+ if (
+ name &&
+ path.relative('src/components', `src/components/${name}`).substr(0, 2) ===
+ '..'
+ ) {
res.status(404).end();
} else {
componentDirs
- .then((dirs) => { // eslint-disable-line arrow-body-style
- return Promise.all(dirs.map(dir => getEachContent(path.resolve('src/components', dir, '**/*.html'))))
- .then(subItemsList => subItemsList.map((subItems, i) => { // eslint-disable-line arrow-body-style
- return subItems.length > 0 && Object.assign({
+ .then(dirs => {
+ // eslint-disable-line arrow-body-style
+ return Promise.all(
+ dirs.map(dir =>
+ getEachContent(path.resolve('src/components', dir, '**/*.html'))
+ )
+ )
+ .then(subItemsList =>
+ subItemsList.map((subItems, i) => {
+ // eslint-disable-line arrow-body-style
+ return (
+ subItems.length > 0 &&
+ Object.assign(
+ {
name: dirs[i],
- selected: name === dirs[i] || subItems.find(subItem => name === subItem.name),
- }, subItems.length <= 1 ? {
+ selected:
+ name === dirs[i] ||
+ subItems.find(subItem => name === subItem.name),
+ },
+ subItems.length <= 1
+ ? {
content: subItems[0].content,
- } : {}, subItems.length <= 1 ? {} : {
- items: subItems.map(subItem => Object.assign(subItem, { selected: name === subItem.name })),
- });
- }))
+ }
+ : {},
+ subItems.length <= 1
+ ? {}
+ : {
+ items: subItems.map(subItem =>
+ Object.assign(subItem, {
+ selected: name === subItem.name,
+ })
+ ),
+ }
+ )
+ );
+ })
+ )
.then(links => links.filter(Boolean))
- .then((links) => {
+ .then(links => {
if (!name) {
const firstLink = links[0];
- (firstLink.items ? firstLink.items[0] : firstLink).selected = true;
+ (firstLink.items
+ ? firstLink.items[0]
+ : firstLink).selected = true;
}
return links;
});
})
- .then((links) => {
+ .then(links => {
res.render('demo-all', {
links,
});
})
- .catch((error) => {
+ .catch(error => {
console.error(error.stack); // eslint-disable-line no-console
res.status(500).end();
});
@@ -96,7 +134,7 @@ app.get('/components/:component', (req, res) => {
res.status(404).end();
} else {
getContent(glob)
- .then((html) => {
+ .then(html => {
if (typeof html === 'undefined') {
res.status(404).end();
} else {
@@ -105,7 +143,7 @@ app.get('/components/:component', (req, res) => {
});
}
})
- .catch((error) => {
+ .catch(error => {
console.error(error.stack); // eslint-disable-line no-console
res.status(500).end();
});
@@ -118,7 +156,7 @@ app.get('/grid', (req, res) => {
if (path.relative('src/globals', glob).substr(0, 2) === '..') {
res.status(404).end();
} else {
- Promise.all([getContent(glob), allLinks])
+ Promise.all([getContent(glob)])
.then(results => {
if (typeof results[0] === 'undefined') {
res.status(404).end();

MODIFY
src/globals/grid/_grid.scss
src/globals/grid/_grid.scss
-$gutter-size: 10px;
-$i: 0;
+// map functions
+@function breakpoint($breakpoint) {
+ @if map-has-key($grid-breakpoints, $breakpoint) {
+ @return map-get($grid-breakpoints, $breakpoint);
+ } @else {
+ @warn 'breakpoint: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
+ }
+}
-@mixin column-size($col-num) {
- flex-basis: (100% * $col-num / 12);
- max-width: (100% * $col-num / 12);
+@function gutter($breakpoint) {
+ @if map-has-key($gutter-breakpoints, $breakpoint) {
+ @return map-get($gutter-breakpoints, $breakpoint);
+ } @else {
+ @warn 'gutter: could not find #{$breakpoint} in $gutter-breakpoints map. Please make sure it is defined';
+ }
}
+@function grid-gutter($breakpoint) {
+ @if map-has-key($grid-gutter-breakpoints, $breakpoint) {
+ @return map-get($grid-gutter-breakpoints, $breakpoint);
+ } @else {
+ @warn 'grid-gutter: could not find #{$breakpoint} in $grid-breakpoints map. Please make sure it is defined';
+ }
+}
+
+$max-width: 1600px;
+$columns: 12;
+
+$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px);
+$gutter-breakpoints: (xs: 5px, sm: 10px);
+$grid-gutter-breakpoints: (xs: 3%, sm: 5%);
+
.bx--grid {
- margin: 0 3%;
+ margin-left: grid-gutter('xs');
+ margin-right: grid-gutter('xs');
+ padding-left: gutter('xs');
+ padding-right: gutter('xs');
- @include breakpoint('bp--xs--major') {
- margin: 0 5%;
+ @media (min-width: breakpoint('sm')) {
+ margin-left: grid-gutter('sm');
+ margin-right: grid-gutter('sm');
+ padding-left: gutter('sm');
+ padding-right: gutter('sm');
+ }
+
+ &.max {
+ max-width: $max-width;
}
}
.bx--row {
display: flex;
flex-wrap: wrap;
- margin: 0 $gutter-size * -1;
+ margin: 0 gutter('xs') * -1;
+
+ @media (min-width: breakpoint('sm')) {
+ margin: 0 gutter('sm') * -1;
+ }
}
[class*="bx--col"] {
position: relative;
width: 100%;
min-height: 1px;
- padding: 0 $gutter-size;
-}
+ padding: 0 gutter('xs');
-.bx--col-xs,
-.bx--col-sm,
-.bx--col-md,
-.bx--col-lg {
- flex-basis: 0;
- flex: 1;
- flex-grow: 1;
- max-width: 100%;
+ @media (min-width: breakpoint('sm')) {
+ padding: 0 gutter('sm');
+ }
}
-@while $i <= 12 {
-
+@for $i from 1 through $columns {
.bx--col-xs-#{$i} {
- @include column-size($i);
+ flex-basis: (100% * $i / $columns);
}
-
- @media (min-width: 720px) {
- .bx--col-sm-#{$i} {
- @include column-size($i);
}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @media (min-width: breakpoint($breakpoint)) {
+ .bx--col-#{$breakpoint}-auto {
+ flex: 0 0 auto;
+ width: auto;
}
- @media (min-width: 970px) {
- .bx--col-md-#{$i} {
- @include column-size($i);
+ @for $i from 1 through $columns {
+ .bx--col-#{$breakpoint}-#{$i} {
+ flex-basis: (100% * $i / $columns);
}
}
-
- @media (min-width: 1170px) {
- .bx--col-lg-#{$i} {
- @include column-size($i);
}
}
- $i: $i + 1;
+// deprecated
+$gutter-size: 10px;
+
+@mixin column-size($col-num) {
+ flex-basis: (100% * $col-num / $columns);
+ max-width: (100% * $col-num / $columns);
}
+.bx--col-xs,
+.bx--col-sm,
+.bx--col-md,
+.bx--col-lg {
+ flex-basis: 0;
+ flex: 1;
+ flex-grow: 1;
+ max-width: 100%;
+}

MODIFY
src/globals/grid/grid.html
src/globals/grid/grid.html
<div class="bx--grid">
<div class="bx--row">
- <div class="bx--col-md-8">.bx--col-md-8</div>
- <div class="bx--col-md-4">.bx--col-md-4</div>
- </div>
+ <div class="bx--col-xs-12 bx--col-sm-6 indigo">
<div class="bx--row">
- <div class="bx--col-md-4">.bx--col-md-4</div>
- <div class="bx--col-md-4">.bx--col-md-4</div>
- <div class="bx--col-md-4">.bx--col-md-4</div>
+ <div class="bx--col-xs-12 bx--col-sm-6">
+ <div class="col-example">
+ <p>Content space for bx--col-xs-12 bx--col-sm-6</p>
</div>
- <div class="bx--row">
- <div class="bx--col-md-3">.bx--col-md-3</div>
- <div class="bx--col-md-6">.bx--col-md-6</div>
- <div class="bx--col-md-3">.bx--col-md-3</div>
</div>
- <div class="bx--row">
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
- <div class="bx--col-xs-1">.bx--col-xs-1</div>
+ <div class="bx--col-xs-12 bx--col-sm-6 green">
+ <p>Full space for bx--col-xs-12 bx--col-sm-6 (columns naturally have padding on them, adding a background color to
+ the column directly will effect the entire column, as opposed to using a child element in the example to the
+ left). </p>
+ </div>
+ </div>
+
+ <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
+ </div>
+ <div class="bx--col-xs-12 bx--col-sm-6 red">
+ <p>Background color over entire column, not just content space</p>
+
+ </div>
</div>
</div>
\ No newline at end of file

fix(grid): update grid (#229)