Skip to content

Commit

Permalink
fix(grid): update grid (#229)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdhanaraj @marijohannessen
chrisdhanaraj authored and marijohannessen committed Jul 17, 2017
1 parent c28635a commit 092930f
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 102 deletions.
24 changes: 22 additions & 2 deletions demo/scss/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,27 @@
}

[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);
}
114 changes: 76 additions & 38 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,62 +24,100 @@ app.use(express.static('scripts'));
app.use('/docs/js', express.static('docs/js'));

const getContent = glob =>
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)));
});
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)));
});

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 })));
});

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()));
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 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({
name: dirs[i],
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 })),
});
}))
.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
? {
content: subItems[0].content,
}
: {},
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();
});
Expand All @@ -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 {
Expand All @@ -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();
});
Expand All @@ -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();
Expand Down
113 changes: 78 additions & 35 deletions src/globals/grid/_grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,109 @@
$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);
}
}
// deprecated
$gutter-size: 10px;

$i: $i + 1;
@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%;
}
48 changes: 21 additions & 27 deletions src/globals/grid/grid.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,24 @@
<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 class="bx--col-xs-12 bx--col-sm-6 indigo">
<div class="bx--row">
<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>
<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 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>
<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>
</div>
</div>

0 comments on commit 092930f

Please sign in to comment.