├── .gitignore
├── README.md
├── compositor.json
├── css
├── fluidity.css
└── fluidity.min.css
├── gulpfile.js
├── index.html
├── package.json
└── sass
├── _responsive-utilities.scss
└── fluidity.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache/
2 | node_modules/
3 | npm-debug.log
4 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # FLUIDITY
2 |
3 | ### A fully responsive css framework that is impossibly small
4 |
5 | HTML is almost 100% responsive out of the box.
6 | This stylesheet patches the remaining holes to get to 100% and in just 247 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 the fluidity css file in the head of your html file:
14 | ```html
15 |
16 | ```
17 |
18 | For elements that need to retain widths that might be wider than a device's
19 | viewport (i.e tables), wrap them in a div with the class 'overflow-container'
20 | like so:
21 | ```html
22 |
23 |
24 | ...
25 |
26 |
27 | ```
28 |
29 | #### Development
30 |
31 | If you want to develop with the uncompressed version, include instead:
32 | ```html
33 |
34 | ```
35 |
36 | ## Available build / dev tools
37 |
38 | If you'd like to use the available build tools just run:
39 | ```
40 | cd fluidity
41 | npm install -g gulp
42 | npm install
43 | gulp
44 | ```
45 |
46 | ## Gulp Tasks
47 |
48 | Gulp is a JavaScript task runner.
49 | http://gulpjs.com
50 |
51 | There are a few common tasks that gulp takes care of here:
52 | * Livereload
53 | * CSS minification
54 | * Autoprefixer
55 | * Sass
56 | * Lints the compiled css
57 |
58 | Run these from the root directory of the project. The command
59 | ```
60 | gulp
61 | ```
62 | runs a live reload server and starts sass compilation while running csslint, while
63 | ```
64 | gulp production
65 | ```
66 | also minifies the css.
67 |
68 |
69 | # License
70 |
71 | The MIT License (MIT)
72 |
73 | Copyright (c) 2014 @mrmrs
74 |
75 | Permission is hereby granted, free of charge, to any person obtaining a copy
76 | of this software and associated documentation files (the "Software"), to deal
77 | in the Software without restriction, including without limitation the rights
78 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
79 | copies of the Software, and to permit persons to whom the Software is
80 | furnished to do so, subject to the following conditions:
81 |
82 | The above copyright notice and this permission notice shall be included in
83 | all copies or substantial portions of the Software.
84 |
85 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
86 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
87 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
88 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
89 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
90 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
91 | THE SOFTWARE.
92 |
--------------------------------------------------------------------------------
/compositor.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mrmrs/fluidity",
3 | "version": "0.1.3",
4 | "libraries": {
5 | "xv": "^1.0.23"
6 | },
7 | "title": "Fluidity",
8 | "branch": "gh-pages",
9 | "style": {
10 | "fontFamily": "\"Avenir Next\", Helvetica, sans-serif",
11 | "fontWeight": 400,
12 | "bold": 400,
13 | "lineHeight": 1.625,
14 | "typeScale": [
15 | 40,
16 | 30,
17 | 25,
18 | 20,
19 | 15,
20 | 12,
21 | 10
22 | ],
23 | "heading": {
24 | "fontFamily": null,
25 | "fontStyle": null,
26 | "fontWeight": 600,
27 | "lineHeight": 1.25,
28 | "textTransform": null,
29 | "letterSpacing": "0.15625em",
30 | "h0": {},
31 | "h1": {},
32 | "h2": {},
33 | "h3": {},
34 | "h4": {},
35 | "h5": {},
36 | "h6": {}
37 | },
38 | "alternativeText": {},
39 | "space": [
40 | 0,
41 | 6,
42 | 12,
43 | 18,
44 | 24,
45 | 30,
46 | 36
47 | ],
48 | "layout": {
49 | "maxWidth": 1024,
50 | "centered": false
51 | },
52 | "colors": {
53 | "text": "#000000",
54 | "background": "#eee",
55 | "inverted": "#fff",
56 | "primary": "#08e",
57 | "secondary": "#0e8",
58 | "highlight": "#e08",
59 | "border": "#ddd",
60 | "muted": "#eee"
61 | },
62 | "border": {
63 | "width": 1,
64 | "radius": 2
65 | },
66 | "link": {},
67 | "button": {},
68 | "input": {},
69 | "body": {
70 | "margin": 0
71 | }
72 | },
73 | "content": [
74 | {
75 | "component": "section/BasicSection",
76 | "heading": "fluidity",
77 | "subhead": "The worlds smallest fully-responsive css framework",
78 | "links": [
79 | {
80 | "text": "Tweet",
81 | "href": "https://twitter.com/intent/tweet?text=fluidity%253A%2520The%2520worlds%2520smallest%2520fully-responsive%2520css%2520framework&url=http%253A%252F%252Ffluidity.sexy"
82 | }
83 | ],
84 | "text": "v0.2.0"
85 | },
86 | {
87 | "component": "article/BasicArticle",
88 | "text": "
FLUIDITY
\n
A fully responsive css framework that is impossibly small
\n
HTML is almost 100% responsive out of the box.\nThis stylesheet patches the remaining holes to get to 100% and in just 247 minified bytes.\nLet's make the web just a bit more responsive shall we?
\n
Installing fluidity
\n
Production
\n
Just include the fluidity css file in the head of your html file:
For elements that need to retain widths that might be wider than a device's\nviewport (i.e tables), wrap them in a div with the class 'overflow-container'\nlike so:
There are a few common tasks that gulp takes care of here:
\n
\n
Livereload
\n
CSS minification
\n
Autoprefixer
\n
Sass
\n
Lints the compiled css
\n
\n
Run these from the root directory of the project. The command
\n
gulp\n
runs a live reload server and starts sass compilation while running csslint, while
\n
gulp production\n
also minifies the css.
\n
License
\n
The MIT License (MIT)
\n
Copyright (c) 2014 @mrmrs
\n
Permission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:
\n
The above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.
\n
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.
\n",
89 | "html": "
FLUIDITY
\n
A fully responsive css framework that is impossibly small
\n
HTML is almost 100% responsive out of the box.\nThis stylesheet patches the remaining holes to get to 100% and in just 247 minified bytes.\nLet's make the web just a bit more responsive shall we?
\n
Installing fluidity
\n
Production
\n
Just include the fluidity css file in the head of your html file:
For elements that need to retain widths that might be wider than a device's\nviewport (i.e tables), wrap them in a div with the class 'overflow-container'\nlike so:
There are a few common tasks that gulp takes care of here:
\n
\n
Livereload
\n
CSS minification
\n
Autoprefixer
\n
Sass
\n
Lints the compiled css
\n
\n
Run these from the root directory of the project. The command
\n
gulp\n
runs a live reload server and starts sass compilation while running csslint, while
\n
gulp production\n
also minifies the css.
\n
License
\n
The MIT License (MIT)
\n
Copyright (c) 2014 @mrmrs
\n
Permission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:
\n
The above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.
\n
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.
\n"
90 | },
91 | {
92 | "component": "footer/BasicFooter",
93 | "links": [
94 | {
95 | "href": "https://github.com/mrmrs/fluidity",
96 | "text": "GitHub"
97 | },
98 | {
99 | "href": "https://github.com/mrmrs",
100 | "text": "mrmrs"
101 | }
102 | ]
103 | }
104 | ]
105 | }
--------------------------------------------------------------------------------
/css/fluidity.css:
--------------------------------------------------------------------------------
1 | /*
2 | FLUIDITY v0.1.0
3 | @mrmrs - http://mrmrs.cc
4 | MIT
5 | */
6 | /*
7 |
8 | Responsive Utilities
9 |
10 | */
11 | img, canvas, iframe, video, svg, select, textarea {
12 | max-width: 100%; }
13 |
14 | /* Wrap tables or pre elements in a div with this class */
15 | .overflow-container {
16 | overflow-x: scroll; }
17 |
18 | /*
19 | Aspect ratios for media objects i.e canvas, iframe, video, svg etc.
20 | Defaults to 16x9
21 | */
22 | .aspect-ratio {
23 | height: 0;
24 | padding-top: 56.25%;
25 | position: relative; }
26 |
27 | .aspect-ratio--object {
28 | height: 100%;
29 | position: absolute;
30 | top: 0;
31 | right: 0;
32 | bottom: 0;
33 | left: 0;
34 | width: 100%;
35 | z-index: 100; }
36 |
--------------------------------------------------------------------------------
/css/fluidity.min.css:
--------------------------------------------------------------------------------
1 | canvas,iframe,img,select,svg,textarea,video{max-width:100%}.overflow-container{overflow-x:scroll}.aspect-ratio{height:0;padding-top:56.25%;position:relative}.aspect-ratio--object{height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;z-index:100}
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | // Load plugins
2 |
3 | var gulp = require('gulp'),
4 | gutil = require('gulp-util'),
5 | watch = require('gulp-watch'),
6 | prefix = require('gulp-autoprefixer'),
7 | uncss = require('gulp-uncss'),
8 | minifyCSS = require('gulp-minify-css'),
9 | sass = require('gulp-sass'),
10 | size = require('gulp-size'),
11 | rename = require('gulp-rename'),
12 | csslint = require('gulp-csslint'),
13 | imagemin = require('gulp-imagemin'),
14 | pngcrush = require('imagemin-pngcrush'),
15 | jshint = require('gulp-jshint'),
16 | stylish = require('jshint-stylish'),
17 | shell = require('gulp-shell'),
18 | browserSync = require('browser-sync'),
19 | header = require('gulp-header');
20 | browserReload = browserSync.reload;
21 |
22 | /* MINIFY CSS
23 | Run this in the root directory of the project with
24 | gulp minify-css
25 | Will output minified filesize both with and without gzip
26 | */
27 |
28 | gulp.task('minify-css', function(){
29 | gulp.src('./css/fluidity.css') // set this to the file(s) you want to minify.
30 | .pipe(minifyCSS())
31 | .pipe(size({gzip: false, showFiles: true, title:'minified css'}))
32 | .pipe(size({gzip: true, showFiles: true, title:'minified css'}))
33 | .pipe(header('/*!mrmrs/fluidity v<%= pkg.version %> (c)2014 @license <%= pkg.license %>')
34 | .pipe(rename('fluidity.min.css'))
35 | .pipe(gulp.dest('./css/'));
36 | });
37 |
38 |
39 | /*
40 | IMAGE MINIFICATION
41 | This will minify all images in the img directory. Run with
42 | gulp minify-images
43 | */
44 |
45 | gulp.task('minify-images', function(){
46 | gulp.src('./img/*')
47 | .pipe(size({gzip: false, showFiles: true, title:'original image size'}))
48 | .pipe(size({gzip: true, showFiles: true, title:'original image size'}))
49 | .pipe(imagemin({
50 | progressive: true,
51 | svgoPlugins: [{removeViewBox: false}],
52 | use: [pngcrush()]
53 | }))
54 | .pipe(size({gzip: false, showFiles: true, title:'minified images'}))
55 | .pipe(size({gzip: true, showFiles: true, title:'minified images'}))
56 | .pipe(gulp.dest('./img')); // change the dest if you don't want your images overwritten
57 | });
58 |
59 | // JS Hint that code
60 | // Run this in the root directory of the project with `gulp js-hint`
61 | gulp.task('js-hint', function(){
62 | gulp.src('./js/*.js')
63 | .pipe(jshint())
64 | .pipe(jshint.reporter('stylish'));
65 | });
66 |
67 | // Use csslint without box-sizing or compatible vendor prefixes (these
68 | // don't seem to be kept up to date on what to yell about)
69 | gulp.task('csslint', function(){
70 | gulp.src('./css/fluidity.css')
71 | .pipe(csslint({
72 | 'compatible-vendor-prefixes': false,
73 | 'box-sizing': false,
74 | 'important': false,
75 | 'known-properties': false
76 | }))
77 | .pipe(csslint.reporter());
78 | });
79 |
80 | // Task that compiles scss files down to good old css
81 | gulp.task('pre-process', function(){
82 | gulp.src('./sass/fluidity.scss')
83 | .pipe(watch(function(files) {
84 | return files.pipe(sass())
85 | .pipe(size({gzip: false, showFiles: true, title:'without vendor prefixes'}))
86 | .pipe(size({gzip: true, showFiles: true, title:'without vendor prefixes'}))
87 | .pipe(prefix())
88 | .pipe(size({gzip: false, showFiles: true, title:'after vendor prefixes'}))
89 | .pipe(size({gzip: true, showFiles: true, title:'after vendor prefixes'}))
90 | .pipe(gulp.dest('css'))
91 | .pipe(browserSync.reload({stream:true}));
92 | }));
93 | });
94 |
95 | // Initialize browser-sync which starts a static server also allows for
96 | // browsers to reload on filesave
97 | gulp.task('browser-sync', function() {
98 | browserSync.init(null, {
99 | server: {
100 | baseDir: "./"
101 | }
102 | });
103 | });
104 |
105 | // Function to call for reloading browsers
106 | gulp.task('bs-reload', function () {
107 | browserSync.reload();
108 | });
109 |
110 | /*
111 | DEFAULT TASK
112 |
113 | • Process sass then auto-prefixes and lints outputted css
114 | • Starts a server on port 3000
115 | • Reloads browsers when you change html or sass files
116 |
117 | */
118 | gulp.task('default', ['pre-process', 'minify-css', 'bs-reload', 'browser-sync'], function(){
119 | gulp.start('pre-process', 'csslint');
120 | gulp.watch('sass/*.scss', ['pre-process', 'minify-css']);
121 | gulp.watch('css/fluidity.css', ['bs-reload', 'minify-css']);
122 | gulp.watch('*.html', ['bs-reload']);
123 | });
124 |
125 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Fluidity
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum has been the industry's standard dummy text ever
18 | since the 1500s, when an unknown printer took a galley of type and
19 | scrambled it to make a type specimen book. It has survived not only
20 | five centuries, but also the leap into electronic typesetting,
21 | remaining essentially unchanged. It was popularised in the 1960s with
22 | the release of Letraset sheets containing Lorem Ipsum passages, and
23 | more recently with desktop publishing software like Aldus PageMaker
24 | including versions of Lorem Ipsum.
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
First Name
33 |
Last Name
34 |
Birthday
35 |
Favorite Food
36 |
Favorite URL
37 |
HEX
38 |
39 |
40 |
41 |
42 |
John
43 |
Smith
44 |
Tomorrow
45 |
Pizza
46 |
http://freepizza.com
47 |
#ff0000
48 |
49 |
50 |
John
51 |
Smith
52 |
Tomorrow
53 |
Pizza
54 |
http://freepizza.com
55 |
#ff0000
56 |
57 |
58 |
John
59 |
Smith
60 |
Tomorrow
61 |
Pizza
62 |
http://freepizza.com
63 |
#ff0000
64 |
65 |
66 |
John
67 |
Smith
68 |
Tomorrow
69 |
Pizza
70 |
http://freepizza.com
71 |
#ff0000
72 |
73 |
74 |
John
75 |
Smith
76 |
Tomorrow
77 |
Pizza
78 |
http://freepizza.com
79 |
#ff0000
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | # Add the strings before and after around each parm and print
89 | def surround(before, after, *items)
90 | items.each { |x| print before, x, after, "\n" }
91 | end
92 |
93 | surround('[', ']', 'this', 'that', 'the other')
94 | print "\n"
95 |
96 | surround('<', '>', 'Snakes', 'Turtles', 'Snails', 'Salamanders', 'Slugs',
97 | 'Newts')
98 | print "\n"
99 |
100 | def boffo(a, b, c, d)
101 | print "a = #{a} b = #{b}, c = #{c}, d = #{d}\n"
102 | end
103 |
104 | # Use * to adapt between arrays and arguments
105 | a1 = ['snack', 'fast', 'junk', 'pizza']
106 | a2 = [4, 9]
107 | boffo(*a1)
108 | boffo(17, 3, *a2)
109 |
110 |