piecss 0.1.0.alpha.01

data/sass/piecss/utilities/units.scss

@@ -0,0 +1,166 @@
+// Copyright (C) 2014 Babs Gösgens. Licensed under MIT; see LICENSE.txt
+
+
+// Content
+// 1. Functions:
+//    strip-unit
+//    to-unit
+//    to-px
+// 2. Mixins:
+//    rem
+
+
+// 1. FUNCTIONS
+
+/**
+ * Accepts a value and returns it without a value.
+ * @link http://hugogiraudel.com/2013/08/12/sass-functions/ Courtesy Hugo Giraudel
+ *
+ * @since 0.1
+ *
+ * @param {Number} $value - A value in any unit (px, rem, em, %, pt)
+ *
+ * @return {Number} - The value stripped of its unit
+ */
+
+@function strip-unit($value)
+{
+    @if $value==0 {
+        @return $value;
+    }
+    @return $value / ($value * 0 + 1);
+}
+
+
+/**
+ * Convert a px value to a new unit, within the context of it's containing element
+ *
+ * @since 0.1
+ *
+ * @param {Number} $target-px - The final size in px
+ * @param {Number} $unit ($unit) - The final unit to which $target-px is converted, e.g. px, rem, em, %
+ * @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em
+ *
+ * @return {Number} - The value in the requested unit
+ */
+
+@function to-unit($value, $unit: $unit, $context: $default-font-size)
+{
+    @if unit($value) != px {
+        /* Convert the value to px first */
+        $value: to-px($value);
+    }
+
+    @if unit($unit)=="%" {
+        $value: percentage($value / $context);
+    }
+    @elseif unit($unit)=="px" {
+        $value: $value;
+    }
+    @else {
+        $value: $value / $context * $unit;
+    }
+
+    @return $value;
+}
+
+
+/**
+ * Convert any unit to a px value, within the context of it's containing element
+ *
+ * @since 0.1
+ *
+ * @param {Number} $value - The value to convert, in any unit
+ * @param {Number} $context ($default-font-size) - The context of the targeted element, for calculations to em
+ * 
+ * @return {Number} - The value in px
+ */
+
+@function to-px($value, $context: $default-font-size)
+{
+    @if unit($value)=="px" {
+        @debug $value;
+    }
+    @elseif unit($value)=="rem" {
+        $value: rem-to-px($value);
+    }
+    @elseif unit($value)=="em" {
+        $value: em-to-px($value, $context);
+    }
+    @elseif unit($value)=="%" {
+        $value: percentage-to-px($value);
+    }
+
+    @return $value;
+
+}
+
+/**
+ * Convert a value in rem to a px value
+ *
+ * @since 0.1
+ *
+ * @param {Number} $value - The value to convert
+ * 
+ * @return {Number} - The value in px
+ */
+
+@function rem-to-px($value)
+{
+    @return $default-font-size * strip-unit($value);
+}
+
+/**
+ * Convert a value in em to a px value
+ *
+ * @since 0.1
+ *
+ * @param {Number} $value - The value to convert
+ * @param {Number} $context ($default-font-size) - The context of the targeted element
+ * 
+ * @return {Number} - The value in px
+ */
+
+@function em-to-px($value, $context: $default-font-size)
+{
+    @return $context * strip-unit($value);
+}
+
+/**
+ * Convert a value in em to a px value
+ *
+ * @since 0.1
+ *
+ * @todo Needs to take into account the context
+ *
+ * @param {Number} $value - The value to convert
+ * @param {Number} $context ($default-font-size) - The context of the targeted element
+ * 
+ * @return {Number} - The value in px
+ */
+
+@function percentage-to-px($value, $context: $default-font-size1)
+{
+    @return $value/10% + 0px;
+}
+
+
+// 2. MIXINS
+
+
+/**
+ * Mixin a property in rem and the fallback in another unit
+ *
+ * @since 0.1
+ *
+ * @param {Number} $target-px - The targeted size in px
+ * @param {String} $property - The property-name
+ * @param {Number} $unit ($rem-fallback-unit) - The fallback unit to use
+ * @param {Number} $context-px ($default-font-size) - The context of the targeted element
+ */
+
+@mixin rem($target-px, $property, $unit: $rem-fallback-unit, $context: $default-font-size)
+{
+    #{$property}: to-unit($target-px, $context, $rem-fallback-unit);
+    #{$property}: to-unit($target-px, $default-font-size, 1rem);
+}

data/templates/project/_settings.scss

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2014 Crossing Hippos - Babs Gösgens. All rights reserved.
+ * Licensed under MIT; see LICENSE.txt
+ */
+
+$single-direction-elements: (ul,p,pre,table,hr,article);
+
+$column-widths: (
+    $small_handheld: (main: 1/1, side: 1/1),
+    $small_desktop: (main: 2/3, side: 1/3),
+);
+
+$reset-list: true;
+
+$corner-radius: 4px;
+
+
+$form-elements: add-properties(
+    (
+        border-radius: $corner-radius
+    ),
+    $form-field-base-selector,
+    $form-elements
+);

