typeup 0.1.0

data/lib/typeup.rb

@@ -0,0 +1,30 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('typeup', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module TypeUp
+  VERSION = "0.1.0"
+  DATE = "2013-02-26"
+end
+
+# This is where any custom SassScript should be placed. The functions will be  
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# 
+# end

data/stylesheets/_typeup.scss

@@ -0,0 +1,182 @@
+@import "typeup/settings";
+@import "typeup/functions";
+@import "modular-scale";
+
+//-----------------------
+//
+// MIXINS
+//
+//-----------------------
+
+@mixin typeup-body(
+	$fontSize: $fontSize,
+	$lineLength: $lineLength,
+	$xHeight: $xHeight
+) {
+
+	// Convert everything to workable units.
+	// Input supports em and px for font size and line length,
+	// xHeight is unitless.
+	$fontSize: typeup-convertToEms($fontSize, $baseFontSize);
+
+	@if $pixelSnapBaseSize {
+		$fontSize: typeup-snapToPixel($fontSize);
+	}
+
+	// Note that when we're stripping units from $fontSize, it's been converted to ems
+	$lineLength: typeup-convertToEms($lineLength, $baseFontSize * strip-units($fontSize));
+	$xHeight: strip-units($xHeight);
+
+	$typeup-lineHeight: typeup-calcLineHeight($fontSize, $lineLength, $xHeight);
+
+	body {
+		line-height: $typeup-lineHeight;
+		font-size: $fontSize;
+	}
+
+	@include typeup($fontSize, $lineLength, $xHeight);
+
+}
+
+@mixin typeup-container(
+	$fontSize: $fontSize,
+	$lineLength: $lineLength,
+	$xHeight: $xHeight
+) {
+	// Convert everything to workable units.
+	// Input supports em and px for font size and line length,
+	// xHeight is unitless.
+	$fontSize: typeup-convertToEms($fontSize, $baseFontSize);
+
+	@if $pixelSnapBaseSize {
+		$fontSize: typeup-snapToPixel($fontSize);
+	}
+
+	// Note that when we're stripping units from $fontSize, it's been converted to ems
+	$lineLength: typeup-convertToEms($lineLength, $baseFontSize * strip-units($fontSize));
+	$xHeight: strip-units($xHeight);
+
+	$typeup-lineHeight: typeup-calcLineHeight($fontSize, $lineLength, $xHeight);
+
+	font-size:$fontSize;
+	line-height: $typeup-lineHeight;
+	width: $lineLength;
+
+	@include typeup($fontSize, $lineLength, $xHeight);
+
+}
+
+@mixin typeup(
+	$fontSize: $fontSize,
+	$lineLength: $lineLength,
+	$xHeight: $xHeight
+) {
+	$typeup-lineHeight: typeup-calcLineHeight($fontSize, $lineLength, $xHeight);
+	$base-size: $fontSize;
+
+	// Loop through heading tags
+
+	@for $i from 1 to 7 {
+		h#{$i} {
+
+			$modularNumber: $startModularScaleAt + 1 - $i;
+
+			@if $modularNumber < 0 {
+				$modularNumber: 0;
+			}
+
+			font-size: ms(#{$modularNumber});
+
+			@include typeup-spacer(
+				ms(#{$modularNumber}),
+
+				// These functions don't have any significant logic;
+				// they just fetch the correct variable.
+				$before: typeup-headingLinesBefore(h#{$i}),
+				$after: typeup-headingLinesAfter(h#{$i}),
+				$baselineShift: typeup-headingBaselineShift(h#{$i})
+			);
+		}
+
+		// Get the heading styles in a class,
+		// such as .heading1
+		@if $doubleStrandedHeadingClasses == true {
+			.heading#{$i} {
+				@extend h#{$i};
+			}
+		}
+	}
+
+	p, ul, ol, pre {
+		margin-top:0;
+		margin-bottom:$typeup-lineHeight;
+	}
+
+	ul, ol {
+		padding-left:$typeup-lineHeight;
+	}
+
+	pre {
+		padding:$typeup-lineHeight;
+
+		code {
+			line-height: $typeup-lineHeight;
+		}
+	}
+
+	blockquote {
+		padding: $typeup-lineHeight;
+		margin-top: $typeup-lineHeight;
+		margin-bottom:$typeup-lineHeight;
+
+		p:last-child {
+			margin-bottom:0;
+		}
+	}
+
+}
+
+@mixin typeup-spacer(
+		$size-in-ems,
+		$before: $headingLinesBefore,
+		$after: $headingLinesAfter,
+		$baselineShift: $headingBaselineShift,
+		$overrideSpacingWithBaseline: $overrideSpacingWithBaseline
+		) {
+
+	@if $overrideSpacingWithBaseline == true {
+
+		// Here spacing is a multiple of the global typeup line-height
+
+		$adjust: 0em;
+
+		// If heading lineheight is not a full baseline height, adjust
+		@if (typeup-linesForFontSize($size-in-ems)/1em) % 1 == 0.5 {
+			$adjust: (($typeup-lineHeight/ $size-in-ems) / 2) * 1em;
+		}
+
+		margin-top:$before * ($typeup-lineHeight / $size-in-ems) * 1em + $adjust;
+		margin-bottom: $after * ($typeup-lineHeight / $size-in-ems) * 1em;
+
+	} @else {
+
+		// Here spacing is a multiple of the headings calculated line height.
+		// This is recommended.
+
+		// For example, a heading with an absolute line-height of 80px
+		// and a $before value of 2 will receive 160px of margin-top
+
+		margin-top: $before * typeup-linesForFontSize($size-in-ems) * ($typeup-lineHeight / $size-in-ems) * 1em;
+		margin-bottom: $after * typeup-linesForFontSize($size-in-ems) * ($typeup-lineHeight / $size-in-ems) * 1em;
+
+	}
+
+	@if $baselineShift > 0em {
+		position:relative;
+		top: 0em - $baselineShift;
+	}
+
+	line-height: ($typeup-lineHeight / $size-in-ems) * typeup-linesForFontSize($size-in-ems) * 1em;
+
+}
+

data/stylesheets/typeup/_functions.scss

@@ -0,0 +1,144 @@
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+// Check how many line-heights needed for font size. Can return half a baseline height.
+@function typeup-linesForFontSize(
+	$font-size: $fontSize,
+	$lineHeight: $typeup-lineHeight
+) {
+
+	$lines: ceil(2 * $font-size / $lineHeight) / 2;
+	@return $lines;
+}
+
+@function typeup-convertToEms($variable, $base) {
+	@if unit($variable) == "px" {
+		$variable: ($variable/$base) * 1em;
+	}
+
+	@return $variable;
+}
+
+// Snap to pixel and return as ems.
+@function typeup-snapToPixel(
+	$unitToSnap,
+	$baseFontSize: $baseFontSize
+) {
+	$snappedPxValue: false;
+
+	@if unit($unitToSnap) == "px" {
+		$snappedPxValue: round($unitToSnap);
+	} @else if unit($unitToSnap) == "em" {
+		$snappedPxValue: round(($unitToSnap / 1em) * $baseFontSize);
+	} @else if unitless($unitToSnap) == true {
+		$snappedPxValue: round($unitToSnap * $baseFontSize);
+	}
+
+	$returnPxValue: typeup-convertToEms($snappedPxValue, $baseFontSize);
+
+	@return $returnPxValue;
+}
+
+@function typeup-calcLineHeight(
+	$fontSize: $fontSize,
+	$lineLength: $lineLength,
+	$xHeight: $xHeight,
+	$calcPower: $calcExponent
+) {
+
+	@if unit($fontSize) == "px" {
+		$fontSize: ($fontSize / $baseFontSize) * 1em; 
+	}
+
+	/*
+	* Making the variables unitless.
+	*
+	*/
+
+	$fontSizeUnitless: strip-units($fontSize);
+	$lineLengthUnitless: strip-units($lineLength);
+
+	// Calculate the proper line height.
+	$lineHeightUnitless: pow(($lineLengthUnitless * 0.036), $calcPower) * $xHeight + 0.3;
+
+	@if $lineHeightUnitless < $minimumLineHeight {
+		$lineHeightUnitless: $minimumLineHeight;
+	}
+
+	/*
+	* Moving on to pixel snapping. We don't want a line-height of 24.334571px (for example),
+	* we want it nicely at 24px.
+	*/
+
+	// Rounding the line height to nearest pixel
+	$snappedLineHeight: typeup-snapToPixel($lineHeightUnitless * $fontSizeUnitless) / $fontSizeUnitless;
+
+	@return $snappedLineHeight;
+}
+
+
+// Because Sass doesnt support interpolation
+// inside variable names (only selectors),
+// we're using some excellent code here.
+
+@function typeup-headingLinesBefore($tag) {
+	@if $tag == h1 {
+		@return $h1LinesBefore;
+	}
+	@if $tag == h2 {
+		@return $h2LinesBefore;
+	}
+	@if $tag == h3 {
+		@return $h3LinesBefore;
+	}
+	@if $tag == h4 {
+		@return $h4LinesBefore;
+	}
+	@if $tag == h5 {
+		@return $h5LinesBefore;
+	}
+	@if $tag == h6 {
+		@return $h6LinesBefore;
+	}
+}
+
+@function typeup-headingLinesAfter($tag) {
+	@if $tag == h1 {
+		@return $h1LinesAfter;
+	}
+	@if $tag == h2 {
+		@return $h2LinesAfter;
+	}
+	@if $tag == h3 {
+		@return $h3LinesAfter;
+	}
+	@if $tag == h4 {
+		@return $h4LinesAfter;
+	}
+	@if $tag == h5 {
+		@return $h5LinesAfter;
+	}
+	@if $tag == h6 {
+		@return $h6LinesAfter;	}
+}
+
+@function typeup-headingBaselineShift($tag) {
+	@if $tag == h1 {
+		@return $h1BaselineShift;
+	}
+	@if $tag == h2 {
+		@return $h2BaselineShift;
+	}
+	@if $tag == h3 {
+		@return $h3BaselineShift;
+	}
+	@if $tag == h4 {
+		@return $h4BaselineShift;
+	}
+	@if $tag == h5 {
+		@return $h5BaselineShift;
+	}
+	@if $tag == h6 {
+		@return $h6BaselineShift;	}
+}

data/stylesheets/typeup/_settings.scss

@@ -0,0 +1,116 @@
+
+//-----------------------
+//
+// MAIN SETTINGS
+//
+//-----------------------
+
+// Base font size, in ems.
+$fontSize: 1em !default;
+
+// Container width. Final absolute width depends on font size.
+$lineLength: 35em !default;
+
+// This is a multiplier you can use to adjust line height,
+// particularly for fonts with very high or low x-heights.
+$xHeight:1 !default;
+
+// The ratio scale that modular-scale will use.
+$ratio: fourth() !default;
+
+// This variable is for modular-scale, copied from fontSize.
+$base-size: $fontSize;
+
+// Unless you are overriding your browser base font size,
+// there is no need to touch this.
+$baseFontSize: 16px !default;
+
+// If the base font size and font size dont result in
+// a integer, snap it
+$pixelSnapBaseSize: true !default;
+
+
+$minimumLineHeight: 0.7 !default;
+
+
+
+// Outputting this variable for use before applying
+// typeup-container() or typeup-body() mixins
+$typeup-lineHeight: typeup-calcLineHeight($fontSize, $lineLength, $xHeight) !default;
+
+//-----------------------
+//
+// DETAILED SETTINGS
+//
+//-----------------------
+
+// If true, will copy
+// heading styles to a class
+// like .heading1
+$doubleStrandedHeadingClasses: false !default;
+
+// H1 gets ms(4), h2 gets (ms3) and so on.
+// Modular scale won't go below 0, though.
+//
+// So if you put in 2 here,
+// h1 will get ms(2), h2 will get ms(1) and
+// all the rest will get ms(0)
+$startModularScaleAt: 4 !default;
+
+// Using square root for line height calculation
+
+$calcExponent: 1/2 !default;
+
+//----------------------------------
+// Heading spacing default settings
+//----------------------------------
+
+// This determines if headings have spacing relative to global
+// (paragraph text) line height (=true), or the calculated line
+// height of the heading (=false). False is recommended as it
+// maintains a solid relative spacing when the headings line height
+// is significantly larger or smaller than the global line height.
+$overrideSpacingWithBaseline: false !default;
+
+// How many line-heights of margin on top of heading
+$headingLinesBefore: 1 !default;
+
+// How many line-height of margin on bottom of heading
+$headingLinesAfter: 0 !default;
+
+// Amount of baseline-shift in em (relative to heading size)
+$headingBaselineShift:0em !default;
+
+//----------------------------------
+// Heading spacing
+//----------------------------------
+
+// H1 Spacing settings
+$h1LinesBefore: 1 !default;
+$h1LinesAfter: $headingLinesAfter !default;
+$h1BaselineShift: $headingBaselineShift !default;
+
+// H2 Spacing settings
+$h2LinesBefore: $headingLinesBefore !default;
+$h2LinesAfter: $headingLinesAfter !default;
+$h2BaselineShift: $headingBaselineShift !default;
+
+// H3 Spacing settings
+$h3LinesBefore: $headingLinesBefore !default;
+$h3LinesAfter: $headingLinesAfter !default;
+$h3BaselineShift: $headingBaselineShift !default;
+
+// H4 Spacing settings
+$h4LinesBefore: $headingLinesBefore !default;
+$h4LinesAfter: $headingLinesAfter !default;
+$h4BaselineShift: $headingBaselineShift !default;
+
+// H5 Spacing settings
+$h5LinesBefore: $headingLinesBefore !default;
+$h5LinesAfter: $headingLinesAfter !default;
+$h5BaselineShift: $headingBaselineShift !default;
+
+// H6 Spacing settings
+$h6LinesBefore: $headingLinesBefore !default;
+$h6LinesAfter: $headingLinesAfter !default;
+$h6BaselineShift: $headingBaselineShift !default;

metadata

@@ -0,0 +1,97 @@
+--- !ruby/object:Gem::Specification
+name: typeup
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Tommi Kaikkonen
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-02-26 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+- !ruby/object:Gem::Dependency
+  name: modular-scale
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.6
+description: A Compass extension for quick typesetting
+email:
+- tommi@kaikkonendesign.fi
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/typeup.rb
+- stylesheets/_typeup.scss
+- stylesheets/typeup/_settings.scss
+- stylesheets/typeup/_functions.scss
+homepage: http://tommikaikkonen.github.com/type-up/
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: A typesetting system with great versatility and ease of use
+test_files: []