Skip to content

Commit 7fe5fd9

Browse files
author
mrmrs
committed
RESPONSIFY THE WEB
0 parents  commit 7fe5fd9

File tree

10 files changed

+330
-0
lines changed

10 files changed

+330
-0
lines changed

‎README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# FLUIDITY
2+
3+
### A fully responsive css framework that is impossibly small
4+
5+
HTML out of the box is almost 100% responsive.
6+
This stylesheet fixes that in 107 minified bytes.
7+
Let's make the web just a bit more responsive shall we?
8+
9+
## Installing fluidity
10+
11+
#### Production
12+
13+
Just include this file in the head of your html file.
14+
```
15+
<link rel="stylesheet" href="css/fluidity.min.css">
16+
```
17+
18+
#### Development
19+
20+
Or if you want to develop with the uncompressed version
21+
```
22+
<link rel="stylesheet" href="css/fluidity.css">
23+
```
24+
25+
## Available build tools
26+
27+
If you'd like to use the available build tools just run
28+
29+
```
30+
cd fluidity
31+
npm install -g gulp
32+
npm install
33+
gulp
34+
```
35+
36+
# License
37+
38+
The MIT License (MIT)
39+
40+
Copyright (c) 2014 @mrmrs
41+
42+
Permission is hereby granted, free of charge, to any person obtaining a copy
43+
of this software and associated documentation files (the "Software"), to deal
44+
in the Software without restriction, including without limitation the rights
45+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
46+
copies of the Software, and to permit persons to whom the Software is
47+
furnished to do so, subject to the following conditions:
48+
49+
The above copyright notice and this permission notice shall be included in
50+
all copies or substantial portions of the Software.
51+
52+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
53+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
54+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
55+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
56+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
57+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
58+
THE SOFTWARE.
59+

‎css/fluidity.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@charset "UTF-8";
2+
/* FLUIDITY v0.1.0 @mrmrs • http://mrmrs.cc MIT
3+
*/
4+
/*
5+
Responsive Utilities
6+
7+
*/
8+
img { max-width: 100%; }
9+
10+
/* Wrap tables or pre elements in a div with this class */
11+
.overflow-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

‎css/fluidity.min.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@charset "UTF-8";img{max-width:100%}.overflow-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}

