Shawn Sandy shawnsandy

Flexbox Responsive Grid Playground

I'm playing with flexbox to build a future proof fluid and responsive grid system.

Flexbox is AWESOME on this task because it do every single thing a grid user need:

fluid columns with fluid gutters;
fluid columns with fixed gutters;
fixed columns with fluid gutters;
fixed columns and fluid columns on the same row;
nested grids with or without side gutters;

Blurred Background CSS

While waiting for the official property, the trick is to create blurred version of the background, and set the background property both of them (main body background and box that want to be blurred) to be cover sized and fixed.

Forked from Rian Ariona's Pen Blurred Background CSS.

A Pen by Shawn Sandy on CodePen.

License.

Experimental Flexbox Grid

Using flexbox for a simple, responsive grid. Default columns take up equal space while column span classes allow for common widths of combined columns. (Halves, thirds, quarters, fifths.)

Forked from Mike Aparicio's Pen Experimental Flexbox Grid.

A Pen by Shawn Sandy on CodePen.

License.

Weather

A Pen by Bianca Mihai on CodePen.

License.

JdWwoe

A Pen by Javier Marquez on CodePen.

License.

	(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"./src/react-components/libs/build-sample.jsx":[function(require,module,exports){
	var React = require('react')

	var Test = require("../components/test.jsx");

	React.render(React.createElement(HelloTest, null), document.getElementById('test'));

	/**
	* Created by studio-mac on 2/16/15.
	* @credits - https://www.codementor.io/reactjs/tutorial/react-js-browserify-workflow-part-2
	*/

	var gulp = require('gulp');
	var source = require('vinyl-source-stream'); // Used to stream bundle for further handling
	var browserify = require('browserify');
	var watchify = require('watchify');
	var reactify = require('reactify');

	var webpack = require('webpack');

	var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

	module.exports = {
	entry: {
	Alerts: './webroot/js/src/alerts.js'
	},
	output: {
	path: './webroot/js/build/',

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>True Trello Printer</title>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body{margin:15%;}

	.panel-body{

	<IfModule mod_rewrite.c>
	RewriteEngine on

	RewriteCond %{REQUEST_URI} !^/blog.*
	RewriteCond %{REQUEST_URI} !-f
	RewriteRule ^$ app/webroot/ [L]

	RewriteCond %{REQUEST_URI} !^/blog.*
	RewriteCond %{REQUEST_URI} !-d
	RewriteRule (.*) app/webroot/$1 [L]