wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge pull request #90 from adamwathan/width-grid

Browse source 
Replace grid with percent width helpers
This commit is contained in:
Adam Wathan 2017-08-27 18:01:36 -04:00 • committed by GitHub
commit 085c3895e8
8 changed files with 256 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/source/_layouts/master.blade.php
View file

@ -27,8 +27,8 @@
</div>
</header>
<div class="container">
<div class="row">
<div class="col-12 sm:col-3">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/4">
<nav class="py-4 text-light text-base">
<div>
<p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
@ -75,7 +75,7 @@
</div>
</nav>
</div>
<div class="col-12 sm:col-9">
<div class="w-full lg:w-3/4">
<div class="p-12 rounded-lg bg-light shadow-2">
@yield('body')
</div>

231
docs/source/grid.md
View file

@ -4,3 +4,234 @@ title: "Grid"
---
# Grid
Basic grid example:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-soft text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
</div>
</div>
Columns don't need to fill a row:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-soft text-light">
.md:w-1/4
</div>
</div>
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
</div>
</div>
Columns can be different widths:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
<div class="w-full md:w-1/2">
<div class="text-center py-4 bg-dark-soft text-light">
.md:w-1/2
</div>
</div>
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
</div>
</div>
Rows can overflow and wrap:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-soft text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-soft text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="text-center py-4 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
</div>
</div>
Columns can have gutters:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap.pull-x-4</div>
<div class="flex flex-wrap pull-x-4">
<div class="w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.w-full</div>
<div>.md:w-1/3</div>
<div>.px-4</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-soft text-light">
<div>.w-full</div>
<div>.md:w-1/3</div>
<div>.px-4</div>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.w-full</div>
<div>.md:w-1/3</div>
<div>.px-4</div>
</div>
</div>
</div>
</div>
Column widths can be automatic:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-softer text-light">
.w-1/4.md:flex-fill
</div>
</div>
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-soft text-light">
.w-1/4.md:flex-fill
</div>
</div>
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-softer text-light">
.w-1/4.md:flex-fill
</div>
</div>
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-soft text-light">
.w-1/4.md:flex-fill
</div>
</div>
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-softer text-light">
.w-1/4.md:flex-fill
</div>
</div>
</div>
</div>
Fixed width columns are still respected even if a smaller screen has auto column widths:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-soft text-light">
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-soft text-light">
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.flex-fill</div>
<div>.md:w-1/6</div>
<div>.md:flex-none</div>
</div>
</div>
</div>
</div>
Use margin auto utilities to accomplish offsets:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 md:ml-auto">
<div class="text-center py-4 bg-dark-soft text-light">
<div>.md:w-1/3</div>
<div>.md:ml-auto</div>
</div>
</div>
<div class="w-full md:w-1/3 md:mr-auto">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.md:w-1/6</div>
<div>.md:mr-auto</div>
</div>
</div>
</div>
</div>

1
src/generators.less
View file

@ -10,7 +10,6 @@
@import "generators/border-radius";
@import "generators/border-widths";
@import "generators/constrain";
@import "generators/grid";
@import "generators/shadows";
@import "generators/sizing";
@import "generators/spacing-padding";

70
src/generators/grid.less
View file

@ -1,70 +0,0 @@
.generate-grid-columns(@grid-column-count; @prefix; @i: 1) when (@i <= @grid-column-count) {
.@{prefix}col-@{i} {
flex-basis: 100% * (@i / @grid-column-count);
max-width: 100% * (@i / @grid-column-count);
}
@offset-i: @i - 1;
.@{prefix}offset-@{offset-i} {
margin-left: 100% * (@offset-i / @grid-column-count);
}
.generate-grid-columns(@grid-column-count; @prefix; @i + 1);
}
.generate-responsive-grid(@grid-column-count; @screen; @min-width) {
@prefix: ~"@{screen}\:";
@media (min-width: @min-width) {
.@{prefix}col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
min-width: 0;
}
.@{prefix}col-first {
order: -1;
}
.@{prefix}col-last {
order: 1;
}
.generate-grid-columns(@grid-column-count; @prefix);
}
}
.generate-responsive-grids(@grid-column-count; @screens; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-responsive-grid(@grid-column-count; @name; @screen-width);
.generate-responsive-grids(@grid-column-count; @screens; @i + 1);
}
.generate-all-grids(@grid-column-count) {
.col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
min-width: 0;
}
.col-first {
order: -1;
}
.col-last {
order: 1;
}
.generate-grid-columns(@grid-column-count; ~"");
}
.generate-all-grids(@grid-column-count; none) {
.generate-all-grids(@grid-column-count);
}
.generate-all-grids(@grid-column-count; @screens) when not (@screens = none) {
.generate-all-grids(@grid-column-count);
.generate-responsive-grids(@grid-column-count; @screens);
}

4
src/generators/spacing-margin.less
View file

@ -61,6 +61,8 @@
@media (min-width: @screen-width) {
@prefix: ~"@{name}\:";
.@{prefix}ml-auto { margin-left: auto; }
.@{prefix}mr-auto { margin-right: auto; }
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
.generate-screen-margin-utilities(@margin-scale; @name);
}
@ -69,6 +71,8 @@
}
.define-margin-utilities(@margin-scale) {
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.generate-margin-utilities(@margin-scale);
}

8
src/utilities.less
View file

@ -7,7 +7,6 @@
@import "utilities/constrain";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/grid";
@import "utilities/images";
@import "utilities/misc";
@import "utilities/overflow";
@ -18,3 +17,10 @@
@import "utilities/text";
@import "utilities/vue";
@import "utilities/z-index";
@screens:
sm 576px,
md 768px,
lg 992px,
xl 1200px,
;

16
src/utilities/grid.less
View file

@ -1,16 +0,0 @@
@screens:
sm 576px,
md 768px,
lg 992px,
xl 1200px;
@grid-column-count: 12;
.row {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.generate-all-grids(@grid-column-count; @screens);

11
src/utilities/sizing.less
View file

@ -16,6 +16,17 @@
'96' 24rem,
'128' 32rem,
'full' 100%,
'1\/2' 50%,
'1\/3' (100% / 3),
'2\/3' (100% / 3 * 2),
'1\/4' 25%,
'3\/4' 75%,
'1\/5' 20%,
'2\/5' 40%,
'3\/5' 60%,
'4\/5' 80%,
'1\/6' (100% / 6),
'5\/6' (100% / 6 * 5),
;
@width-scale: @sizing-scale;