Partializing Sass Port

typeplate · Aug 31, 2014 · 44835bd · 44835bd
1 parent 87b7cc5
commit 44835bd
Show file tree

Hide file tree

Showing 10 changed files with 875 additions and 856 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = tab
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

diff --git a/scss/_extends.scss b/scss/_extends.scss
@@ -0,0 +1,66 @@
+// ================================================================================= //
+// Extends
+// ================================================================================= //
+
+// $Ampersands
+// -------------------------------------//
+// Call your custom ampersand on any element.
+//
+// @markup                  <h6 class="ampersand">Dewey Cheat 'em & Howe</h6>
+// @example                 .ampersand { @extend %ampersand-placeholder; }
+
+%ampersand-placeholder {
+	@include ampersand($typl8-amp-fontface, $typl8-amp-fontfamily);
+}
+
+
+// $Blockquote
+// -------------------------------------//
+// Style your blockquote citations
+//
+// @example                     .citation { @extend %cite; }
+
+%cite {
+	@include cite-style($typl8-cite-display, $typl8-cite-align, $typl8-cite-font-size);
+}
+
+
+// $Wordwrap
+// -------------------------------------//
+// Control word wrapping and breaks in your text.
+//
+// 'normal'                     Lines may only break at normal word break points.
+// 'break-word'             Unbreakable words may be broken at arbitrary points.
+// @example                     article { @extend %breakword; }
+
+%breakword {
+	word-wrap: break-word;
+}
+
+%normal-wrap {
+	word-wrap: normal;
+}
+
+%inherit-wrap {
+	word-wrap: auto;
+}
+
+
+// $OpenType
+// -------------------------------------//
+// Control OpenType feature settings where desired.
+//
+// smallcaps                    body { @extend %font-feature--smcp; }
+// text figures             body { @extend %font-feature--onum; }
+
+%font-feature--smcp {
+	@each $prefix in $typl8-prefixes {
+		#{$prefix}font-feature-settings: "smcp";
+	}
+}
+
+%font-feature--onum {
+	@each $prefix in $typl8-prefixes {
+		#{$prefix}font-feature-settings: 'onum';
+	}
+}
diff --git a/scss/_fonts.scss b/scss/_fonts.scss
@@ -0,0 +1,42 @@
+// ================================================================================= //
+// Fonts
+// ================================================================================= //
+
+// $Unicode-Range-Ampersand
+// -------------------------------------//
+
+@font-face {
+	font-family: '#{$typl8-amp-fontface}';
+	src: $typl8-amp-src;
+	unicode-range: U+0026;
+}
+
+@font-face {
+	font-family: '#{$typl8-amp-fontface}'; // fallback
+	src: $typl8-amp-fallback;
+	unicode-range: U+270C;
+}
+
+
+// $Icon-Font-Helper
+// -------------------------------------//
+// Loading multiple icon fonts using Compass
+//
+// 1. Install Compass.
+// 2. Create a 'fonts' directory in the root of your project.
+// 3. Specify within your 'config.rb' the following line…
+//      fonts_dir = "name-of-your-fonts-directory" ( i.e. fonts_dir = "fonts" )
+// 4. Set your '$typl8-icon-fonts' variable as noted
+
+@if ($typl8-icon-fonts != null) {
+	@each $font in $typl8-icon-fonts {
+		@include font-face($font,
+			font-files(
+				'#{$font}/#{$font}.woff',
+				'#{$font}/#{$font}.ttf',
+				'#{$font}/#{$font}.svg', svg
+				),
+			  '#{$font}/#{$font}.eot'
+		)
+	}
+}
diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -0,0 +1,32 @@
+// ================================================================================= //
+// Functions
+// ================================================================================= //
+
+
+// $Context Calculator
+// -------------------------------------//
+// target / context = result
+//
+// @example             p { font-size: context-calc(24, 16, px); }
+
+@function context-calc($scale, $base, $value) {
+	@return ($scale/$base)#{$value};
+}
+
+
+// $Measure-Margin
+// -------------------------------------//
+// divide 1 unit of measure by given font-size & return relative value
+
+@function measure-margin($scale, $measure, $value) {
+	$pixelValue: $measure/$scale;
+	$remValue: $pixelValue * $typl8-font-base;
+
+	@if $value == rem {
+		@return $pixelValue#{$value};
+	} @else if $value == em {
+		@return ($remValue/$scale)#{$value};
+	} @else {
+		@return $remValue#{$value};
+	}
+}
diff --git a/scss/_helpers.scss b/scss/_helpers.scss
@@ -0,0 +1,146 @@
+// ================================================================================= //
+// Helpers
+// ================================================================================= //
+
+
+// $Dropcap
+// -------------------------------------//
+
+.drop-cap {
+    @include dropcap(
+        $typl8-dropcap-float-position,
+        $typl8-dropcap-font-size,
+        $typl8-dropcap-font-family,
+        $typl8-dropcap-txt-indent,
+        $typl8-dropcap-margin,
+        $typl8-dropcap-padding,
+        $typl8-dropcap-color,
+        $typl8-dropcap-line-height,
+        $typl8-dropcap-bg
+    );
+}
+
+// @notes
+// combats our sibling paragraph syling and indentation
+p + .drop-cap {
+    text-indent: 0;
+    margin-top: 0;
+}
+
+
+// $Definition-Lists
+// -------------------------------------//
+/**
+ * Lining Definition Style Markup
+ *
+    <dl class="lining">
+        <dt><b></b></dt>
+        <dd></dd>
+    </dl>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+.lining {
+    @include definition-list-style(lining);
+}
+
+/**
+ * Dictionary Definition Style Markup
+ *
+    <dl class="dictionary-style">
+        <dt><b></b></dt>
+        <dd></dd>
+    </dl>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+.dictionary-style {
+    @include definition-list-style(dictionary-style);
+}
+
+
+// $Blockquote-Markup
+// -------------------------------------//
+/**
+ * Blockquote Markup
+ *
+        <figure>
+            <blockquote cite="">
+                <p></p>
+            </blockquote>
+            <figcaption>
+                <cite>
+                    <small><a href=""></a></small>
+                </cite>
+            </figcaption>
+        </figure>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+
+// $Pull-Quotes
+// -------------------------------------//
+// @notes
+// http://24ways.org/2005/swooshy-curly-quotes-without-images
+
+/**
+ * Pull Quotes Markup
+ *
+    <aside class="pull-quote">
+        <blockquote>
+            <p></p>
+        </blockquote>
+    </aside>
+ *
+ * Extend this object into your custom stylesheet.
+ *
+ */
+
+.pull-quote {
+    @include pull-quotes(
+        $typl8-pull-quote-fontsize,
+        $typl8-pull-quote-opacity,
+        $typl8-pull-quote-color
+    );
+}
+
+
+// $Figures
+// -------------------------------------//
+/**
+ * Figures Markup
+ *
+    <figure>
+        <figcaption>
+            <strong>Fig. X.X | </strong><cite title=""></cite>
+        </figcaption>
+    </figure>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+
+// $Footnotes
+// -------------------------------------//
+/**
+ * Footnote Markup : Replace 'X' with your unique number for each footnote
+ *
+    <article>
+        <p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
+        <footer>
+            <ol class="foot-notes">
+                <li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
+            </ol>
+        </footer>
+    </article>
+ *
+ * Extend this object into your markup.
+ *
+ */