jetpack-rails 0.7.1 → 0.8.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d448bb8894e77214fc9db1ba8ef6b0d1f0f25587
+  data.tar.gz: 1d78df2487542a02be9b9013ff28877fa726a52c
+SHA512:
+  metadata.gz: 2668041c5f6f47d2a051c94a19d6589cb1367c3938ac111908ab97272f86c4b4e0d2bd509ed21c619f937fa01beed536d6b6ea924b9cd85af6793a1a7189cfbf
+  data.tar.gz: 34ae606be27595a19f5e9dc26dbb698950eb6ced263aea03ac0ed20fb449380983ea5e602c17eb9110bba3af5a28522e54c8aa7bb2bb5a7f4cff70ff6f39a684

data/CHANGELOG

@@ -1,6 +1,38 @@
+TODO: V0.9
+> Clear out any remaining ideas from Wunderlist
+> Redo Tabs, Pills, Navigation
+> Redo Tables
+> Review the JS
+
+TODO: V1.0
+> Use git submodules, so style is available apart from plugin
+> Finish sexy docs / demo
+
+
 Changelog:
-0.7.1:
-- Removed jQuery 'live' call and replaced with event on body.
+0.8.0:
+- Significant overhaul to styles:
+  The goal of Jetpack is to be a bootstrap that helps without hurting,
+  meaning it never gets in your way with styles you have to override.
+  While existing versions have done a pretty good job of this, there are
+  still a number of "built-in" styles that get included when you use
+  different components. That's not the best. This release removes all
+  'default' styles and makes sure everything is a mixin or a reset that you
+  include by choice, not by default.
+- Refined header styles to make them procedural based on base font size.
+- Renamed `mixins` module as `core`, to indicate that it's required
+- Removed `font` mixin
+- Removed `opacity`, `transition`, and `background-clip` mixins
+- Moved `respond-to` mixin to core.
+- Added `desktop` option for respond_to
+- Refined typographic styles.
+- Updated Resetize to use more recent bits from Normalize.css
+- Completely redid the Forms module to be all mixins
+- Add a fluid grid option to fractionalize
+- Convert all typography settings to mixins so you can granularly add/remove just the bits you want
+- Changed interface module to all mixins
+- Added "Defaults" module for grabbing the old selectors
+- Changed div.alert_message to div.message in defaults
 
 0.7.0:
 - Added `nav_link_to` helper for creating navigation links.
@@ -8,18 +40,14 @@ Changelog:
 - Added `$responsive` flag to toggle responsive grid throughout an application.
 - Changed Fractionalize to use `respond-to` mixin.
 - Adjusted typography settings to make H1s not so crazy.
-
 0.6.4:
 - Fixed an accidental regression in 0.6.3.
 - Added `respond-to` mixin.
-
 0.6.3:
 - Adjusted fractionalize to use 'device' width instead of 'width' in media queries.
-
 0.6.2:
 - Adjusted resetize style of disabled elements.
 - Added definition of disabled elements to forms stylesheet and matched to link button styles.
-
 0.6.1:
 - Added image max-width to grid containers so images will automatically downscale as needed.
 

data/lib/jetpack/version.rb

@@ -1,3 +1,3 @@
 module Jetpack
-	VERSION = "0.7.1"
+	VERSION = "0.8.0"
 end

data/vendor/assets/javascripts/jetpack.js

@@ -1,4 +1,4 @@
 //= require jetpack/alerts
 //= require jetpack/modal
 //= require jetpack/tabs
-//= require jetpack/tipsy
+//= require jetpack/tipsy

data/vendor/assets/stylesheets/jetpack/{mixins.css.scss → core.css.scss}

@@ -1,6 +1,18 @@
 // UNIVERSAL MIXINS
 @mixin clearfix { &:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } }
 
+@mixin respond-to($media) {
+	@if $media == desktop {
+		@media screen and (min-width: 1024px) { @content; }
+	}
+	@if $media == tablet {
+		@media screen and (device-width: 768px), screen and (min-width: 768px) and (max-width: 1023px) { @content; }
+	}
+	@else if $media == mobile {
+		@media screen and (device-width: 480px), screen and (max-width: 767px) { @content; }
+	}
+}
+
 @mixin border-radius( $radius: 5px) {
 	-webkit-border-radius: $radius;
 	-moz-border-radius: $radius;
@@ -13,13 +25,6 @@
 					box-shadow: $shadow;
 }
 