data/templates/project/examples.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>Piecss</title>
+	<link href="./stylesheets/piecss.css" rel="stylesheet" media="screen">
+</head>
+<body>
+
+
+<div class="main">
+
+	<h2>Layout</h2>
+
+	Please refer to the reference guide on http://www.piecss.com/docs.
+You can also find tutorials on http://www.piecss.com/tutorials.
+
+
+	<div class="column">1</div><!--
+	--><div class="column column--half">2</div><!--
+	--><div class="column column--half">3</div><!--
+	--><div class="column column--half">4</div><!--
+	--><div class="column column--half">5</div><!--
+	--><div class="column column--half">
+		<div class="column column--half">7</div><!--
+	--><div class="column column--half">8</div><!--
+	--></div>
+
+
+	<h2>Type</h2>
+
+	<h1>Heading 1</h1>
+	<h2>Heading 2</h2>
+	<h3>Heading 3</h3>
+	<h4>Heading 4</h4>
+	<h5>Heading 5</h5>
+	<h6>Heading 6</h6>
+
+	<p class="column">Sweet <a href="#cantgothere">gingerbread</a> tiramisu cotton candy sweet roll. Sugar plum sweet sugar plum. Tiramisu bear claw pie tiramisu. Donut candy canes chocolate cake icing gummies. Tiramisu gummi bears danish chocolate cake halvah jelly cake. Marzipan unerdwear.com bonbon apple pie wafer tart cookie. Liquorice cookie jelly-o marzipan muffin. Chocolate bar jujubes ice cream muffin tiramisu pudding. Dragée dessert dessert. Soufflé tiramisu sweet biscuit cheesecake donut. Wafer toffee dessert bonbon muffin toffee. Apple pie marzipan dessert icing gummies tart marshmallow. Biscuit gingerbread cupcake cake cupcake tootsie roll. Brownie cheesecake cupcake halvah.</p>
+
+
+	<h2>Lists</h2>
+
+	<ul>
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy</li>
+	</ul>
+
+	<ol>
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy</li>
+	</ol>
+
+	<ul class="list">
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy
+			<ol class="list">
+				<li>Gingerbread</li>
+				<li>Tiramisu</li>
+				<li>Cotton candy
+					<ol class="list list--outside">
+						<li>Gingerbread</li>
+						<li>Tiramisu</li>
+						<li>Cotton candy</li>
+					</ol>
+				</li>
+			</ol>
+
+			<ul class="list">
+				<li>Gingerbread</li>
+				<li>Tiramisu</li>
+				<li>Cotton candy</li>
+			</ul>
+		</li>
+	</ul>
+
+	<ol class="list">
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy</li>
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy</li>
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy</li>
+		<li>Gingerbread</li>
+		<li>Tiramisu</li>
+		<li>Cotton candy</li>
+	</ol>
+
+
+	<h2>Tables</h2>
+
+	<table>
+		<caption>Recipees</caption>
+		<colgroup>
+			<col class="name" title="Name">
+			<col class="ingredients" title="Ingredients">
+			<col class="time" title="Cooking Time">
+		</colgroup>
+		<tbody>
+			<tr>
+				<td>Candy sweet roll</td>
+				<td>
+					<ul>
+						<li>Sugar</li>
+						<li>Flour</li>
+						<li>Butter</li>
+					</ul>
+				</td>
+				<td>20 minutes</td>
+			</tr>
+		</tbody>
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Ingredients</th>
+				<th>Cooking Time</th>
+			</tr>
+		</thead>
+		<tfoot>
+			<tr>
+				<td id="3">Sugar is bad for you.</td>
+			</tr>
+		</tfoot>
+	</table>
+
+
+	<h2>Forms</h2>
+
+	<form>
+	<fieldset>
+		<legend>Recipe</legend>
+		<fieldset>
+			<legend>Ingredients</legend>
+			<div>
+				<label for="text">Type</label>
+				<input class="" id="text" type="text" value="">
+			</div>
+			<div>
+				<label for="search">Search</label>
+				<input class="" id="text" type="search" value="">
+			</div>
+			<div>
+				<label for="color">Color</label>
+				<input class="" id="text" type="color" value="">
+			</div>
+			<div>
+				<label for="range">Range</label>
+				<input class="" id="text" type="range" value="">
+			</div>
+			<div>
+				<label for="select1">Select</label>
+				<select name="select1">
+					<option>Pick one</option>
+					<optgroup label="Group">
+						<option>High in calories</option>
+						<option>Low in calories</option>
+					</optgroup>
+				</select>
+			</div>
+			<div>
+				<label for="select2">Select</label>
+				<select name="select2" size="5" multiple="multiple">
+					<option>Pick many</option>
+					<optgroup label="Group">
+						<option>High in calories</option>
+						<option>Low in calories</option>
+					</optgroup>
+				</select>
+			</div>
+			<fieldset>
+				<legend>Choose</legend>
+				<div>
+					<label for="radio1">High in calories</label>
+					<input class="" id="radio1" type="radio" name="radio" value="">
+				</div>
+				<div>
+					<label for="radio2">Low in calories</label>
+					<input class="" id="radio2" type="radio" name="radio" value="">
+				</div>
+			</fieldset>
+			<fieldset>
+				<legend>Check</legend>
+				<div>
+					<label for="check1">High in calories</label>
+					<input class="" id="check1" type="checkbox" name="checkbox" value="">
+				</div>
+				<div>
+					<label for="check2">Low in calories</label>
+					<input class="" id="check2" type="checkbox" name="checkbox" value="">
+				</div>
+			</fieldset>
+		</fieldset>
+		<fieldset>
+			<legend>Preparation</legend>
+			<div>
+				<label for="textarea">Name</label>
+				<textarea class="" id="textarea"></textarea>
+			</div>
+			<div>
+				<label for="textarea">Name</label>
+				<textarea class="editor--medium" id="textarea"></textarea>
+			</div>
+			<div>
+				<label for="textarea">Name</label>
+				<textarea class="editor--large" id="textarea"></textarea>
+			</div>
+		</fieldset>
+	</fieldset>
+	</form>
+
+</div><!--
+--><div class="side">
+	<p class="column">Sweet <a href="#cantgothere">gingerbread</a> tiramisu cotton candy sweet roll. Sugar plum sweet sugar plum. Tiramisu bear claw pie tiramisu. Donut candy canes chocolate cake icing gummies. Tiramisu gummi bears danish chocolate cake halvah jelly cake. Marzipan unerdwear.com bonbon apple pie wafer tart cookie. Liquorice cookie jelly-o marzipan muffin. Chocolate bar jujubes ice cream muffin tiramisu pudding. Dragée dessert dessert. Soufflé tiramisu sweet biscuit cheesecake donut. Wafer toffee dessert bonbon muffin toffee. Apple pie marzipan dessert icing gummies tart marshmallow. Biscuit gingerbread cupcake cake cupcake tootsie roll. Brownie cheesecake cupcake halvah.</p>
+</div>
+
+
+</body>
+</html>