‎gulpfile.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Load plugins
2+
3+
var gulp = require('gulp'),
4+
gutil = require('gulp-util'),
5+
watch = require('gulp-watch'),
6+
lr = require('tiny-lr'),
7+
server = lr(),
8+
livereload = require('gulp-livereload'),
9+
prefix = require('gulp-autoprefixer'),
10+
minifyCSS = require('gulp-minify-css'),
11+
sass = require('gulp-ruby-sass'),
12+
imagemin = require('gulp-imagemin'),
13+
svgmin = require('gulp-svgmin'),
14+
csslint = require('gulp-csslint');
15+
16+
17+
// Task to minify all css files in the css directory
18+
gulp.task('minify-css', function(){
19+
gulp.src('./css/*.css')
20+
.pipe(minifyCSS({keepSpecialComments: 0}))
21+
.pipe(gulp.dest('./css/'));
22+
});
23+
24+
// Reload html
25+
gulp.task('reload', function(){
26+
gulp.src('*.html')
27+
.pipe(watch(function(files) {
28+
return files.pipe(livereload(server));
29+
}));
30+
});
31+
32+
33+
// Task to optmize and minify images
34+
gulp.task('minify-img', function() {
35+
return gulp.src('./img/**/*')
36+
.pipe((imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
37+
.pipe(gulp.dest('./img'));
38+
});
39+
40+
// Task to optimize and minify svg
41+
gulp.task('minify-svg', function(){
42+
gulp.src('./img/svg')
43+
.pipe(svgmin())
44+
.pipe(gulp.dest('./img/svg'));
45+
});
46+
47+
48+
// Use csslint without box-sizing or compatible vendor prefixes (these
49+
// don't seem to be kept up to date on what to yell about)
50+
gulp.task('csslint', function(){
51+
gulp.src('./css/*.css')
52+
.pipe(csslint({
53+
'compatible-vendor-prefixes': false,
54+
'box-sizing': false,
55+
'important': false
56+
}))
57+
.pipe(csslint.reporter());
58+
59+
});
60+
61+
// Task that compiles scss files down to good old css
62+
gulp.task('pre-process', function(){
63+
gulp.src('./sass/fluidity.scss')
64+
.pipe(watch(function(files) {
65+
return files.pipe(sass({loadPath: ['./sass/'], style: "compact"}))
66+
.pipe(prefix())
67+
.pipe(gulp.dest('./css/'))
68+
.pipe(livereload(server));
69+
}));
70+
});
71+
72+
/*
73+
DEFAULT TASK
74+
75+
• Process sass and lints outputted css
76+
• Outputted css is run through autoprefixer
77+
• Sends updates to any files in directory to browser for
78+
automatic reloading
79+
80+
*/
81+
gulp.task('default', function(){
82+
server.listen(35729, function (err) {
83+
gulp.watch(['*.html', './sass/*.scss'], function(event) {
84+
gulp.run('reload', 'pre-process', 'csslint');
85+
});
86+
});
87+
});
88+
89+
gulp.task('production', function(){
90+
gulp.run('minify-css', 'minify-img', 'minify-svg');
91+
});
92+

‎index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>
6+
Fluidity
7+
</title>
8+
<meta name="author" content="@mrmrs">
9+
<meta name="description" content="Full-responsive css framework">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<link rel="stylesheet" href="css/fluidity.css">
12+
</head>
13+
<body>
14+
<div>
15+
<img src="http://placekitten.com/2400/400">
16+
<p>
17+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
18+
</p>
19+
</div>
20+
21+
<div class="overflow-container">
22+
<table>
23+
<thead >
24+
<tr>
25+
<th>First Name</th>
26+
<th>Last Name</th>
27+
<th>Birthday</th>
28+
<th>Favorite Food</th>
29+
<th>Favorite URL</th>
30+
<th>HEX</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr>
35+
<td>John</td>
36+
<td>Smith</td>
37+
<td>Tomorrow</td>
38+
<td>Pizza</td>
39+
<td>http://freepizza.com</td>
40+
<td>#ff0000</td>
41+
</tr>
42+
<tr>
43+
<td>John</td>
44+
<td>Smith</td>
45+
<td>Tomorrow</td>
46+
<td>Pizza</td>
47+
<td>http://freepizza.com</td>
48+
<td>#ff0000</td>
49+
</tr>
50+
<tr>
51+
<td>John</td>
52+
<td>Smith</td>
53+
<td>Tomorrow</td>
54+
<td>Pizza</td>
55+
<td>http://freepizza.com</td>
56+
<td>#ff0000</td>
57+
</tr>
58+
<tr>
59+
<td>John</td>
60+
<td>Smith</td>
61+
<td>Tomorrow</td>
62+
<td>Pizza</td>
63+
<td>http://freepizza.com</td>
64+
<td>#ff0000</td>
65+
</tr>
66+
<tr>
67+
<td>John</td>
68+
<td>Smith</td>
69+
<td>Tomorrow</td>
70+
<td>Pizza</td>
71+
<td>http://freepizza.com</td>
72+
<td>#ff0000</td>
73+
</tr>
74+
</tbody>
75+
</table>
76+
</div>
77+
78+
<div class="overflow-container">
79+
<pre>
80+
<code>
81+
# Add the strings before and after around each parm and print
82+
def surround(before, after, *items)
83+
items.each { |x| print before, x, after, "\n" }
84+
end
85+
86+
surround('[', ']', 'this', 'that', 'the other')
87+
print "\n"
88+
89+
surround('<', '>', 'Snakes', 'Turtles', 'Snails', 'Salamanders', 'Slugs',
90+
'Newts')
91+
print "\n"
92+
93+
def boffo(a, b, c, d)
94+
print "a = #{a} b = #{b}, c = #{c}, d = #{d}\n"
95+
end
96+
97+
# Use * to adapt between arrays and arguments
98+
a1 = ['snack', 'fast', 'junk', 'pizza']
99+
a2 = [4, 9]
100+
boffo(*a1)
101+
boffo(17, 3, *a2)
102+
</code>
103+
</pre>
104+
</div>
105+
</body>
106+
</html>

‎js/app.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
* app.js
3+
*
4+
* author:
5+
* license:
6+
*
7+
*/
8+
9+

‎js/min/app.js‎

Whitespace-only changes.

‎package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "fluidity",
3+
"version": "0.0.1",
4+
"description": "Worlds lightest-weight fully responsive css framework.",
5+
"repository" : {
6+
"type" : "git" ,
7+
"url" : "http://github.com/mrmrs/fluidity.git"
8+
},
9+
"devDependencies": {
10+
"gulp": "~3.5.5",
11+
"gulp-livereload": "~0.2.0",
12+
"gulp-minify-css": "~0.2.0",
13+
"tiny-lr": "0.0.5",
14+
"gulp-util": "~2.2.12",
15+
"gulp-watch": "~0.5.0",
16+
"gulp-csslint": "~0.1.3",
17+
"gulp-imagemin": "~0.1.4",
18+
"gulp-svgmin": "~0.4.1",
19+
"gulp-autoprefixer": "0.0.5",
20+
"gulp-ruby-sass": "~0.3.1"
21+
},
22+
"author": {
23+
"name" : "@mrmrs",
24+
"email" : "hi@mrmrs.cc",
25+
"url" : "http://mrmrs.cc"
26+
},
27+
"license": "MIT"
28+
}

‎sass/_responsive-utilities.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
3+
Responsive Utilities
4+
5+
*/
6+
7+
img { max-width: 100%; }
8+
9+
10+
/* Wrap tables or pre elements in a div with this class */
11+
12+
.overflow-container {
13+
overflow-y: scroll;
14+
-webkit-overflow-scrolling: touch;
15+
}
16+

‎sass/fluidity.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/*
2+
FLUIDITY v0.1.0
3+
@mrmrs • http://mrmrs.cc
4+
MIT
5+
*/
6+
7+
@import "responsive-utilities";
8+

0 commit comments

Comments
 (0)