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

Replace grid with percent width helpers

Browse source
This commit is contained in:
Adam Wathan 2017-08-23 15:56:21 -04:00
parent eb74e8568e
commit ad36272906
8 changed files with 197 additions and 23 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">
<div class="w-full sm: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 sm:w-3/4">
<div class="p-12 rounded-lg bg-light shadow-2">
@yield('body')
</div>

170
docs/source/grid.md
View file

@ -4,3 +4,173 @@ title: "Grid"
---
# Grid
Basic grid example:
<div class="flex mb-6">
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
</div>
Columns don't need to fill a row:
<div class="flex mb-6">
<div class="w-full md:w-1/4">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
<div class="w-full md:w-1/4">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/4
</div>
</div>
<div class="w-full md:w-1/4">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
</div>
Columns can be different widths:
<div class="flex mb-6">
<div class="w-full md:w-1/4">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
<div class="w-full md:w-1/2">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/2
</div>
</div>
<div class="w-full md:w-1/4">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/4
</div>
</div>
</div>
Rows can overflow and wrap:
<div class="flex mb-6">
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/3
</div>
</div>
<div class="w-full md:w-1/3">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/3
</div>
</div>
</div>
Column widths can be automatic:
<div class="flex mb-6">
<div class="w-1/6 md:flex-fill">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:flex-fill
</div>
</div>
<div class="w-1/6 md:flex-fill">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:flex-fill
</div>
</div>
<div class="w-1/6 md:flex-fill">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:flex-fill
</div>
</div>
<div class="w-1/6 md:flex-fill">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:flex-fill
</div>
</div>
<div class="w-1/6 md:flex-fill">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:flex-fill
</div>
</div>
</div>
Fixed width columns are still respected even if a smaller screen has auto column widths:
<div class="flex mb-6">
<div class="flex-fill md:w-1/6">
<div class="flex-center h-16 bg-dark-softer text-light">
.flex-fill.md:w-1/6
</div>
</div>
<div class="flex-fill md:w-1/6">
<div class="flex-center h-16 bg-dark-soft text-light">
.flex-fill.md:w-1/6
</div>
</div>
<div class="flex-fill md:w-1/6">
<div class="flex-center h-16 bg-dark-softer text-light">
.flex-fill.md:w-1/6
</div>
</div>
<div class="flex-fill md:w-1/6">
<div class="flex-center h-16 bg-dark-soft text-light">
.flex-fill.md:w-1/6
</div>
</div>
<div class="flex-fill md:w-1/6">
<div class="flex-center h-16 bg-dark-softer text-light">
.flex-fill.md:w-1/6
</div>
</div>
</div>
Use margin auto utilities to accomplish offsets:
<div class="flex mb-6">
<div class="w-full md:w-1/3 md:ml-auto">
<div class="flex-center h-16 bg-dark-soft text-light">
.md:w-1/3.md:ml-auto
</div>
</div>
<div class="w-full md:w-1/3 md:mr-auto">
<div class="flex-center h-16 bg-dark-softer text-light">
.md:w-1/6.md:mr-auto
</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";

4
src/generators/grid.less
View file

@ -1,7 +1,7 @@
.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);
flex: none;
width: 100% * (@i / @grid-column-count);
}
@offset-i: @i - 1;

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;