Sulcalibur

# Bourbon Neat Grid & Text Settings

## Grid Settings

### Mega Desktop

width = 1460
cols = 16
gutter = 20
margin = gutter => 20

Sulcalibur

The script below is triggered every day from my Mac. I use Hazel to move the tar.gz to an external hard disk once it's finished. This happens every day without me noticing. You can exclude folders if you want to. You probably want to exclude giant cache folders.

You should have a similar script.

Sulcalibur

{
	"files":
	{
		"FitText": "https://github.com/davatron5000/FitText.js",
		"LetteringJS": "http://github.com/davatron5000/Lettering.js",
		"backbone": "http://documentcloud.github.com/backbone/backbone-min.js",
		"chrome-frame": "http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js",
		"font-awesome": "https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss",
		"imagesLoaded": "https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js",
		"impressjs": "https://github.com/bartaz/impress.js/raw/master/js/impress.js",

Sulcalibur

$visual-grid: true !default; // Display the base grid
$visual-grid-color: #EEE !default;
$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
$visual-grid-opacity: 0.6 !default;
$visual-grid-breakpoints: () !default;

Sulcalibur

$column: golden-ratio(1em, 3) !default; // Column width
$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
$grid-columns: 12 !default; // Total number of columns in the grid
$max-width: em(1088) !default; // Max-width of the outer container
$border-box-sizing: true !default; // Makes all elements have a border-box layout
$default-feature: min-width; // Default @media feature for the breakpoint() mixin
$default-layout-direction: LTR !default;

Sulcalibur

$visual-grid : true;
// ---------------------------------------------------------------------------
// Imports

@import "bourbon/bourbon";
@import "neat/neat";
@import "neat/neat-helpers";


$landscape: new-breakpoint(min-width 480px 4);

Sulcalibur

Enabling noConflict mode

Using a default Foundation download you'll see some code like this:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')

Sulcalibur

Enabling noConflict mode

Using a default Foundation download you'll see some code like this:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')

Sulcalibur

Using Calca for design

Below, the variables and examples were taken verbatim from [Using Soulver for design][sfd].

I'm just posting this as a reference, and example of sharing plain text documents for use within Calca. [sfd]: http://bjango.com/articles/soulver/

Variables and examples

iPhoneW = 320

Sulcalibur

// Design Variables for Calca
// Ref: [Bjango](http://bjango.com/articles/soulver/ )

k = 1000
iPhoneW = 320
iPhoneH = 568
iPhoneOldH = 480
iPhonePPI = 326
iPhoneOldPPI = 163
iPadW = 1024