-@mixin font( $size: $base_size, $stack: $base_font, $weight: $base_weight, $line_height: $baseline ) {
-	font-size: $size;
-	font-family: $stack;
-	font-weight: $weight;
-	line-height: $line_height;
-}
-
 @mixin gradient($startColor: #555, $endColor: #333) {
 	background-color: $endColor;
 	background-repeat: repeat-x;
@@ -39,22 +44,8 @@
 	border-color: darken($primaryColor, 10%) darken($secondaryColor, 8%) darken($secondaryColor, 20%);
 }
 
-@mixin opacity($opacity: 100) {
-	filter: alpha(opacity=$opacity);
-	-khtml-opacity: $opacity / 100;
-		-moz-opacity: $opacity / 100;
-				 opacity: $opacity / 100;
-}
-
-@mixin transition($transition) {
-	-webkit-transition: $transition;
-		 -moz-transition: $transition;
-					transition: $transition;
-}
-
-// Background clipping
-@mixin background-clip($clip) {
-	-webkit-background-clip: $clip;
-		 -moz-background-clip: $clip;
-					background-clip: $clip;
+@mixin gutter( $side: top, $style: $light-line, $size: $baseline/2 ) {
+	border-#{$side}: $style;
+	margin-#{$side}: $size;
+	padding-#{$side}: $size;
 }

data/vendor/assets/stylesheets/jetpack/defaults.css.scss

@@ -0,0 +1,43 @@
+/*  --------------------------------------------------
+  Jetpack Defaults
+  ================
+
+  This file can optionally be added after the rest of
+  Jetpack is loaded.
+
+  This is one of only two modules in Jetpack that include
+  *selectors*, the other module being Resetize.
+
+  So if you don't count the CSS reset (I don't), that
+  makes this the only file that will actually affect
+  your page when it's included.
+
+  This file has two purposes:
+
+  1. If you like the basic styles I've set up here,
+     you can just import this and GO.
+
+  2. If you don't like the basic styles I've set up
+     here, don't import this file. Instead you can
+     copy/paste it into your project and then change
+     as desired, or just ignore it and make use of
+     the jetpack mixins without any default styles.
+
+  Have fun, happy coding!
+  --------------------------------------------------  */
+// STYLE INCLUDES
+@include text;
+@include headings;
+@include lists;
+@include preformatting;
+@include tabs-pills;
+@include pagination;
+@include tables;
+
+// JS DEFAULT STYLES
+@include js-styles;
+
+// UBIQUITOUS DEFAULTS
+span.label { @include label; }
+a.button, span.button { @include button; }
+div.message { @include message; }

data/vendor/assets/stylesheets/jetpack/forms.css.scss

@@ -2,89 +2,120 @@
  * Influenced by Twitter Bootstrap, Normalize, and Formalize Projects
  * ---------------------------------------------------------------------------------------- */
 
-// Universal
-// Standard Input Mixin for one-off useage
-@mixin standard_input { @include border-radius(3px); border: 1px solid $light2; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); color: $dark1; }
+// NOTES
+
+// List of HTML Input Types
+// TEXTY INPUTS (things that should be laid out like text)
+// email
+// password
+// search
+// tel
+// text
+// url
+// NON-TEXTY INPUTS (things that should be laid out differently)
+// button
+// checkbox
+// color
+// date
+// datetime
+// datetime-local
+// file
+// hidden
+// image
+// month
+// number
+// radio
+// range
+// reset
+// submit
+// time
+// week
 
-// Adjustment to disabled elements to match link buttons
-button[disabled],
-input[disabled],
-select[disabled],
-select[disabled] option,
-select[disabled] optgroup,
-textarea[disabled] {
-	color: $light2;
-}
 
+// SELECTOR HELPERS
+@mixin basic-inputs {
+	input[type=email],input[type=password],input[type=search],
+	input[type=tel],input[type=text],input[type=url],textarea {
+		@content;
+	}
+}
 
