skopp

CSS Frameworks Comparison

TL;DR

If I should pick only one framework for all my projects, both prototyping and production, I would go with either Bootstrap or Foundation and then improve them depending on my needs, eventually by using nice ideas from other frameworks. Since I'm a LESS user, I will probably go with Bootstrap, but if Foundation would have been build with LESS too, I would have been in deep s****.

Players

• Bootstrap: http://twitter.github.com/bootstrap (in version 3.0)
• Foundation: http://foundation.zurb.com

skopp

section {
	padding-top: 60px;	
}

.subnav {
	margin-bottom: 60px;
	width: 100%;
	height: 36px;
	background-color: #eeeeee; /* Old browsers */
	background-repeat: repeat-x; /* Repeat the gradient */

skopp

substack : tweet-button $ browserify -t brfs main.js 
;(function(e,t,n,r){function i(r){if(!n[r]){if(!t[r]){if(e)return e(r);throw new Error("Cannot find module '"+r+"'")}var s=n[r]={exports:{}};t[r][0](function(e){var n=t[r][1][e];return i(n?n:e)},s,s.exports)}return n[r].exports}for(var s=0;s<r.length;s++)i(r[s]);return i})(typeof require!=="undefined"&&require,{1:[function(require,module,exports){var fs = require('fs');
var img = "iVBORw0KGgoAAAANSUhEUgAAACwAAAAlCAYAAAA5iwvJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAJpAAACaQBOMpC7QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQeSURBVFiFzdhZqFVVHMfxz7rd5nk12ZxCIhVSSUmRTUQ0oBVbISqLkF6aKEgKekkqBCNKKOih6S0ytgVRkkSWNFBREEVJoyKSKe7mAVNXD2ufOvd47jnnds699YXDPvz3f63922sv/sMKKSUTRSirYVyMOdiKZ3AU3sQPqYi/dBm7Y3iChJ6KG2qh3+PE+tZvuAPP48JQVnekIj7WMvYQLMBwKuJ9obHCoawW4oNUxNcGKPRwLMNZo7g8h3n1SxxY25ZhFabiPEzH2zg/FfHPZsEfyW8+LxXx+QGInYYVOK6D23oc3WWqNTgnFXEThJSSUFZHYEPt8AcuSkV8ow+xU/A+4r+do0nseamIG0NZ7YM4VN9o/mR7YEUoq0v7eND1+he7A69jSSirD/EDZjZWeBLOxY2YVQ/YhgexOBXxx7E8KZTVV5jSp+

skopp

pagelet

tries to provide a way to use NPM to distribute web components with as little abstraction as possible

• uses plain index.js, style.css, index.html etc
• works in multiple environments

example (intentionally verbose)

consider a module called 'simple-button':

skopp

substack : tweet-button $ browserify -t brfs main.js 
;(function(e,t,n,r){function i(r){if(!n[r]){if(!t[r]){if(e)return e(r);throw new Error("Cannot find module '"+r+"'")}var s=n[r]={exports:{}};t[r][0](function(e){var n=t[r][1][e];return i(n?n:e)},s,s.exports)}return n[r].exports}for(var s=0;s<r.length;s++)i(r[s]);return i})(typeof require!=="undefined"&&require,{1:[function(require,module,exports){var fs = require('fs');
var img = "iVBORw0KGgoAAAANSUhEUgAAACwAAAAlCAYAAAA5iwvJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAJpAAACaQBOMpC7QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQeSURBVFiFzdhZqFVVHMfxz7rd5nk12ZxCIhVSSUmRTUQ0oBVbISqLkF6aKEgKekkqBCNKKOih6S0ytgVRkkSWNFBREEVJoyKSKe7mAVNXD2ufOvd47jnnds699YXDPvz3f63922sv/sMKKSUTRSirYVyMOdiKZ3AU3sQPqYi/dBm7Y3iChJ6KG2qh3+PE+tZvuAPP48JQVnekIj7WMvYQLMBwKuJ9obHCoawW4oNUxNcGKPRwLMNZo7g8h3n1SxxY25ZhFabiPEzH2zg/FfHPZsEfyW8+LxXx+QGInYYVOK6D23oc3WWqNTgnFXEThJSSUFZHYEPt8AcuSkV8ow+xU/A+4r+do0nseamIG0NZ7YM4VN9o/mR7YEUoq0v7eND1+he7A69jSSirD/EDZjZWeBLOxY2YVQ/YhgexOBXxx7E8KZTVV5jSp+

skopp

var url = require('url')
var websocket = require('websocket-stream')
var engine = require('voxel-engine')
var duplexEmitter = require('duplex-emitter')
console.log('starting', 1)
var socket = websocket('ws://' + url.parse(window.location.href).host)


var emitter = duplexEmitter(socket)

skopp

var url = require('url')
var websocket = require('websocket-stream')
var engine = require('voxel-engine')
var duplexEmitter = require('duplex-emitter')
console.log('starting', 1)
var socket = websocket('ws://' + url.parse(window.location.href).host)


var emitter = duplexEmitter(socket)

skopp

//// Google John is a toilet that reads data from your waste matter and returns relevant ads in Web History!
/// Works with Google Nose Beta! 
// Google Nose Beta will intensify the aroma of the house you built by a whoppin 4%!

/////
// *F*A*Q*
// "BULL!" you say?
// We sh## you not
//"ETA?"
//Does the pope cr@/o in the woods?

skopp

<div class="cont">
  
  <div class="frame1"></div>
  <div class="frame2"></div>
  
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>

skopp

--animated matrix rain by joão colombo: http://joaocolombo.com using corona sdk: http://www.anscamobile.com/corona/

display.setStatusBar(display.HiddenStatusBar) --hide status bar

--make a black background
local background = display.newRect(0,0,display.contentWidth,display.contentHeight);
background:setFillColor(0,0,0);

--function to generate a number 
function generateNumber()