RESPONSIFY THE WEB

README.md

@@ -0,0 +1,59 @@
+# FLUIDITY
+
+### A fully responsive css framework that is impossibly small
+
+HTML out of the box is almost 100% responsive.
+This stylesheet fixes that in 107 minified bytes.
+Let's make the web just a bit more responsive shall we?
+
+## Installing fluidity
+
+#### Production
+
+Just include this file in the head of your html file.
+```
+<link rel="stylesheet" href="css/fluidity.min.css">
+```
+
+#### Development
+
+Or if you want to develop with the uncompressed version
+```
+<link rel="stylesheet" href="css/fluidity.css">
+```
+
+## Available build tools
+
+If you'd like to use the available build tools just run
+
+```
+cd fluidity
+npm install -g gulp
+npm install
+gulp
+```
+
+# License
+
+The MIT License (MIT)
+
+Copyright (c) 2014 @mrmrs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

css/fluidity.css

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+/* FLUIDITY v0.1.0 @mrmrs • http://mrmrs.cc MIT
+*/
+/*
+ Responsive Utilities
+
+*/
+img { max-width: 100%; }
+
+/* Wrap tables or pre elements in a div with this class */
+.overflow-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

css/fluidity.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";img{max-width:100%}.overflow-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}

gulpfile.js