-// Common Form Styles
-form { margin-bottom: $baseline; @include font; @include clearfix;
-	fieldset {
-		margin: 0 0 $baseline; padding: 0; border: 0; position: relative; clear: both;
-		legend { display: block; margin-bottom: $baseline; font-size: $base_size * 1.3; }
+@mixin text-inputs {
+	input[type=email],input[type=password],input[type=search],
+	input[type=tel],input[type=text],input[type=url],input[type=date],
+	input[type=datetime],input[type=datetime-local],input[type=month],
+	input[type=number],input[type=time],input[type=week	],select,textarea {
+		@content;
 	}
+}
 
-	div.input { @include clearfix; margin-bottom: $baseline;
-		label { display: block; text-align: right; height: 2em; font-weight: 700;
-			&.collection_radio,
-			&.collection_check { width: auto; float: none; display: inline; margin-left: $baseline / 4; }
-		}
+// FORM COMPONENTS
 
-		input[type="text"], input[type="email"], input[type="password"], select, textarea {
-			@include standard_input;
-		}
+// Form Element Appearance
+@mixin input-style-basic { @include border-radius(4px); border: 1px solid $light2; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); color: $dark1; }
+@mixin form-style-basic {
+	margin-bottom: $baseline; @include clearfix;
+	span.hint { color: $light2; }
+	span.error { color: $error2; }
+	div.field_with_errors { background: $error1; }
 
-		.radio, .checkboxes {
-			label { display: inline !important; margin: 0 $baseline 0 0; height: auto; font-weight: 300; }
-			input { width: auto; margin-right: $baseline / 4; }
-		}
+	// Adjustment to disabled elements to match link buttons
+	button[disabled], input[disabled], select[disabled],
+	select[disabled] option, select[disabled] optgroup,
+	textarea[disabled] {
+		color: $light2;
 	}
-
-	span.hint { display: block; margin-top: $baseline / 4; clear: both; color: $light2; font-size: $base_size - 1px; }	
-	input[type="submit"] { margin-bottom: $baseline / 2; }
 }
 
-// Standard Form Elements (labels beside inputs)
-form.standard {
-	fieldset {
-		legend { padding: 0 0 0 20%; }
+// Input Groups (div.input)
+@mixin input-group-base {
+	@include clearfix; width: 100%; padding: $baseline/2 0;
+	label.control-label { display: block; font-weight: 700; }
+	label.boolean { width: auto; font-weight: normal;
+		input { margin-right: 8px; }
 	}
+	label.checkbox, label.radio { float: left; margin-right: 18px;
+		input { margin-right: 4px; }
+	}
+}
 
-	div.input {
-		label { float: left; width: 17.5%; margin-right: 2.5%; }
-
-		input[type="text"], input[type="email"], input[type="password"], select, textarea { float: left; width: 80%; }
-	
-		&.radio, &.check_boxes {
-			label { float: none; }
-		}
-		
-		&.date, &.time, &.datetime {
-			select { width: auto; float: none; }
-		}
+@mixin input-group-horizontal {
+	@include input-group-base;
 
-		span.hint { float: left; margin-left: 20%; }
-	}
-	
-	input[type="submit"] { margin-left: 20%; }
-	
-	div.inset { margin-left: 20%; }
+	@include basic-inputs { float: left; width: 78%; }
+	label.control-label { width: 18%; float: left; margin-right: 2%; text-align: right; }
+	label.boolean { float: left; width: auto; margin-left: 20%; }
+	span.hint, span.error { float: left; margin-left: 20%; }
 }
 
-// Stacked Form Elements
-form.stacked { margin-bottom: $baseline; @include font;
+@mixin input-group-vertical {
+	@include input-group-base;
+	@include basic-inputs { width: 100%; }
+}
 
-	div.input {
-		label { clear: both; margin-bottom: $baseline / 4; text-align: left; }
-		input[type="text"], input[type="email"], input[type="password"], select, textarea { width: 100%; }
-		
-		&.radio, &.check_boxes { 
-			input { width: auto; display: inline; }
-			label { display: inline; margin-left: $baseline / 4; margin-right: $baseline / 2; }
-		}
+// WHOLE FORMS
+@mixin form-horizontal {
+	@include form-style-basic;
+	@include text-inputs { @include input-style-basic; }
+	div.input { @include input-group-horizontal; }
+	div.submit {
+		margin-top: $baseline/2; padding-top: $baseline/2; border-top: 1px solid $light1;
+		float: left; margin-left: 20%; width: 80%;
+	}
+}
 
-		&.date, &.time, &.datetime {
-			select { width: auto; }
-		}
+@mixin form-vertical {
+	@include form-style-basic;
+	@include text-inputs { @include input-style-basic; }
+	div.input { @include input-group-vertical; }
+	div.submit {
+		margin-top: $baseline/2; padding-top: $baseline/2; border-top: 1px solid $light1;
+		width: 100%;
 	}
-}
+}
+
+@mixin form-horizontal-responsive {
+	@include respond-to(desktop) { @include form-horizontal; }
+	@include respond-to(tablet) { @include form-horizontal; }
+	@include respond-to(mobile) { @include form-vertical; }
+}

data/vendor/assets/stylesheets/jetpack/fractionalize.css.scss

@@ -3,7 +3,7 @@
 	Fractionalize.CSS
 	A css framework that lets you setup many different
 	fractional grid layouts quickly and easily.
-	
+
 	WHY?
 	Grab just about any other framework and try this:
 	Create a layout using four equal colums.
@@ -13,13 +13,13 @@
 	you're using that framework you can either divide the page
 	equally into odd increments, or even increments, but not
 	both.
-	
+
 	That's lame. Hence, this framework isn't about using a
 	fancy schmancy generator and agonizing over how many
 	columns you should ask it for, it's about being able
 	to quickly and easily divide the page into whatever
 	fractions you want at any time.
-	
+
 	Inspired by Blueprint CSS, and based on Blueprint
 	terminology and use.
 
@@ -28,27 +28,8 @@
 	converted to leverage the power of SASS to make it
 	even better.
 	http://www.sass-lang.com
-	
-	--------------------------------------------------	*/
-
-// LAYOUT DEFAULTS
-// Make sure the body always fills the page.
-* {	margin: 0; }
-html, body { height: 100%; }
 
-$desktop: 1000px;
-$tablet: 760px;
-$mobile: 280px;
-$margin: 20px;
-
-@mixin respond-to($media) {
-	@if $media == tablet {
-		@media screen and (device-width: 768px), screen and (min-width: 768px) and (max-width: 1023px) { @content; }
-	}
-	@else if $media == mobile {
-		@media screen and (device-width: 480px), screen and (max-width: 767px) { @content; }
-	}
-}
+	--------------------------------------------------	*/
 
 @mixin container {
 	width: $desktop;
@@ -61,59 +42,41 @@ $margin: 20px;
 	@include clearfix;
 }
 
-@function col_size( $denom, $width: $desktop ) {
-	@if $width < $tablet {
-		@return double_columns( $denom, $width )
-	}
-	@else {
-		@return regular_columns( $denom, $width )
-	}
-}
-
-@function regular_columns( $denom, $width: $desktop ) {
-		$gutters: $denom - 1;
-		$total_gutter: $gutters * $margin;
-		$column_area: $width - $total_gutter;
-		@return $column_area / $denom;
-}
-
-@function double_columns( $denom, $width: $landscape ) {
-		$double: $denom / 2;
-		$gutters: $double * 2;
-		$total_gutter: $gutters * $margin;
-		$column_area: $width - $total_gutter;
-		@return $column_area / $double;
-}
-
-
-@function col_span( $num, $denom, $width: $desktop ) {
-	$column_size: col_size( $denom, $width );
+@function col-span( $num, $denom, $width: $desktop ) {
+	$column_size: col-size( $denom, $width );
 	$column_area: $column_size * $num;
 	$interior_margins: ($num - 1) * $margin;
 	@return $column_area + $interior_margins;
 }
 
+@function col-size( $denom, $width: $desktop ) {
+	$gutters: $denom - 1;
+	$total_gutter: $gutters * $margin;
+	$column_area: $width - $total_gutter;
+	@return $column_area / $denom;
+}
+
 @mixin grid( $num, $denom ) {
 	display: block;
 	float: left;
 	margin-left: $margin;
-	width: col_span( $num, $denom );
+	width: col-span( $num, $denom );
 	&:first-child { margin-left: 0; }
 	@if $responsive {
-		@include respond-to(tablet) { width: col_span( $num, $denom, $tablet ); }
+		@include respond-to(tablet) { width: col-span( $num, $denom, $tablet ); }
 		@include respond-to(mobile) { width: $mobile; margin-left: 0; }
 	}
 	img { max-width: 100%; }
 }
 
 @mixin prepend( $num, $denom ) {
-	margin-left: col_span( $num, $denom ) + $margin;
-	&:first-child { margin-left: col_span( $num, $denom ) + $margin; }
+	margin-left: col-span( $num, $denom ) + $margin;
+	&:first-child { margin-left: col-span( $num, $denom ) + $margin; }
 }
 
 @mixin append( $num, $denom ) {
-	margin-right: col_span( $num, $denom ) + $margin;
-	&:first-child { margin-right: col_span( $num, $denom ) + $margin; }
+	margin-right: col-span( $num, $denom ) + $margin;
+	&:first-child { margin-right: col-span( $num, $denom ) + $margin; }
 }
 
 @mixin col_border( $thickness: 1px, $style: solid, $color: #CCC ) {
@@ -124,4 +87,35 @@ $margin: 20px;
 	border-left: $thickness $style $color;
 }
 
-div.container { @include container; }
+// FLUID VERSION
+$fluid-margin: 1%;
+$fluid-width: 96%;
+
+@mixin fluid-container {
+	width: $fluid-width; padding: 0 (100%-$fluid-width)/2; @include clearfix;
+}
+
+@mixin fluid-grid( $num, $denom ) {
+	display: block; float: left;
+	margin-left: $fluid-margin;
+	width: fluid-col-span( $num, $denom );
+	&:first-child { margin-left: 0; }
+	@if $responsive {
+		@include respond-to(mobile) { width: 100%; margin-left: 0; }
+	}
+	img { max-width: 100%; }
+}
+
+@function fluid-col-span( $num, $denom ) {
+	$column_size: fluid-col-size( $denom );
+	$column_area: $column_size * $num;
+	$interior_margins: ($num - 1) * $fluid-margin;
+	@return $column_area + $interior_margins;
+}
+
+@function fluid-col-size( $denom ) {
+	$gutters: $denom - 1;
+	$total_gutter: $gutters * $fluid-margin;
+	$column_area: 100% - $total_gutter;
+	@return $column_area / $denom;
+}

data/vendor/assets/stylesheets/jetpack/interface.css.scss

@@ -4,7 +4,7 @@
 
 
 // LABELS
-span.label {
+@mixin label {
 	display: inline-block; padding: 1px 5px; background: $light2; color: $white; @include border-radius(3px);
 	&.success { background: $success2; }
 	&.notice { background: $notice2; color: $dark2; }
@@ -12,7 +12,7 @@ span.label {
 }
 
 // BUTTONS
-a.button, span.button {
+@mixin button {
 	display: inline-block;
 	vertical-align: baseline;
 	cursor: pointer;
@@ -32,25 +32,26 @@ a.button, span.button {
 	&.small { padding: 0px 6px; font-size: 11px; line-height: 1.4; }
 }
 
-@mixin inline_submit { display: inline-block; vertical-align: baseline; } // For submit buttons placed inline beside a one-input form.
-
-div.alert_message {
+// MESSAGES
+@mixin message {
 	@include border-radius(4px); color: $white; padding: 7px 12px; margin-bottom: $baseline; @include box-shadow;
 	&.success { @include buttonize( lighten( $success2, 15% ), $success2); text-shadow: 0px -1px darken( $success2, 15% ); }
 	&.notice { @include buttonize( lighten( $notice2, 15% ), $notice2); color: $dark2; text-shadow: 0px 1px $notice1; }
 	&.error, &.alert { @include buttonize( lighten( $error2, 15% ), $error2); text-shadow: 0px -1px darken( $error2, 15% ); }
-	a.close { @include font( 18px, $sans, 700, 13.5px ); float: right; text-decoration: none; opacity: 0.2; color: $black; text-shadow: 0px 1px $white;
+	a.close { font-size: 18px; font-weight: 700; line-height: 13.5px; float: right; text-decoration: none; opacity: 0.2; color: $black; text-shadow: 0px 1px $white;
 		&:hover { opacity: 0.4; }
 	}
 }
 
-// MODALS
-div.modal_bg { display: none; position: fixed; background: #000; opacity: 0.8; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; }
-div.modal { display: none; top: 40px; left: 50%; margin-left: -359px; width: 700px; background: $dark2; position: absolute; z-index: 1001; padding: $baseline; }
-div.modal .close_modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; }
+// STYLES FOR JETPACK JS
+@mixin js-styles {
+	// MODALS
+	div.modal_bg { display: none; position: fixed; background: #000; opacity: 0.8; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; }
+	div.modal { display: none; top: 40px; left: 50%; margin-left: -359px; width: 700px; background: $dark2; position: absolute; z-index: 1001; padding: $baseline; }
+	div.modal .close_modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; }
 
-// TIPSY
-.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
+	// TIPSY
+	.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
 	.tipsy-inner { background-color: $black; color: $white; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; @include border-radius(4px); }
 	.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
 	/* Rules to colour arrows */
@@ -67,5 +68,6 @@ div.modal .close_modal { font-size: 22px; line-height: .5; position: absolute; t
 	.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
 	.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
 
-// POPOVERS
-.popover { display: none; }
+	// POPOVERS
+	.popover { display: none; }
+}