Stacey Watson staceywatson

Responsive layouts in stylus

There is no span1..15 styles, instead your css defines your layout and your html remains semantic and not polluted with display information. As it should be.
The markup is incredibly easy, you specify the wrappers width, and then each columns width in percentages. Every other grid framework I've found is incredibly complicated with this.
It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.

	#!/bin/bash

	cd ~/Local\ Sites/$1/app/

	echo Installing Bedrock... Please Wait

	composer create-project roots/bedrock

	rm -rf public

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);

	/* Reset rem to 10-based instead of default browser 16 */
	html {
	font-size: 62.5%;
	}

	/*
	Photoshop does not apply line height to the first row, which CSS does. This creates all kinds of havock.
	To calculate the correct offset for the first line we need the font-size and the lineheight, i.e:

	@include line-height(22,30);

	<?php
	/**
	* Your Name Global Plugin
	*
	* Core settings for Your Name sites.
	*
	* @package core_yourplugin
	* @author Your Name <[email protected]>
	* @link http://example.com
	* @copyright 2014 Your Name

	<?php

	// Copies woocommerce orders and users over from source to target.
	// I use this on my local machine - loading both db's up there side by side
	// could easily adjust the connect strings to connect elsewhere if needed.
	// will change order ids

	// My use case for this is when I've got a staging/test version of a site with new posts/products/pages etc, that needs
	// to go live without the loss of any orders placed on the site site since we copied it to the staging site.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Stripe Getting Started Form</title>

	<!-- The required Stripe lib -->
	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

	<!-- jQuery is used only for this example; it isn't required to use Stripe -->

	// This gist is now maintained on github at https://github.com/luetkemj/wp-query-ref

	<?php
	/**
	* WordPress Query Comprehensive Reference
	* Compiled by luetkemj - luetkemj.github.io
	*
	* CODEX: http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
	* Source: https://core.trac.wordpress.org/browser/tags/4.9.4/src/wp-includes/query.php
	*/

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="jquery.ketchup.all.min.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="email">
	<span>Enter your email to sign up</span>
	<form action="/subscribe.php" id="invite" method="POST">