framous 0.3 → 0.3.1

data/CHANGELOG.mkdn

@@ -1,6 +1,10 @@
 Framous Changelog
 =================
 
+v0.3.1 [Jul 23, 2013]
+---------------------
+* fixe typo
+
 v0.3 [Jul 23, 2013]
 ---------------------
 * major updates : grid system, typography & javascript plugins

data/README.md

@@ -2,3 +2,23 @@ framous
 =======
 
 Framous is light & powerful front-end toolkit to prototype digital product.
+
+Installation
+============
+
+From the Terminal:
+
+    (sudo) gem install framous
+
+Adding Framous to existing Compass projects
+
+    // Add framous to your config.rb file
+    require 'framous'
+
+    // Then run
+    compass install framous
+    
+Or create a new project:
+
+    compass create <your-project-name> -r framous --using framous
+

data/stylesheets/_framous.scss

@@ -0,0 +1,21 @@
+// ---------------------------------------------------------------------------
+// Global Framous File
+
+@charset "UTF-8";
+
+// compass/
+@import "compass";
+
+// utility/
+@import "framous/utility/framous-settings";
+@import "framous/utility/functions";
+@import "framous/utility/mixins";
+
+// layout/
+@import "framous/layout/grid";
+
+// base/
+@import "framous/base/reset";
+@import "framous/base/print";
+@import "framous/base/base";
+@import "framous/base/typography";

data/stylesheets/framous/base/_base.scss

@@ -0,0 +1,12 @@
+/* ---------------------------------------------------------------------------
+	Base
+*/
+
+body {
+	@include pie-clearfix;
+	width: 100%;
+}
+
+.out-container {
+	@include out-container;
+}

data/stylesheets/framous/base/_print.scss

