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

Removing rework because myth added custom media

Browse Source
This commit is contained in:
Kristofer Joseph
2015-01-01 16:26:49 -08:00
parent 94c309eb2a
commit 4e3f953279
9 changed files with 41 additions and 935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
Gruntfile.js
View File

@@ -1,5 +1,4 @@
/*global module:false*/
var reworkCustomMedia = require('rework-custom-media');
module.exports = function(grunt) {
@@ -18,29 +17,10 @@ module.exports = function(grunt) {
}
}
},
rework: {
compile: {
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.css'
},
release: {
files: {
'src/css/flexboxgrid.css': 'src/css/flexboxgrid.css'
}
},
options: {
use: [
reworkCustomMedia
]
}
},
cssmin: {
concat: {
files: {
'css/index.css': ['vendor/css/normalize.css', 'src/css/style.css', 'src/css/flexboxgrid.css']
'css/index.css': ['vendor/css/normalize.css', 'src/css/style.css', 'dist/flexboxgrid.css']
}
},
minify: {
@@ -107,7 +87,6 @@ module.exports = function(grunt) {
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-myth');
grunt.loadNpmTasks('grunt-rework');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
@@ -115,9 +94,9 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// Default task.
grunt.registerTask('default', ['cssmin:concat',
'rework',
grunt.registerTask('default', [
'myth',
'cssmin:concat',
'cssmin:minify',
'cssmin:release',
'uglify',

871
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

6
dist/flexboxgrid.css vendored
View File

@@ -330,7 +330,7 @@
order: 1;
}
@media only screen and ( min-width: 48em ) {
@media only screen and (min-width: 48em) {
.container {
width: 46rem;
}
@@ -597,7 +597,7 @@
}
}
@media only screen and ( min-width: 62em ) {
@media only screen and (min-width: 62em) {
.container {
width: 61rem;
}
@@ -864,7 +864,7 @@
}
}
@media only screen and ( min-width: 75em ) {
@media only screen and (min-width: 75em) {
.container {
width: 71rem;
}

22
index.html
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@@ -30,8 +30,6 @@
"grunt-contrib-uglify": "^0.2.7",
"grunt-contrib-watch": "^0.5.3",
"grunt-myth": "^0.3.1",
"grunt-processhtml": "^0.2.9",
"grunt-rework": "^0.1.0",
"rework-custom-media": "^0.2.0"
"grunt-processhtml": "^0.2.9"
}
}

10
src/css/flexboxgrid.css
View File

@@ -18,11 +18,9 @@
*
*/
@custom-media --sm-viewport only screen and ( min-width: 48em );
@custom-media --md-viewport only screen and ( min-width: 62em );
@custom-media --lg-viewport only screen and ( min-width: 75em );
@custom-media --sm-viewport only screen and (min-width: 48em);
@custom-media --md-viewport only screen and (min-width: 62em);
@custom-media --lg-viewport only screen and (min-width: 75em);
.container-fluid {
margin-right: auto;
@@ -819,4 +817,4 @@
.last-lg {
order: 1;
}
}
}

4
src/css/style.css
View File

@@ -69,7 +69,7 @@ code {
}
.wrap {
box-sizing: border-box;
max-width: 75%;
max-width: 1200px;
margin: 0 auto;
}
.page-section {
@@ -231,7 +231,7 @@ code {
.box-large {
height: 8rem;
}
.container {
.box-container {
box-sizing: border-box;
padding: 0.5rem;
}

30
src/index.html
View File

@@ -34,7 +34,7 @@
</header>
<div class="wrap">
<div class="wrap container-fluid">
<a name="responsive"></a>
<section class="page-section">
<h2>Responsive</h2>
@@ -264,10 +264,10 @@
<p>Nest grids inside grids inside grids.</p>
<div class="row">
<div class="col-xs-7">
<div class="box container">
<div class="box box-container">
<div class="row">
<div class="col-xs-9">
<div class="box-first container">
<div class="box-first box-container">
<div class="row">
<div class="col-xs-4">
<div class="box-nested"></div>
@@ -279,7 +279,7 @@
</div>
</div>
<div class="col-xs-3">
<div class="box-first container">
<div class="box-first box-container">
<div class="row">
<div class="col-xs">
<div class="box-nested"></div>
@@ -291,10 +291,10 @@
</div>
</div>
<div class="col-xs-5">
<div class="box container">
<div class="box box-container">
<div class="row">
<div class="col-xs-12">
<div class="box-first container">
<div class="box-first box-container">
<div class="row">
<div class="col-xs-6">
<div class="box-nested"></div>
@@ -333,7 +333,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row start-xs">
<div class="col-xs-6">
<div class="box-nested"></div>
@@ -356,7 +356,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row center-xs">
<div class="col-xs-6">
<div class="box-nested"></div>
@@ -378,7 +378,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row end-xs">
<div class="col-xs-6">
<div class="box-nested"></div>
@@ -399,7 +399,7 @@
<p>Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes. </p>
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row center-xs end-sm start-lg">
<div class="col-xs-6">
<div class="box-nested"></div>
@@ -485,7 +485,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row around-xs">
<div class="col-xs-2">
<div class="box-nested"></div>
@@ -523,7 +523,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row between-xs">
<div class="col-xs-2">
<div class="box-nested"></div>
@@ -568,7 +568,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row">
<div class="col-xs-2">
<div class="box-first">1</div>
@@ -615,7 +615,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row">
<div class="col-xs-2 last-xs">
<div class="box-nested">1</div>
@@ -668,7 +668,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box container">
<div class="box box-container">
<div class="row reverse">
<div class="col-xs-2">
<div class="box-nested">1</div>