@@ -0,0 +1,92 @@
+// Load plugins
+
+var gulp = require('gulp'),
+    gutil = require('gulp-util'),
+    watch = require('gulp-watch'),
+    lr    = require('tiny-lr'),
+    server = lr(),
+    livereload = require('gulp-livereload'),
+    prefix = require('gulp-autoprefixer'),
+    minifyCSS = require('gulp-minify-css'),
+    sass = require('gulp-ruby-sass'),
+    imagemin = require('gulp-imagemin'),
+    svgmin = require('gulp-svgmin'),
+    csslint = require('gulp-csslint');
+
+
+// Task to minify all css files in the css directory
+gulp.task('minify-css', function(){
+  gulp.src('./css/*.css')
+    .pipe(minifyCSS({keepSpecialComments: 0}))
+    .pipe(gulp.dest('./css/'));
+});
+
+// Reload html
+gulp.task('reload', function(){
+  gulp.src('*.html')
+    .pipe(watch(function(files) {
+      return files.pipe(livereload(server));
+    }));
+});
+
+
+// Task to optmize and minify images
+gulp.task('minify-img', function() {
+  return gulp.src('./img/**/*')
+    .pipe((imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
+    .pipe(gulp.dest('./img'));
+});
+
+// Task to optimize and minify svg
+gulp.task('minify-svg', function(){
+  gulp.src('./img/svg')
+          .pipe(svgmin())
+          .pipe(gulp.dest('./img/svg'));
+});
+
+
+// Use csslint without box-sizing or compatible vendor prefixes (these
+// don't seem to be kept up to date on what to yell about)
+gulp.task('csslint', function(){
+  gulp.src('./css/*.css')
+    .pipe(csslint({
+          'compatible-vendor-prefixes': false,
+          'box-sizing': false,
+          'important': false
+        }))
+    .pipe(csslint.reporter());
+
+});
+
+// Task that compiles scss files down to good old css
+gulp.task('pre-process', function(){
+  gulp.src('./sass/fluidity.scss')
+      .pipe(watch(function(files) {
+        return files.pipe(sass({loadPath: ['./sass/'], style: "compact"}))
+          .pipe(prefix())
+          .pipe(gulp.dest('./css/'))
+          .pipe(livereload(server));
+      }));
+});
+
+/*
+   DEFAULT TASK
+
+ • Process sass and lints outputted css
+ • Outputted css is run through autoprefixer
+ • Sends updates to any files in directory to browser for
+   automatic reloading
+
+*/
+gulp.task('default', function(){
+  server.listen(35729, function (err) {
+    gulp.watch(['*.html', './sass/*.scss'], function(event) {
+      gulp.run('reload', 'pre-process', 'csslint');
+    });
+  });
+});
+
+gulp.task('production', function(){
+    gulp.run('minify-css', 'minify-img', 'minify-svg');
+});
+

index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>
+      Fluidity
+    </title>
+    <meta name="author" content="@mrmrs">
+    <meta name="description" content="Full-responsive css framework">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/fluidity.css">
+  </head>
+  <body>
+    <div>
+      <img src="http://placekitten.com/2400/400">
+      <p>
+        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.
+      </p>
+    </div>
+
+    <div class="overflow-container">
+      <table>
+        <thead >
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Birthday</th>
+            <th>Favorite Food</th>
+            <th>Favorite URL</th>
+            <th>HEX</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>John</td>
+            <td>Smith</td>
+            <td>Tomorrow</td>
+            <td>Pizza</td>
+            <td>http://freepizza.com</td>
+            <td>#ff0000</td>
+          </tr>
+          <tr>
+            <td>John</td>
+            <td>Smith</td>
+            <td>Tomorrow</td>
+            <td>Pizza</td>
+            <td>http://freepizza.com</td>
+            <td>#ff0000</td>
+          </tr>
+          <tr>
+            <td>John</td>
+            <td>Smith</td>
+            <td>Tomorrow</td>
+            <td>Pizza</td>
+            <td>http://freepizza.com</td>
+            <td>#ff0000</td>
+          </tr>
+          <tr>
+            <td>John</td>
+            <td>Smith</td>
+            <td>Tomorrow</td>
+            <td>Pizza</td>
+            <td>http://freepizza.com</td>
+            <td>#ff0000</td>
+          </tr>
+          <tr>
+            <td>John</td>
+            <td>Smith</td>
+            <td>Tomorrow</td>
+            <td>Pizza</td>
+            <td>http://freepizza.com</td>
+            <td>#ff0000</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="overflow-container">
+      <pre>
+        <code>
+# Add the strings before and after around each parm and print
+def surround(before, after, *items)
+    items.each { |x| print before, x, after, "\n" }
+end
+
+surround('[', ']', 'this', 'that', 'the other')
+print "\n"
+
+surround('<', '>', 'Snakes', 'Turtles', 'Snails', 'Salamanders', 'Slugs',
+        'Newts')
+print "\n"
+
+def boffo(a, b, c, d)
+    print "a = #{a} b = #{b}, c = #{c}, d = #{d}\n"
+end
+
+# Use * to adapt between arrays and arguments
+a1 = ['snack', 'fast', 'junk', 'pizza']
+a2 = [4, 9]
+boffo(*a1)
+boffo(17, 3, *a2)
+        </code>
+      </pre>
+    </div>
+  </body>
+</html>

js/app.js

@@ -0,0 +1,9 @@
+/*
+ * app.js
+ *
+ * author:
+ * license:
+ *
+ */
+
+

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "fluidity",
+  "version": "0.0.1",
+  "description": "Worlds lightest-weight fully responsive css framework.",
+  "repository" : {
+    "type" : "git" ,
+    "url" : "http://github.com/mrmrs/fluidity.git"
+  },
+  "devDependencies": {
+    "gulp": "~3.5.5",
+    "gulp-livereload": "~0.2.0",
+    "gulp-minify-css": "~0.2.0",
+    "tiny-lr": "0.0.5",
+    "gulp-util": "~2.2.12",
+    "gulp-watch": "~0.5.0",
+    "gulp-csslint": "~0.1.3",
+    "gulp-imagemin": "~0.1.4",
+    "gulp-svgmin": "~0.4.1",
+    "gulp-autoprefixer": "0.0.5",
+    "gulp-ruby-sass": "~0.3.1"
+  },
+  "author": {
+    "name" : "@mrmrs",
+    "email" : "hi@mrmrs.cc",
+    "url" : "http://mrmrs.cc"
+   },
+  "license": "MIT"
+}

sass/_responsive-utilities.scss

@@ -0,0 +1,16 @@
+/*
+
+  Responsive Utilities
+
+*/
+
+img { max-width: 100%; }
+
+
+/* Wrap tables or pre elements in a div with this class */
+
+.overflow-container {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+

sass/fluidity.scss

@@ -0,0 +1,8 @@
+/*
+  FLUIDITY v0.1.0
+  @mrmrs • http://mrmrs.cc
+  MIT
+*/
+
+@import "responsive-utilities";
+