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

Commit

Permalink
Merge pull request #25 from jendowns/21/sizing-functions
Browse files Browse the repository at this point in the history 
feat(utilities): Add scss utility functions to find fixed and fluid sizes.
  • Loading branch information
@seejamescode
seejamescode committed Mar 5, 2018
2 parents a510303 + f9c52bf commit a4a42c5
Show file tree
Hide file tree
Showing 35 changed files with 976 additions and 664 deletions.
Binary file modified examples/bootstrap/css-gridish/bootstrap-grid.sketch
View file
Binary file not shown.
54 changes: 27 additions & 27 deletions examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,124 +151,124 @@ body {
display: none; }

.bootstrap-grid__col--sm--1 {
max-width: calc( 100rem / 12 * 1);
max-width: 8.33333rem;
min-width: 8.33333vw;
width: 8.33333vw;
grid-column: span 1; }

.bootstrap-grid__height-fluid--sm--1 {
height: 8.33333vw;
max-height: calc( 100rem / 12 * 1); }
max-height: 8.33333rem; }

.bootstrap-grid__col--sm--2 {
max-width: calc( 100rem / 12 * 2);
max-width: 16.66667rem;
min-width: 16.66667vw;
width: 16.66667vw;
grid-column: span 2; }

.bootstrap-grid__height-fluid--sm--2 {
height: 16.66667vw;
max-height: calc( 100rem / 12 * 2); }
max-height: 16.66667rem; }

.bootstrap-grid__col--sm--3 {
max-width: calc( 100rem / 12 * 3);
max-width: 25rem;
min-width: 25vw;
width: 25vw;
grid-column: span 3; }

.bootstrap-grid__height-fluid--sm--3 {
height: 25vw;
max-height: calc( 100rem / 12 * 3); }
max-height: 25rem; }

.bootstrap-grid__col--sm--4 {
max-width: calc( 100rem / 12 * 4);
max-width: 33.33333rem;
min-width: 33.33333vw;
width: 33.33333vw;
grid-column: span 4; }

.bootstrap-grid__height-fluid--sm--4 {
height: 33.33333vw;
max-height: calc( 100rem / 12 * 4); }
max-height: 33.33333rem; }

.bootstrap-grid__col--sm--5 {
max-width: calc( 100rem / 12 * 5);
max-width: 41.66667rem;
min-width: 41.66667vw;
width: 41.66667vw;
grid-column: span 5; }

.bootstrap-grid__height-fluid--sm--5 {
height: 41.66667vw;
max-height: calc( 100rem / 12 * 5); }
max-height: 41.66667rem; }

.bootstrap-grid__col--sm--6 {
max-width: calc( 100rem / 12 * 6);
max-width: 50rem;
min-width: 50vw;
width: 50vw;
grid-column: span 6; }

.bootstrap-grid__height-fluid--sm--6 {
height: 50vw;
max-height: calc( 100rem / 12 * 6); }
max-height: 50rem; }

.bootstrap-grid__col--sm--7 {
max-width: calc( 100rem / 12 * 7);
max-width: 58.33333rem;
min-width: 58.33333vw;
width: 58.33333vw;
grid-column: span 7; }

.bootstrap-grid__height-fluid--sm--7 {
height: 58.33333vw;
max-height: calc( 100rem / 12 * 7); }
max-height: 58.33333rem; }

.bootstrap-grid__col--sm--8 {
max-width: calc( 100rem / 12 * 8);
max-width: 66.66667rem;
min-width: 66.66667vw;
width: 66.66667vw;
grid-column: span 8; }

.bootstrap-grid__height-fluid--sm--8 {
height: 66.66667vw;
max-height: calc( 100rem / 12 * 8); }
max-height: 66.66667rem; }

.bootstrap-grid__col--sm--9 {
max-width: calc( 100rem / 12 * 9);
max-width: 75rem;
min-width: 75vw;
width: 75vw;
grid-column: span 9; }

.bootstrap-grid__height-fluid--sm--9 {
height: 75vw;
max-height: calc( 100rem / 12 * 9); }
max-height: 75rem; }

.bootstrap-grid__col--sm--10 {
max-width: calc( 100rem / 12 * 10);
max-width: 83.33333rem;
min-width: 83.33333vw;
width: 83.33333vw;
grid-column: span 10; }

.bootstrap-grid__height-fluid--sm--10 {
height: 83.33333vw;
max-height: calc( 100rem / 12 * 10); }
max-height: 83.33333rem; }

.bootstrap-grid__col--sm--11 {
max-width: calc( 100rem / 12 * 11);
max-width: 91.66667rem;
min-width: 91.66667vw;
width: 91.66667vw;
grid-column: span 11; }

.bootstrap-grid__height-fluid--sm--11 {
height: 91.66667vw;
max-height: calc( 100rem / 12 * 11); }
max-height: 91.66667rem; }

.bootstrap-grid__col--sm--12 {
max-width: calc( 100rem / 12 * 12);
max-width: 100rem;
min-width: 100vw;
width: 100vw;
grid-column: span 12; }

.bootstrap-grid__height-fluid--sm--12 {
height: 100vw;
max-height: calc( 100rem / 12 * 12); }
max-height: 100rem; }

.bootstrap-padding {
padding: calc(30px / 2); }
Expand Down Expand Up @@ -333,7 +333,7 @@ body {
--bootstrap-height-28: 28rem;
--bootstrap-height-29: 29rem; } }

@media (min-width: 100rem) {
@media screen and (min-width: 100rem) {
.bootstrap-grid__col--sm--0--only {
display: block; }
[class*="bootstrap-grid__col--xl--"] {
Expand Down Expand Up @@ -361,11 +361,11 @@ body {
padding-top: calc(30px / 2); }
@supports (display: grid) {
.bootstrap-grid {
grid-template-columns: repeat(auto-fill, calc( 100rem / 12)); }
grid-template-columns: repeat(auto-fill, 8.33333rem); }
.bootstrap-grid.bootstrap-grid--fixed-columns {
grid-template-columns: repeat(auto-fill, 8.33333rem); }
.bootstrap-grid.bootstrap-grid--fluid-rows {
grid-auto-rows: calc( 100rem / 12); } } }
grid-auto-rows: 8.33333rem; } } }

@supports (display: grid) {
.bootstrap-grid > * {
Expand Down
2 changes: 1 addition & 1 deletion examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions examples/bootstrap/css-gridish/css/bootstrap-grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ body {
--bootstrap-height-28: 28rem;
--bootstrap-height-29: 29rem; }

@media (min-width: 100rem) {
@media screen and (min-width: 100rem) {
.bootstrap-grid__col--sm--0--only {
display: block; }
[class*="bootstrap-grid__col--xl--"] {
Expand All @@ -169,8 +169,8 @@ body {
padding-bottom: calc(30px / 2);
padding-top: calc(30px / 2); }
.bootstrap-grid {
grid-template-columns: repeat(auto-fill, calc( 100rem / 12)); }
grid-template-columns: repeat(auto-fill, 8.33333rem); }
.bootstrap-grid.bootstrap-grid--fixed-columns {
grid-template-columns: repeat(auto-fill, 8.33333rem); }
.bootstrap-grid.bootstrap-grid--fluid-rows {
grid-auto-rows: calc( 100rem / 12); } }
grid-auto-rows: 8.33333rem; } }
Loading

0 comments on commit a4a42c5

Please sign in to comment.