Ything-RepoMirrors/flexboxgrid
1
0
Fork 0
mirror of https://github.com/kristoferjoseph/flexboxgrid.git synced 2026-01-24 23:16:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds font

Browse Source
This commit is contained in:
Kristofer Joseph
2015-05-13 00:08:36 -07:00
parent c3f84a942f
commit 823e68e274
11 changed files with 362 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/index.css
View File

File diff suppressed because one or more lines are too long

2
css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

460
dist/flexboxgrid.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/flexboxgrid.min.css vendored
View File

File diff suppressed because one or more lines are too long

53
index.html
View File

File diff suppressed because one or more lines are too long

2
js/index.js
View File

@@ -1 +1 @@
!function(a,b,c,d,e,f,g){a.GoogleAnalyticsObject=e,a[e]=a[e]||function(){(a[e].q=a[e].q||[]).push(arguments)},a[e].l=1*new Date,f=b.createElement(c),g=b.getElementsByTagName(c)[0],f.async=1,f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-46683011-1","flexboxgrid.com"),ga("send","pageview"),function(){var a={kitId:"nod8myc"},b=!1,c=document.createElement("script");c.src="//use.typekit.net/"+a.kitId+".js",c.type="text/javascript",c.async="true",c.onload=c.onreadystatechange=function(){var c=this.readyState;if(!(b||c&&"complete"!=c&&"loaded"!=c)){b=!0;try{Typekit.load(a)}catch(d){}}};var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(c,d)}();
!function(a,b,c,d,e,f,g){a.GoogleAnalyticsObject=e,a[e]=a[e]||function(){(a[e].q=a[e].q||[]).push(arguments)},a[e].l=1*new Date,f=b.createElement(c),g=b.getElementsByTagName(c)[0],f.async=1,f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-46683011-1","flexboxgrid.com"),ga("send","pageview");

2
package.json
View File

@@ -24,7 +24,7 @@
},
"homepage": "https://github.com/kristoferjoseph/flexboxgrid",
"devDependencies": {
"grunt": "~0.4.2",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^0.7.2",
"grunt-contrib-cssmin": "^0.7.0",
"grunt-contrib-htmlmin": "^0.1.3",

196
src/css/flexboxgrid.css
View File

@@ -74,7 +74,6 @@
.col-xs-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
flex-direction: column;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
@@ -86,13 +85,13 @@
}
.col-xs-1 {
flex-basis: 8.333333333%;
max-width: 8.333333333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-xs-2 {
flex-basis: 16.666666667%;
max-width: 16.666666667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-xs-3 {
@@ -101,13 +100,13 @@
}
.col-xs-4 {
flex-basis: 33.333333333%;
max-width: 33.333333333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-xs-5 {
flex-basis: 41.666666667%;
max-width: 41.666666667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-xs-6 {
@@ -116,13 +115,13 @@
}
.col-xs-7 {
flex-basis: 58.333333333%;
max-width: 58.333333333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-xs-8 {
flex-basis: 66.666666667%;
max-width: 66.666666667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-xs-9 {
@@ -131,13 +130,13 @@
}
.col-xs-10 {
flex-basis: 83.333333333%;
max-width: 83.333333333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-xs-11 {
flex-basis: 91.666666667%;
max-width: 91.666666667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-xs-12 {
@@ -146,11 +145,11 @@
}
.col-xs-offset-1 {
margin-left: 8.333333333%;
margin-left: 8.333%;
}
.col-xs-offset-2 {
margin-left: 16.666666667%;
margin-left: 16.667%;
}
.col-xs-offset-3 {
@@ -158,11 +157,11 @@
}
.col-xs-offset-4 {
margin-left: 33.333333333%;
margin-left: 33.333%;
}
.col-xs-offset-5 {
margin-left: 41.666666667%;
margin-left: 41.667%;
}
.col-xs-offset-6 {
@@ -170,11 +169,11 @@
}
.col-xs-offset-7 {
margin-left: 58.333333333%;
margin-left: 58.333%;
}
.col-xs-offset-8 {
margin-left: 66.666666667%;
margin-left: 66.667%;
}
.col-xs-offset-9 {
@@ -182,11 +181,11 @@
}
.col-xs-offset-10 {
margin-left: 83.333333333%;
margin-left: 83.333%;
}
.col-xs-offset-11 {
margin-left: 91.666666667%;
margin-left: 91.667%;
}
.start-xs {
@@ -264,7 +263,6 @@
.col-sm-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
flex-direction: column;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
@@ -276,13 +274,13 @@
}
.col-sm-1 {
flex-basis: 8.333333333%;
max-width: 8.333333333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-sm-2 {
flex-basis: 16.666666667%;
max-width: 16.666666667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-sm-3 {
@@ -291,13 +289,13 @@
}
.col-sm-4 {
flex-basis: 33.333333333%;
max-width: 33.333333333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-sm-5 {
flex-basis: 41.666666667%;
max-width: 41.666666667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-sm-6 {
@@ -306,13 +304,13 @@
}
.col-sm-7 {
flex-basis: 58.333333333%;
max-width: 58.333333333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-sm-8 {
flex-basis: 66.666666667%;
max-width: 66.666666667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-sm-9 {
@@ -321,13 +319,13 @@
}
.col-sm-10 {
flex-basis: 83.333333333%;
max-width: 83.333333333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-sm-11 {
flex-basis: 91.666666667%;
max-width: 91.666666667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-sm-12 {
@@ -336,11 +334,11 @@
}
.col-sm-offset-1 {
margin-left: 8.333333333%;
margin-left: 8.333%;
}
.col-sm-offset-2 {
margin-left: 16.666666667%;
margin-left: 16.667%;
}
.col-sm-offset-3 {
@@ -348,11 +346,11 @@
}
.col-sm-offset-4 {
margin-left: 33.333333333%;
margin-left: 33.333%;
}
.col-sm-offset-5 {
margin-left: 41.666666667%;
margin-left: 41.667%;
}
.col-sm-offset-6 {
@@ -360,11 +358,11 @@
}
.col-sm-offset-7 {
margin-left: 58.333333333%;
margin-left: 58.333%;
}
.col-sm-offset-8 {
margin-left: 66.666666667%;
margin-left: 66.667%;
}
.col-sm-offset-9 {
@@ -372,11 +370,11 @@
}
.col-sm-offset-10 {
margin-left: 83.333333333%;
margin-left: 83.333%;
}
.col-sm-offset-11 {
margin-left: 91.666666667%;
margin-left: 91.667%;
}
.start-sm {
@@ -455,7 +453,6 @@
.col-md-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
flex-direction: column;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
@@ -467,13 +464,13 @@
}
.col-md-1 {
flex-basis: 8.333333333%;
max-width: 8.333333333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-md-2 {
flex-basis: 16.666666667%;
max-width: 16.666666667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-md-3 {
@@ -482,13 +479,13 @@
}
.col-md-4 {
flex-basis: 33.333333333%;
max-width: 33.333333333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-md-5 {
flex-basis: 41.666666667%;
max-width: 41.666666667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-md-6 {
@@ -497,13 +494,13 @@
}
.col-md-7 {
flex-basis: 58.333333333%;
max-width: 58.333333333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-md-8 {
flex-basis: 66.666666667%;
max-width: 66.666666667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-md-9 {
@@ -512,13 +509,13 @@
}
.col-md-10 {
flex-basis: 83.333333333%;
max-width: 83.333333333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-md-11 {
flex-basis: 91.666666667%;
max-width: 91.666666667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-md-12 {
@@ -527,11 +524,11 @@
}
.col-md-offset-1 {
margin-left: 8.333333333%;
margin-left: 8.333%;
}
.col-md-offset-2 {
margin-left: 16.666666667%;
margin-left: 16.667%;
}
.col-md-offset-3 {
@@ -539,11 +536,11 @@
}
.col-md-offset-4 {
margin-left: 33.333333333%;
margin-left: 33.333%;
}
.col-md-offset-5 {
margin-left: 41.666666667%;
margin-left: 41.667%;
}
.col-md-offset-6 {
@@ -551,11 +548,11 @@
}
.col-md-offset-7 {
margin-left: 58.333333333%;
margin-left: 58.333%;
}
.col-md-offset-8 {
margin-left: 66.666666667%;
margin-left: 66.667%;
}
.col-md-offset-9 {
@@ -563,11 +560,11 @@
}
.col-md-offset-10 {
margin-left: 83.333333333%;
margin-left: 83.333%;
}
.col-md-offset-11 {
margin-left: 91.666666667%;
margin-left: 91.667%;
}
.start-md {
@@ -646,7 +643,6 @@
.col-lg-offset-12 {
box-sizing: border-box;
flex: 0 0 auto;
flex-direction: column;
padding-right: var( --half-gutter-width, 0.5rem );
padding-left: var( --half-gutter-width, 0.5rem );
}
@@ -658,13 +654,13 @@
}
.col-lg-1 {
flex-basis: 8.333333333%;
max-width: 8.333333333%;
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-lg-2 {
flex-basis: 16.666666667%;
max-width: 16.666666667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-lg-3 {
@@ -673,13 +669,13 @@
}
.col-lg-4 {
flex-basis: 33.333333333%;
max-width: 33.333333333%;
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-lg-5 {
flex-basis: 41.666666667%;
max-width: 41.666666667%;
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-lg-6 {
@@ -688,13 +684,13 @@
}
.col-lg-7 {
flex-basis: 58.333333333%;
max-width: 58.333333333%;
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-lg-8 {
flex-basis: 66.666666667%;
max-width: 66.666666667%;
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-lg-9 {
@@ -703,13 +699,13 @@
}
.col-lg-10 {
flex-basis: 83.333333333%;
max-width: 83.333333333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-lg-11 {
flex-basis: 91.666666667%;
max-width: 91.666666667%;
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-lg-12 {
@@ -718,11 +714,11 @@
}
.col-lg-offset-1 {
margin-left: 8.333333333%;
margin-left: 8.333%;
}
.col-lg-offset-2 {
margin-left: 16.666666667%;
margin-left: 16.667%;
}
.col-lg-offset-3 {
@@ -730,11 +726,11 @@
}
.col-lg-offset-4 {
margin-left: 33.333333333%;
margin-left: 33.333%;
}
.col-lg-offset-5 {
margin-left: 41.666666667%;
margin-left: 41.667%;
}
.col-lg-offset-6 {
@@ -742,11 +738,11 @@
}
.col-lg-offset-7 {
margin-left: 58.333333333%;
margin-left: 58.333%;
}
.col-lg-offset-8 {
margin-left: 66.666666667%;
margin-left: 66.667%;
}
.col-lg-offset-9 {
@@ -754,11 +750,11 @@
}
.col-lg-offset-10 {
margin-left: 83.333333333%;
margin-left: 83.333%;
}
.col-lg-offset-11 {
margin-left: 91.666666667%;
margin-left: 91.667%;
}
.start-lg {

2
src/css/style.css
View File

@@ -14,7 +14,7 @@ h3,
h4,
h5,
h6 {
font-family: "bree", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-family: "Gibson", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #001A33;
}
h2 {

62
src/index.html
View File

@@ -12,7 +12,39 @@
<!-- build:include:dist ../css/index.min.css -->
<!-- /build -->
</style>
<script>
function loadCSS( href, before, media, callback ){
"use strict";
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var sheets = window.document.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
ss.onloadcssdefined = function( cb ){
var defined;
for( var i = 0; i < sheets.length; i++ ){
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
defined = true;
}
}
if( defined ){
cb();
} else {
setTimeout(function() {
ss.onloadcssdefined( cb );
});
}
};
ss.onloadcssdefined(function() {
ss.media = media || "all";
});
return ss;
}
loadCSS( "//kristoferjoseph.com/font/bold.css" );
</script>
<noscript><link href="//kristoferjoseph.com/font/bold.css" rel="stylesheet"></noscript>
</head>
<body class="layout">
@@ -27,7 +59,7 @@
property.</p>
</div>
<div class="row center-xs">
<a class="button invisible-xs visible-md" href="https://github.com/kristoferjoseph/flexboxgrid/archive/v6.1.1.zip">Download</a>
<a class="button invisible-xs visible-md" href="https://github.com/kristoferjoseph/flexboxgrid/archive/v6.2.1.zip">Download</a>
<a class="button" href="https://github.com/kristoferjoseph/flexboxgrid">Github</a>
</div>
@@ -329,7 +361,7 @@
<p>Add classes to align elements to the start or end of a row as well as the top,
bottom, or center of a column</p>
<h3><code>.start-*</code></h3>
<h3><code>.start-</code></h3>
<div class="row">
<div class="col-xs-12">
@@ -341,7 +373,7 @@
</div>
</div>
</div>
</div>*default alignment
</div>
<pre><code>&lt;div class="row start-xs">
&lt;div class="col-xs-6">
&lt;div class="box">
@@ -352,7 +384,7 @@
</code></pre>
<h3><code>.center-*</code></h3>
<h3><code>.center-</code></h3>
<div class="row">
<div class="col-xs-12">
@@ -374,7 +406,7 @@
&lt;/div>
</code></pre>
<h3><code>.end-*</code></h3>
<h3><code>.end-</code></h3>
<div class="row">
<div class="col-xs-12">
@@ -407,7 +439,7 @@
</div>
</div>
</div>
</div>*Resize the browser window to see the alignment change.
</div>Example
<pre><code>&lt;div class="row center-xs end-sm start-lg">
&lt;div class="col-xs-6">
&lt;div class="box">
@@ -417,7 +449,7 @@
&lt;/div>
</code></pre>
<h3><code>.top-*</code></h3>
<h3><code>.top-</code></h3>
<div class="row top-xs">
<div class="col-xs-6">
@@ -426,7 +458,7 @@
<div class="col-xs-6">
<div class="box"></div>
</div>
</div>*default alignment
</div>
<pre><code>&lt;div class="row top-xs">
&lt;div class="col-xs-6">
&lt;div class="box">
@@ -436,7 +468,7 @@
&lt;/div>
</code></pre>
<h3><code>.middle-*</code></h3>
<h3><code>.middle-</code></h3>
<div class="row middle-xs">
<div class="col-xs-6">
@@ -455,7 +487,7 @@
&lt;/div>
</code></pre>
<h3><code>.bottom-*</code></h3>
<h3><code>.bottom-</code></h3>
<div class="row bottom-xs">
<div class="col-xs-6">
@@ -481,7 +513,7 @@
<h2>Distribution</h2>
<p>Add classes to distribute the contents of a row or column.</p>
<h3><code>.around-*</code></h3>
<h3><code>.around-</code></h3>
<div class="row">
<div class="col-xs-12">
@@ -519,7 +551,7 @@
&lt;/div>
</code></pre>
<h3><code>.between-*</code></h3>
<h3><code>.between-</code></h3>
<div class="row">
<div class="col-xs-12">
@@ -564,7 +596,7 @@
<h2>Reordering</h2>
<p>Add classes to reorder columns.</p>
<h3><code>.first-*</code></h3>
<h3><code>.first-</code></h3>
<div class="row">
<div class="col-xs-12">
@@ -611,7 +643,7 @@
&lt;/div>
</code></pre>
<h3><code>.last-*</code></h3>
<h3><code>.last-</code></h3>
<div class="row">
<div class="col-xs-12">

20
src/js/index.js
View File

@@ -11,23 +11,3 @@
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46683011-1', 'flexboxgrid.com');
ga('send', 'pageview');
(function() {
var config = {
kitId: 'nod8myc'
};
var d = false;
var tk = document.createElement('script');
tk.src = '//use.typekit.net/' + config.kitId + '.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (d || rs && rs != 'complete' && rs != 'loaded') return;
d = true;
try {
Typekit.load(config);
} catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})();