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

Adjusting anchor stops

Browse Source
This commit is contained in:
kristoferjoseph
2014-01-02 19:27:39 -08:00
parent e15963e83b
commit 1c96a095c4
6 changed files with 74 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
css/index.css
View File

@@ -323,12 +323,14 @@ code {
}
.page-section {
padding-top: 2rem;
padding-top: 3rem;
margin: 3rem 0 5rem;
}
.page-features {
z-index: 0;
width: 100%;
background: #001a33;
}
.menu-button {
@@ -379,13 +381,17 @@ code {
z-index: -1;
height: 100%;
width: 250px;
}
.menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 5rem;
background: #001a33;
}
.slide-menu>h2 {
.menu__header {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -393,13 +399,13 @@ code {
color: #eee;
}
.slide-menu>ul {
.menu__list {
margin: 0;
padding: 0;
list-style: none;
}
.slide-menu>ul>li {
.menu__list-item {
height: 2rem;
line-height: 2rem;
color: #007FFF;
@@ -408,11 +414,7 @@ code {
transition: all .2s ease-in;
}
.slide-menu>ul>li:hover {
color: #fff;
}
.slide-menu>ul>li>a {
.menu__link {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -423,7 +425,7 @@ code {
transition: color .2s ease-in;
}
.slide-menu>ul>li>a:hover {
.menu__link:hover {
color: #3298ff;
border-bottom: 0;
}

2
css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

76
index.html
View File

@@ -18,39 +18,39 @@
<button class="icomatic menu-button js-menu-button">listview</button>
</div>
<div class="row page-features">
<section class="features">
<h2>Features</h2>
<ul>
<li> <a href="#responsive">Responsive</a>
<section class="menu js-menu">
<h2 class="menu__header">Features</h2>
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__link" href="#responsive">Responsive</a>
</li>
<li> <a href="#fluid">Fluid</a>
<li class="menu__list-item">
<a class="menu__link" href="#fluid">Fluid</a>
</li>
<li> <a href="#syntax">Simple syntax</a>
<li class="menu__list-item">
<a class="menu__link" href="#syntax">Simple syntax</a>
</li>
<li> <a href="#offsets">Offsets</a>
<li class="menu__list-item">
<a class="menu__link" href="#offsets">Offsets</a>
</li>
<li> <a href="#auto">Auto width</a>
<li class="menu__list-item">
<a class="menu__link" href="#auto">Auto width</a>
</li>
<li> <a href="#nested">Nested grids</a>
<li class="menu__list-item">
<a class="menu__link" href="#nested">Nested grids</a>
</li>
<li> <a href="#alignment">Alignment</a>
<li class="menu__list-item">
<a class="menu__link" href="#alignment">Alignment</a>
</li>
<li> <a href="#distribution">Distribution</a>
<li class="menu__list-item">
<a class="menu__link" href="#distribution">Distribution</a>
</li>
<li> <a href="#reordering">Reordering</a>
<li class="menu__list-item">
<a class="menu__link" href="#reordering">Reordering</a>
</li>
<li> <a href="#reversing">Reversing</a>
<li class="menu__list-item">
<a class="menu__link" href="#reversing">Reversing</a>
</li>
<!-- <li>
<a href="#compatible">Backwards Compatible</a>
@@ -72,9 +72,11 @@
</div>
</header>
<div class="wrap">
<a name="responsive"></a>
<section class="page-section">
<a name="responsive"></a>
<h2>Responsive</h2>
<p>Responsive modifiers enable specifying different column sizes and offsets at hand,
@@ -116,8 +118,8 @@
&lt;/div></code></pre>
</section>
<a name="fluid"></a>
<section class="page-section">
<a name="fluid"></a>
<br>
<h2>Fluid</h2>
@@ -180,8 +182,9 @@
}</code></pre>
</section>
<a name="syntax"></a>
<section class="page-section">
<a name="syntax"></a>
<h2>Simple Syntax</h2>
<p>All you need to remember is row, column, content.</p>
@@ -192,8 +195,9 @@
&lt;/div></code></pre>
</section>
<a name="offsets"></a>
<section class="page-section">
<a name="offsets"></a>
<h2>Offsets</h2>
<p>Offset a column</p>
@@ -259,8 +263,9 @@
&lt;/div></code></pre>
</section>
<a name="auto"></a>
<section class="page-section">
<a name="auto"></a>
<h2>Auto Width</h2>
<p>Add any number of auto sizing columns to a row. Let the grid figure it out.</p>
@@ -291,8 +296,9 @@
&lt;/div></code></pre>
</section>
<a name="nested"></a>
<section class="page-section">
<a name="nested"></a>
<h2>Nested Grids</h2>
<p>Nest grids inside grids inside grids.</p>
@@ -356,8 +362,9 @@
&lt;/div></code></pre>
</section>
<a name="alignment"></a>
<section class="page-section">
<a name="alignment"></a>
<h2>Alignment</h2>
<p>Add classes to align elements to the start or end of a row as well as the top,
@@ -464,8 +471,9 @@
</code></pre>
</section>
<a name="distribution"></a>
<section class="page-section">
<a name="distribution"></a>
<h2>Distribution</h2>
<p>Add classes to distribute the contents of a row or column.</p>
@@ -546,8 +554,9 @@
</code></pre>
</section>
<a name="reordering"></a>
<section class="page-section">
<a name="reordering"></a>
<h2>Reordering</h2>
<p>Add classes to reorder columns.</p>
@@ -646,8 +655,9 @@
</code></pre>
</section>
<a name="reversing"></a>
<section class="page-section">
<a name="reversing"></a>
<h2>Reversing</h2>
<h3><code>.reverse</code></h3>

2
js/index.js
View File

@@ -1 +1 @@
!function(a){var b=a.document,c=(b.querySelector,b.querySelector(".features")),d=b.querySelector(".js-menu-button"),e=b.querySelector(".page");c.classList.add("slide-menu"),d.addEventListener("click",function(){e.classList.toggle("open")})}(this);
!function(a){var b=a.document,c=(b.querySelector,b.querySelector(".js-menu")),d=b.querySelector(".js-menu-button"),e=b.querySelector(".page");c.classList.add("slide-menu"),d.addEventListener("click",function(){e.classList.toggle("open")})}(this);

31
src/css/style.css
View File

@@ -75,11 +75,13 @@ code {
margin: 0 auto;
}
.page-section {
padding-top: 2rem;
padding-top: 3rem;
margin: 3rem 0 5rem;
}
.page-features {
z-index: 0;
width: 100%;
background:hsl(209, 100%, 10%);
}
.menu-button {
float: right;
@@ -121,38 +123,37 @@ code {
z-index: -1;
height: 100%;
width: 250px;
}
.menu {
box-sizing: border-box;
padding-bottom: 5rem;
background:hsl(209, 100%, 10%);
}
.slide-menu > h2 {
.menu__header {
box-sizing: border-box;
padding: 3rem 3rem 0 3rem;
color: #eee;
}
.slide-menu > ul {
.menu__list {
margin: 0;
padding: 0;
list-style: none;
}
.slide-menu > ul > li {
height: 2rem;
line-height: 2rem;
color: #007FFF;
background: transparent;
transition: all .2s ease-in;
.menu__list-item {
height: 2rem;
line-height: 2rem;
color: #007FFF;
background: transparent;
transition: all .2s ease-in;
}
.slide-menu > ul > li:hover {
color: #fff;
}
.slide-menu > ul > li > a {
.menu__link {
box-sizing: border-box;
padding-left: 3rem;
display: block;
color: #007FFF;
transition: color 0.2s ease-in;
}
.slide-menu > ul > li > a:hover {
.menu__link:hover {
color: hsl(210, 100%, 60%);
border-bottom: none;
}

2
src/js/index.js
View File

@@ -1,7 +1,7 @@
(function(window){
var d = window.document,
q = d.querySelector,
menu = d.querySelector('.features'),
menu = d.querySelector('.js-menu'),
menuButton = d.querySelector('.js-menu-button'),
page = d.querySelector('.page');