data/templates/project/manifest.rb

@@ -0,0 +1,13 @@
+stylesheet 'screen.scss', :media => 'screen, projection'
+stylesheet '_settings.scss'
+
+html 'examples.html'
+
+help %Q{
+Please refer to the reference guide on http://www.piecss.com/docs.
+You can also find tutorials on http://www.piecss.com/tutorials.
+}
+
+welcome_message %Q{
+Both thumbs up for using Piecss! We'll have your project up and running in no time. To help you get started, we've added 'examples.html' to your project folder. Open it in your browser to get to the goodies.
+}

data/templates/project/screen.scss

@@ -0,0 +1,96 @@
+@charset "UTF-8";
+/*! piecss.scss v0.1 | MIT License | git.io/piecss/piecss */
+
+
+// ==========================================================================
+//
+// CONTENT
+//
+// ==========================================================================
+//
+// 1. Variables
+//    debug-rhythm
+// 2. Imports
+//    2a. Dependencies
+//    2b. Settings
+//        Piecss settings
+//        Project settings
+//    2c. Utilities
+//        Piecss utilities
+//        Project utilities
+//    2d. Behavior (output)
+//        Piecss behavior
+//        Project behavior
+
+
+// ==========================================================================
+//
+// 1. VARIABLES
+//
+// ==========================================================================
+
+
+// ==========================================================================
+// $debug-rhythm - If true, will show vertical rhythm
+// ==========================================================================
+
+$debug-rhythm: false;
+
+
+// ==========================================================================
+//
+// 2. IMPORTS
+//
+// ==========================================================================
+//
+// 2a. DEPENDENCIES
+//
+// ==========================================================================
+
+@import "Compass";
+
+
+// ==========================================================================
+//
+// 2b. UTILITIES
+//
+// 1. Piecss utilities
+// 2. Project utilities (if any)
+//
+// ==========================================================================
+
+@import "piecss/utilities";
+
+
+// ==========================================================================
+//
+// 2c. SETTINGS
+//
+// 1. Piecss settings
+// 2. Project settings (if any)
+//
+// ==========================================================================
+
+@import "piecss/settings";
+@import "settings";
+
+
+// ==========================================================================
+//
+// 2c. BEHAVIOR
+//
+// 1. Piecss behavior
+// 2. Project behavior - you should have that ;)
+//
+// ==========================================================================
+
+@import "piecss/behavior";
+
+// Or, import individually:
+
+/*
+@import "../../sass/base";
+@import "../../sass/grid";
+@import "../../sass/form";
+@import "../../sass/list";
+*/