Ything-RepoMirrors/flexboxgrid
1
0
Fork 0
mirror of https://github.com/kristoferjoseph/flexboxgrid.git synced 2026-01-25 07:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updating alignment classes api

Browse Source
This commit is contained in:
kristoferjoseph
2014-01-15 16:22:25 -08:00
parent 57f52bb407
commit 05d1b6eaa4
7 changed files with 105 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
css/flexboxgrid.css
View File

@@ -230,12 +230,6 @@
margin-left: 91.667%;
}
.top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.start {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
@@ -243,40 +237,13 @@
justify-content: flex-start;
}
.justify--center {
.center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.align--center {
text-align: center;
}
.text-align--end {
text-align: end;
}
.center--children {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.end {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
@@ -284,6 +251,27 @@
justify-content: flex-end;
}
.top {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.bottom {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;

2
css/flexboxgrid.min.css vendored
View File

File diff suppressed because one or more lines are too long

56
css/index.css
View File

@@ -826,12 +826,6 @@ code {
margin-left: 91.667%;
}
.top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.start {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
@@ -839,40 +833,13 @@ code {
justify-content: flex-start;
}
.justify--center {
.center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.align--center {
text-align: center;
}
.text-align--end {
text-align: end;
}
.center--children {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.end {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
@@ -880,6 +847,27 @@ code {
justify-content: flex-end;
}
.top {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.bottom {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;

2
css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
index.html
View File

File diff suppressed because one or more lines are too long

29
src/css/flexboxgrid.css
View File

@@ -123,33 +123,24 @@
.offset-11--hand {
margin-left: 91.667%;
}
.top {
align-self: flex-start;
}
.start {
justify-content: flex-start;
}
.justify--center {
justify-content: center;
}
.align--center {
text-align: center;
}
.text-align--end {
text-align: end;
}
.center--children {
align-items: center;
}
.center {
align-self: center;
}
.bottom {
align-self: flex-end;
justify-content: center;
}
.end {
justify-content: flex-end;
}
.top {
align-items: flex-start;
}
.middle {
align-items: center;
}
.bottom {
align-items: flex-end;
}
.around {
justify-content: space-around;
}

48
src/index.html
View File

@@ -393,6 +393,28 @@
</div>
</div>
</div>
</code></pre>
<h3><code>.center</code></h3>
<div class="row">
<div class="column-12--hand">
<div class="box container">
<div class="row center">
<div class="column-6--hand">
<div class="box--nested"></div>
</div>
</div>
</div>
</div>
</div>
<pre><code>&lt;div class="row center">
&lt;div class="column-6--hand">
&lt;div class="box">
start
&lt;/div>
&lt;/div>
&lt;/div>
</code></pre>
<h3><code>.end</code></h3>
@@ -419,16 +441,16 @@
<h3><code>.top</code></h3>
<div class="row">
<div class="row top">
<div class="column-6--hand">
<div class="box--large"></div>
</div>
<div class="column-6--hand top">
<div class="column-6--hand">
<div class="box"></div>
</div>
</div>*default alignment
<pre><code>&lt;div class="row">
&lt;div class="column-6--hand top">
<pre><code>&lt;div class="row top">
&lt;div class="column-6--hand">
&lt;div class="box">
top
&lt;/div>
@@ -436,18 +458,18 @@
&lt;/div>
</code></pre>
<h3><code>.center</code></h3>
<h3><code>.middle</code></h3>
<div class="row">
<div class="row middle">
<div class="column-6--hand">
<div class="box--large"></div>
</div>
<div class="column-6--hand center">
<div class="column-6--hand">
<div class="box"></div>
</div>
</div>
<pre><code>&lt;div class="row">
&lt;div class="column-6--hand center">
<pre><code>&lt;div class="row middle">
&lt;div class="column-6--hand">
&lt;div class="box">
center
&lt;/div>
@@ -457,16 +479,16 @@
<h3><code>.bottom</code></h3>
<div class="row">
<div class="row bottom">
<div class="column-6--hand">
<div class="box--large"></div>
</div>
<div class="column-6--hand bottom">
<div class="column-6--hand">
<div class="box"></div>
</div>
</div>
<pre><code>&lt;div class="row">
&lt;div class="column-6--hand bottom">
<pre><code>&lt;div class="row bottom">
&lt;div class="column-6--hand">
&lt;div class="box">
bottom
&lt;/div>