@@ -0,0 +1,70 @@
+/* ---------------------------------------------------------------------------
+	Global Compass File
+	Inlined to avoid required HTTP connection: h5bp.com/r
+	https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
+*/
+
+@media print {
+	* {
+		background: transparent !important;
+		color: #000 !important; // Black prints faster: h5bp.com/s
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+
+	a,
+	a:visited {
+		text-decoration: underline;
+	}
+
+	a[href]:after {
+		content: " (" attr(href) ")";
+	}
+
+	abbr[title]:after {
+		content: " (" attr(title) ")";
+	}
+
+	// Don't show links for images, or javascript/internal links
+
+	.ir a:after,
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+
+	pre,
+	blockquote {
+		border: 1px solid #999;
+		page-break-inside: avoid;
+	}
+
+	thead {
+		display: table-header-group; // h5bp.com/t
+	}
+
+	tr,
+	img {
+		page-break-inside: avoid;
+	}
+
+	img {
+		max-width: 100% !important;
+	}
+
+	@page {
+		margin: 0.5cm;
+	}
+
+	p,
+	h2,
+	h3 {
+		orphans: 3;
+		widows: 3;
+	}
+
+	h2,
+	h3 {
+		page-break-after: avoid;
+	}
+}

data/stylesheets/framous/base/_reset.scss

@@ -0,0 +1,329 @@
+/* ---------------------------------------------------------------------------
+    normalize.css v2.1.1 | MIT License | git.io/normalize
+*/
+
+// ---------------------------------------------------------------------------
+// HTML5 display definitions
+
+
+// Correct `block` display not defined in IE 8/9.
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+
+// Correct `inline-block` display not defined in IE 8/9.
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+// Address styling not present in IE 8/9.
+
+[hidden] {
+    display: none;
+}
+
+// ---------------------------------------------------------------------------
+// Base
+
+// 1. Prevent system color scheme's background color being used in Firefox, IE,
+//    and Opera.
+// 2. Prevent system color scheme's text color being used in Firefox, IE, and
+//    Opera.
+// 3. Set default font family to sans-serif.
+// 4. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+
+html {
+    background: #fff; // 1
+    color: #000; // 2
+    font-family: sans-serif; // 3
+    -ms-text-size-adjust: 100%; // 4
+    -webkit-text-size-adjust: 100%; // 4
+}
+
+// Remove default margin.
+
+body {
+    margin: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Links
+
+// Address `outline` inconsistency between Chrome and other browsers.
+
+a:focus {
+    outline: thin dotted;
+}
+
+
+// Improve readability when focused and also mouse hovered in all browsers.
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Typography
+
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+
+b,
+strong {
+    font-weight: bold;
+}
+
+// Address styling not present in Safari 5 and Chrome.
+
+dfn {
+    font-style: italic;
+}
+
+// Address differences between Firefox and other browsers.
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+// Address styling not present in IE 8/9.
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+// Correct font family set oddly in Safari 5 and Chrome.
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+// Improve readability of pre-formatted text in all browsers.
+
+pre {
+    white-space: pre-wrap;
+}
+
+// Set consistent quote types.
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+// Address inconsistent and variable font size in all browsers.
+
+small {
+    font-size: 80%;
+}
+
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+// ---------------------------------------------------------------------------
+// Embedded content
+
+// Remove border when inside `a` element in IE 8/9.
+
+img {
+    border: 0;
+}
+
+// Correct overflow displayed oddly in IE 9.
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+// ---------------------------------------------------------------------------
+// Figures
+
+// Address margin not present in IE 8/9 and Safari 5.
+
+figure {
+    margin: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Forms
+
+// Define consistent border, margin, and padding.
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+
+legend {
+    border: 0; // 1
+    padding: 0; // 2
+}
+
+// 1. Correct font family not being inherited in all browsers.
+// 2. Correct font size not being inherited in all browsers.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; // 1
+    font-size: 100%; // 2
+    margin: 0; // 3
+}
+
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+
+button,
+input {
+    line-height: normal;
+}
+
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+// Correct `select` style inheritance in Firefox 4+ and Opera.
+
+button,
+select {
+    text-transform: none;
+}
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; // 2
+    cursor: pointer; // 3
+}
+
+// Re-set default cursor for disabled elements.
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+// 1. Address box sizing set to `content-box` in IE 8/9.
+// 2. Remove excess padding in IE 8/9.
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; // 1
+    padding: 0; // 2
+}
+
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+
+input[type="search"] {
+    -webkit-appearance: textfield; // 1
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; // 2
+    box-sizing: content-box;
+}
+
+// Remove inner padding and search cancel button in Safari 5 and Chrome
+// on OS X.
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+// Remove inner padding and border in Firefox 4+.
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+// 1. Remove default vertical scrollbar in IE 8/9.
+// 2. Improve readability and alignment in all browsers.
+
+textarea {
+    overflow: auto; // 1
+    vertical-align: top; // 2
+}
+
+// ---------------------------------------------------------------------------
+// Tables
+
+// Remove most spacing between table cells.
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

data/stylesheets/framous/base/_typography.scss

@@ -0,0 +1,217 @@
+// ---------------------------------------------------------------------------
+// Typography
+// http://drewish.com/tools/vertical-rhythm
+
+body,div,dl,dt,dd,ul,ol,li,
+h1,h2,h3,h4,h5,h6,
+pre,form,p,blockquote,th,td {
+	margin: 0;
+	padding: 0;
+	direction: $text-direction;
+	vertical-align: baseline;
+}
+
+body {
+	@include establish-baseline;
+	position: relative;
+	background: $background-body-color;
+	color: $body-font-color;
+	font-family: $body-font-family;
+	font-weight: $font-weight-normal;
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+// Links : link, visited, hover, active
+a {
+	color: $link-color;
+	text-decoration: none;
+	line-height: inherit;
+	word-wrap: break-word;
+
+	&:visited {
+		color: $link-color-hover;
+	}
+
+	&:hover {
+		color: $link-color-hover;
+	}
+
+	&:active {
+		color: $link-color-hover;
+	}
+
+	&:focus {
+		outline: none;
+		color: $link-color-hover;
+	}
+}
+
+p a,
+p a:visited {
+	line-height: inherit;
+}
+
+p {
+	@include adjust-font-size-to($p);
+	margin: 0 0 rhythm(1, $p) 0;
+	font-weight: $font-weight-normal;
+	font-family: $body-font-family;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	color: $header-font-color;
+	font-weight: $font-weight-bold;
+	font-family: $header-font-family;
+	text-rendering: optimizeLegibility;
+  
+  small {
+  	color: lighten($header-font-color, 30);
+  	font-size: 75%;
+  	line-height: 0;
+  }
+}
+
+h1 {
+	@include adjust-font-size-to($h1);
+	margin: rhythm(1, $h1) 0;
+}
+
+h2 {
+	@include adjust-font-size-to($h2);
+	margin: rhythm(1, $h2) 0;
+}
+
+h3 {
+	@include adjust-font-size-to($h3);
+	margin: rhythm(1, $h3) 0;
+}
+
+h4 {
+	@include adjust-font-size-to($h4);
+	margin: rhythm(1, $h4) 0;
+}
+
+h5 {
+	@include adjust-font-size-to($h5);
+	margin: rhythm(1, $h5) 0;
+}
+
+h6 {
+	@include adjust-font-size-to($p);
+	margin: rhythm(1, $p) 0;
+}
+
+hr {
+	clear: both;
+	margin: 0 0 rhythm(1, $p) 0;
+	height: 0;
+	border: solid $border-color;
+	border-width: 1px 0 0;
+}
+
+em, i, q {
+	font-style: italic;
+	line-height: inherit;
+}
+
+strong, b {
+	font-weight: $font-weight-bold;
+	line-height: inherit;
+}
+
+small {
+	font-size: 75%;
+	line-height: inherit;
+}
+
+code {
+	background: $highlight-color;
+}
+
+// Lists
+ul, ol {
+	@include adjust-font-size-to($p);
+	margin: 0 0 rhythm(1, $p) 0;
+}
+
+ul {
+	list-style-position: outside; 
+	list-style-type: disc;
+	li {
+    	ul, ol {
+    		margin-#{$default-float}: rhythm(1, $p);
+    	}
+  	}
+}
+
+ol {
+	list-style-position: outside; 
+	list-style-type: decimal;
+	li {
+    	ul, ol {
+    		margin-#{$default-float}: rhythm(1, $p);
+    	}
+  	}
+}
+
+nav ul,
+nav ol {
+	@include reset-list-style;
+  	margin: 0;
+  	padding: 0;
+}
+
+// Text Marking
+ins, mark {
+	background-color: $highlight-color;
+  	color: invert($highlight-color);
+}
+
+ins {
+	text-decoration: none;
+}
+
+del {
+	text-decoration: line-through;
+}
+
+// Blockquote
+blockquote, blockquote p {
+	@include adjust-font-size-to($p);
+	font-style: italic;
+}
+
+blockquote {
+	margin: 0 0 rhythm(1, $p) rhythm(1, $p);
+	padding: 0px rhythm(1, $p) 0 rhythm(1, $p);
+  
+	cite {
+		display: block;
+		font-size: $p;
+	    
+	    &:before {
+	    	content: "\2014 \0020";
+	    }
+	}
+}
+
+abbr, acronym {
+	border-bottom: 1px solid $grey-set;
+	color: $header-font-color;
+	text-transform: uppercase !important;
+	font-size: 90%;
+	cursor: help;
+}
+
+abbr {
+	text-transform: none;
+}

data/stylesheets/framous/layout/_grid.scss

@@ -0,0 +1,117 @@
+// ---------------------------------------------------------------------------
+// Responsive / Adaptive grid supports both fixed and fluid layouts.
+// The default grid uses 12 columns.
+
+// ---------------------------------------------------------------------------
+// Base
+
+// $border-box-sizing: true !default;
+// Makes all elements have a border-box layout
+
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
+
+// Utility function — you should never need to modify this
+
+@function gridsystem-width(
+	$columns : $nb-columns
+) {
+	@return ($column-width * $columns) + ($gutter-width * ($columns - 1));
+}
+
+// Set $total-width to 100% for a fluid system layout
+
+$total-width: null;
+
+@if $grid-system-style == 'fluid' {
+	$total-width : 100%;
+} @else {
+	$total-width : gridsystem-width($nb-columns);
+}
+
+// ---------------------------------------------------------------------------
+// Grid
+
+// Out wrapper center container
+
+@mixin out-container() {
+	@include pie-clearfix;
+	margin: {
+		left: auto;
+		right: auto;
+	}
+
+	@if $grid-system-style == 'fluid' {
+		max-width: $max-width;
+	} @else {
+		width: $total-width * ((gridsystem-width($nb-columns)) / gridsystem-width($nb-columns));
+	}
+}
+
+@mixin column(
+	$x,
+	$columns : null
+) {
+
+	@if $columns == null or $grid-system-style == 'fixed' {
+		$columns : $nb-columns;
+	}
+
+	float: left;
+	display: inline;
+	margin-right: $total-width * ($gutter-width / gridsystem-width($columns));
+	width: $total-width * (((($gutter-width + $column-width) * $x) - $gutter-width) / gridsystem-width($columns));
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+
+@mixin fill-column(
+	$x,
+	$columns : $nb-columns
+) {
+	width: $total-width * (((($gutter-width + $column-width) * $x) - $gutter-width) / gridsystem-width($columns));
+}
+
+@mixin push-column(
+	$offset : 1
+) {
+	margin-left: $total-width * ((($gutter-width + $column-width) * $offset) / gridsystem-width($nb-columns));
+}
+
+@mixin pull-column(
+	$offset : 1
+) {
+	margin-right: $total-width * ((($gutter-width + $column-width) * $offset) / gridsystem-width($nb-columns));
+}
+
+@mixin fill-parent() {
+	width: 100%;
+
+  	@if $border-box-sizing == false {
+    	@include box-sizing(border-box);
+  	}
+}
+
+// ---------------------------------------------------------------------------
+// Responsive
+
+// @credits : http://codepen.io/imathis/pen/BDzcI
+// @include at-least($phone-wide) {}
+// @include until($phone-wide) {}
+
+@mixin at-least($device-width) {
+	@media screen and (min-width: $device-width) {
+		@content; 
+	}
+}
+
+@mixin until($device-width) {
+	@media screen and (max-width: $device-width - 1) {
+		@content; 
+	}
+}

data/stylesheets/framous/utility/_framous-settings.scss

@@ -0,0 +1,92 @@
+// ---------------------------------------------------------------------------
+// Grid Settings
+
+$grid-system-style: 		'fluid';
+$nb-columns:				12;
+$column-width: 				60px;
+$gutter-width: 				20px;
+$max-width: 				1200px;
+
+$border-box-sizing: 		true;
+
+// Breakpoints
+
+$phone:						320px;
+$phone-wide:				480px;
+$tablet:					768px;
+$large-screen:				980px;
+
+// ---------------------------------------------------------------------------
+// Colors Settings
+
+// Branding Set
+
+$blue-set:					#465aff;
+$blue-dark-set:				#143255;
+$blue-light-set:			#afe1fa;
+$yellow-set:				#ffc814;
+$yellow-light-set:			#fff0c8;
+$green-set:					#78c700;
+
+// Colors Set
+
+$white-set:					#fff;
+$grey-set:					#808080;
+$black-set:					#000;
+
+$background-body-color:		transparent;	
+$txt-color:					$blue-dark-set;
+$body-color:				$blue-dark-set;
+$highlight-color:			$yellow-light-set;
+
+$background-color:			lighten($grey-set,45);
+$border-color:				lighten($grey-set,30);
+
+$link-color:				$blue-set;
+$link-color-hover:			$blue-dark-set;
+
+// ---------------------------------------------------------------------------
+// Type Settings
+
+// Text Direction Settings
+
+$text-direction:			ltr;
+$default-float:				left;
+$default-opposite:			right;
+
+@if $text-direction == ltr {
+	$default-float: left;
+	$default-opposite: right;
+} @else {
+	$default-float: right;
+	$default-opposite: left;
+}
+
+// Font Settings
+
+$adelle-sans:				"adelle-sans", sans-serif;
+
+$header-font-family:		$adelle-sans;
+$font-weight-bold:			700;
+$header-font-color:			$txt-color;
+$body-font-family:			$adelle-sans;
+$font-weight-normal:		400;
+$font-weight-light:			300;
+$body-font-color:			$body-color;
+
+// Modular Scale Values
+// http://typecast.com/blog/contrast-through-scale
+
+$tera:						72px;
+$giga:						60px;
+$mega:						48px;
+$h1:						36px; // h1
+$h2:						24px; // h2
+$h3:						21px; // h3
+$h4:						18px; // h4
+$h5:						16px; // h5
+$p:							14px; // h6, p
+
+// Vertical Rythm
+$base-font-size:			$p;
+$base-line-height:			20px;

data/stylesheets/framous/utility/_functions.scss

@@ -0,0 +1,20 @@
+// ---------------------------------------------------------------------------
+// Functions
+// Vertical Rhythm
+
+@function rhythm(
+	$lines : 1,
+	$font-size : 1em
+) {
+    @if $lines == auto {
+        $lines : ceil($font-size / $base-line-height);
+    }
+    @return $base-line-height / $font-size * $lines * 1em;
+}
+
+@function px-to-em(
+	$px,
+	$base : $base-font-size
+) {
+    @return ($px / $base) * 1em;
+}

data/stylesheets/framous/utility/_mixins.scss

@@ -0,0 +1,35 @@
+// ---------------------------------------------------------------------------
+// Mixins
+// Vertical Rhythm
+
+@mixin establish-baseline() {
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+}
+
+@mixin adjust-font-size-to(
+	$font-size,
+	$lines : ceil($font-size / $base-line-height)
+) {
+    font-size: px-to-em($font-size);
+    line-height: rhythm($lines, $font-size);
+}
+
+@mixin debug-vertical-alignment($background-color : white) {
+	position: relative;
+
+	&:before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		display: block;
+		content: "";
+		background-image: -webkit-linear-gradient(
+			rgba($background-color, 0.1) 1px, transparent 1px
+		);
+		@include background-size(100% ($base-line-height));
+		pointer-events: none;
+	}
+}

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: framous
 version: !ruby/object:Gem::Version 
-  hash: 13
+  hash: 17
   prerelease: 
   segments: 
   - 0
   - 3
-  version: "0.3"
+  - 1
+  version: 0.3.1
 platform: ruby
 authors: 
 - Alec Hance
@@ -15,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-06-11 00:00:00 Z
+date: 2013-07-23 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -49,7 +50,7 @@ dependencies:
         version: 0.12.2
   type: :runtime
   version_requirements: *id002
-description: A light rapid prototyping toolkit for designers
+description: Framous is light & powerful front-end toolkit to prototype digital product
 email: hello@borderlab.com
 executables: []
 
@@ -62,6 +63,15 @@ files:
 - LICENSE.txt
 - README.md
 - lib/framous.rb
+- stylesheets/_framous.scss
+- stylesheets/framous/base/_base.scss
+- stylesheets/framous/base/_print.scss
+- stylesheets/framous/base/_reset.scss
+- stylesheets/framous/base/_typography.scss
+- stylesheets/framous/layout/_grid.scss
+- stylesheets/framous/utility/_framous-settings.scss
+- stylesheets/framous/utility/_functions.scss
+- stylesheets/framous/utility/_mixins.scss
 - templates/project/_settings.scss
 - templates/project/index.html
 - templates/project/manifest.rb