compass-moext 3.0.0

data/lib/compass-moext.rb

@@ -0,0 +1,3 @@
+require "compass"
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register("compass-moext", :path => extension_path)

data/stylesheets/_moext.scss

@@ -0,0 +1,6 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+@import 'moext/helpers/units';
+@import 'moext/helpers/string';
+@import 'moext/base';
+@import 'moext/utils';
+@import 'moext/grid';

data/stylesheets/moext/_base.scss

@@ -0,0 +1,63 @@
+$app-ns: "" !default;
+$app-ns-prefix: ns-prefix($app-ns) !default;
+
+//: Typography
+$fonts: (
+  "heading": '"Franklin Gothic Medium", Tahoma, "Helvetica Neue", Arial, sans-serif',
+  "content": 'cambria, georgia, "Times New Roman", Times, serif',
+  "code": 'consolas, "lucida console", "courier new", monospace',
+  "size": 18px,
+  "line-height": 1.3889
+) !default;
+
+$colors: (
+  "bg-main": #fff,
+  "text-main": #000,
+  "link": #00f,
+  "link-hover": #00c,
+  "link-visited": #608,
+  "accent-1": #66f
+) !default;
+
+$colors: map-merge($colors, (
+    "muted-1": lighten(map-get($colors, accent-1), 10%),
+    "neutral-1": #808080,
+    "darken-1": darken(map-get($colors, accent-1), 10%),
+    "darken-2": darken(map-get($colors, accent-1), 20%)
+  )
+) !default;
+
+$dimensions: (
+  "box-spacing": 10px,
+) !default;
+
+$breakpoints: (
+  "large": 970px,
+  "medium": 800px,
+  "small": 460px
+) !default;
+
+//: Utility class names
+$layout: (
+  "block": "l-b",
+  "inline": "l-i",
+  "inline-block": "l-ib",
+  "clear-fix": "l-cfix",
+  "clear": "l-cb",
+  "clear-left": "l-cl",
+  "clear-right": "l-cr",
+  "float-none": "l-fn",
+  "float-left": "l-fl",
+  "float-right": "l-fr",
+  "hide": "l-hide",
+  "list-flat": "l-none",
+  "container": "l-wrapper",
+  "content": "l-content"
+) !default;
+
+$grid: (
+  "ns": "grid",
+  "columns": 12,
+  "outer-margin": 10px,
+  "column-gutter": 10px
+) !default;

data/stylesheets/moext/_grid.scss

@@ -0,0 +1,11 @@
+@for $i from 1 through map-get($grid, columns) {
+  .#{$app-ns-prefix + map-get($grid, ns)}-#{$i} {
+    width: to_percent(colwidth($i, 0), map-get($breakpoints, large) - map-get($grid, outer-margin) * 2);
+  }
+}
+
+@media screen and (max-width: map-get($breakpoints, small)) {
+  [class *= "#{$app-ns-prefix + map-get($grid, ns)}-"] {
+    width: 100%;
+  }
+}

data/stylesheets/moext/_print.scss

@@ -0,0 +1,56 @@
+/**
+ *  Print styles
+ */
+@media print {
+  body {
+    background: white !important;
+    color: black !important;
+    font: 10pt / 1.5 "Times New Roman", Times, serif;
+    margin: 0;
+    padding: 0;
+  }
+  img {
+    border: 0;
+    display: block;
+  }
+  /* base heading styles */
+  h1, h2, h3, h4, h5, h6 {
+    color: black !important;
+    font-weight: 700;
+    margin: 0;
+  }
+  h1 {
+    font-size: 20pt;
+  }
+  h2 {
+    font-size: 18pt;
+  }
+  h3 {
+    font-size: 16pt;
+  }
+  h4 {
+    font-size: 14pt;
+  }
+  h5, h6 {
+    letter-spacing: .5pt;
+  }
+  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    color: black;
+    text-decoration: none;
+  }
+  pre {
+    height: auto;
+  }
+  blockquote {
+    border-left: 1pt solid #808080;
+    padding-left: 3pt;
+  }
+  a {
+    color: blue;
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ") ";
+    font-size: 90%;
+  }
+}

data/stylesheets/moext/_utils.scss

@@ -0,0 +1,93 @@
+/**
+ * Utility Classes
+ */
+// Begin Placeholder classes
+%no-space {
+  margin: 0;
+  padding: 0;
+}
+
+%#{map-get($layout, content)} {
+  margin: 0 auto;
+  text-align: left;
+}
+
+%#{map-get($layout, hide)} {
+  display: none;
+  visibility: hidden;
+}
+
+%#{map-get($layout, list-flat)} {
+  list-style: none;
+}
+
+%#{map-get($layout, clear-fix)} {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+%#{map-get($layout, container)} {
+  text-align: center;
+}
+
+// END Placeholder classes
+
+.#{$app-ns-prefix + map-get($layout, clear-left)} {
+  clear: left;
+}
+
+.#{$app-ns-prefix + map-get($layout, clear-right)} {
+  clear: right;
+}
+
+.#{$app-ns-prefix + map-get($layout, clear)} {
+  clear: both;
+}
+
+.#{$app-ns-prefix + map-get($layout, float-left)} {
+  float: left;
+}
+
+.#{$app-ns-prefix + map-get($layout, float-right)} {
+  float: right;
+}
+
+.#{$app-ns-prefix + map-get($layout, float-none)} {
+  float: none;
+}
+
+.#{$app-ns-prefix + map-get($layout, hide)} {
+  @extend %#{map-get($layout, hide)};
+}
+
+.#{$app-ns-prefix + map-get($layout, inline)} {
+  display: inline;
+}
+
+.#{$app-ns-prefix + map-get($layout, inline-block)} {
+  display: inline-block;
+}
+
+.#{$app-ns-prefix + map-get($layout, block)} {
+  display: block;
+}
+
+.#{$app-ns-prefix + map-get($layout, list-flat)} {
+  @extend %#{map-get($layout, list-flat)};
+  @extend %no-space;
+}
+
+.#{$app-ns-prefix + map-get($layout, clear-fix)}:after {
+  @extend %#{map-get($layout, clear-fix)};
+}
+
+.#{$app-ns-prefix + map-get($layout, container)} {
+  @extend %#{map-get($layout, container)};
+}
+
+.#{$app-ns-prefix + map-get($layout, content)} {
+  @extend %#{map-get($layout, content)};
+}

data/stylesheets/moext/helpers/_string.scss

@@ -0,0 +1,8 @@
+@function ns-prefix($ns: $ns) {
+  @if str-length($ns) != 0 {
+    @return $ns + "-";
+  }
+  @else {
+    @return "";
+  }
+}

data/stylesheets/moext/helpers/_units.scss

@@ -0,0 +1,42 @@
+//: Functions
+// Canvas - ((Total Units -1) x Gutter) ├╖ Total Units
+@function colwidth($num, $padding: 0) {
+  @if $num <= map-get($grid, columns) {
+    $canvas: map-get($breakpoints, large) - map-get($grid, "outer-margin") * 2;
+    $total-units: map-get($grid, columns);
+    $gutter: map-get($grid, column-gutter);
+    @return ($canvas - ($total-units - 1) * $gutter) / $total-units * $num + ($num - 1) * $gutter - $padding * 2;
+  }
+  @else {
+    @return map-get($breakpoints, large);
+  }
+}
+
+@function to_ems($target, $context: $base-font-size) {
+  @return unit_mixin($target, $context, "em");
+}
+
+@function to_percent($target, $context: $base-font-size) {
+  @return unit_mixin($target, $context, "percent");
+}
+
+// Helper function to calculate units relative to the target (desired) size
+// and the context of the containing element
+@function unit_mixin($target, $context: $base-font-size, $units: "em") {
+  @if $target == 0 {
+    @return 0;
+  }
+  @else if $units == "percent" {
+    @return percentage($target / $context);
+  }
+  @else {
+    @if unit($target) == unit($context) {
+      @return $target / $context + 0#{$units};
+    }
+  }
+}
+
+// Removes the units from a value
+@function strip_units($number) {
+  @return $number / ($number * 0 + 1);
+}

data/templates/project/_base.scss

@@ -0,0 +1 @@
+$app-ns: "";

data/templates/project/_reset.scss

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

data/templates/project/_styles.scss

@@ -0,0 +1,174 @@
+h1 {
+  font: 35px/1.1429 map-get($fonts, heading);
+}
+
+h2 {
+  font: 30px/1.16667 map-get($fonts, heading);
+}
+
+h3 {
+  font: 25px/1.2 map-get($fonts, heading);
+}
+
+h4 {
+  font: 20px/1.25 map-get($fonts, heading);
+}
+
+h5 {
+  font: 18px/1.3889 map-get($fonts, heading);
+}
+
+h6 {
+  font: 16px/1.125 map-get($fonts, heading);
+}
+
+ul, ol, dl, p {
+  font-size: map-get($fonts, size);
+  line-height: map-get($fonts, line-height);
+  margin-top: 0;
+  margin-bottom: 1.5em;
+}
+
+dd, dt, li, label {
+  font-size: map-get($fonts, size);
+  line-height: map-get($fonts, line-height);
+}
+
+a {
+  color: map-get($colors, link);
+  text-decoration: none;
+  &:hover {
+    color: map-get($colors, link-hover);
+    text-decoration: underline;
+  }
+  &:visited {
+    color: map-get($colors, link-visited);
+  }
+}
+
+address, div {
+  font-size: map-get($fonts, size);
+  line-height: map-get($fonts, line-height);
+}
+
+abbr {
+  border-bottom: 1px dotted map-get($colors, neutral-1);
+  cursor: help;
+  letter-spacing: 1px;
+}
+
+b, strong, th {
+  font-weight: 700;
+}
+
+i, em {
+  font-style: italic;
+}
+
+sub, sup, small {
+  font-size: .65em;
+}
+
+sup {
+  line-height: 0;
+  vertical-align: super;
+}
+
+sub {
+  line-height: 0;
+  vertical-align: sub;
+}
+
+code, pre {
+  font-family: map-get($fonts, code);
+  font-size: map-get($fonts, size);
+}
+
+blockquote {
+  background: map-get($colors, muted-2);
+  border-left: 3px solid map-get($colors, muted-1);
+  padding: map-get($dimensions, box-spacing);
+}
+
+/**
+ * Table
+ */
+table {
+  font-size: map-get($fonts, size);
+  line-height: map-get($fonts, line-height);
+  margin-bottom: 1.5em;
+  width: 100%;
+}
+
+tr {
+  border-bottom: 1px solid map-get($colors, muted-1);
+}
+
+td, th {
+  padding: map-get($dimensions, box-spacing);
+  vertical-align: top;
+}
+
+caption {
+  font-weight: 700;
+  padding: map-get($dimensions, box-spacing);
+  text-align: center;
+}
+
+thead th {
+  border-bottom: 3px solid map-get($colors, accent-1);
+}
+
+tbody {
+  th {
+    background: map-get($colors, muted-1);
+  }
+  tr:nth-child(odd) {
+    background: map-get($colors, muted-2);
+  }
+}
+
+tfoot td {
+  text-align: center;
+}
+
+/**
+ * Lists 
+ */
+ol {
+  list-style: decimal outside;
+  padding-left: 30px;
+}
+
+ul {
+  list-style: disc outside;
+  padding-left: 30px;
+}
+
+/**
+ * Forms
+ */
+form {
+  padding: map-get($dimensions, box-spacing) 0;
+}
+
+fieldset {
+  border: 1px solid map-get($colors, muted-1);
+  padding: map-get($dimensions, box-spacing);
+  margin-bottom: map-get($fonts, size);
+}
+
+legend {
+  font-size: map-get($fonts, size);
+  padding: map-get($dimensions, box-spacing);
+}
+
+button, .btn, a.btn, input[type="submit"], input[type="reset"] {
+  cursor: pointer;
+  font-size: map-get($fonts, size);
+  font-family: map-get($fonts, content);
+  padding: map-get($dimensions, box-spacing);
+  &:hover {
+    text-decoration: none;
+  }
+}

data/templates/project/all.scss

@@ -0,0 +1,16 @@
+// Import base settings
+@import "base";
+
+##{$app-ns} {
+  @import "reset";
+}
+
+// Provide access to Compass and Momentum features
+@import "compass/css3";
+@import "compass";
+@import "moext";
+
+##{$app-ns} {
+  @import "styles";
+  @import "moext/print";
+}

data/templates/project/config.rb

@@ -0,0 +1,27 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :expanded
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+
+# Create sourcemaps
+sourcemap = true

data/templates/project/manifest.rb

@@ -0,0 +1,13 @@
+description "Momentum Compass Extension - a microlibrary for responsibly scoped modules"
+
+# Make sure you list all the project template files here in the manifest.
+stylesheet "_base.scss", :media => "all"
+stylesheet "_reset.scss", :media => "all"
+stylesheet "_styles.scss", :media => "all"
+stylesheet "all.scss", :media => "all"
+javascript "app.js"
+
+welcome_message %Q{
+Update the application namespace variable, $app-ns in _base.scss
+to get started.
+}

metadata

@@ -0,0 +1,76 @@
+--- !ruby/object:Gem::Specification
+name: compass-moext
+version: !ruby/object:Gem::Version
+  version: 3.0.0
+  prerelease: 
+platform: ruby
+authors:
+- Ethan Gardner
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-10-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.1
+description: Provides basic grid functions and structure for variable reuse
+email: edgincvg@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/compass-moext.rb
+- stylesheets/moext/helpers/_string.scss
+- stylesheets/moext/helpers/_units.scss
+- stylesheets/moext/_base.scss
+- stylesheets/moext/_grid.scss
+- stylesheets/moext/_print.scss
+- stylesheets/moext/_utils.scss
+- stylesheets/_moext.scss
+- templates/project/all.scss
+- templates/project/app.js
+- templates/project/config.rb
+- templates/project/manifest.rb
+- templates/project/_base.scss
+- templates/project/_reset.scss
+- templates/project/_styles.scss
+homepage: https://github.com/ethangardner/compass-moext
+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: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.28
+signing_key: 
+specification_version: 3
+summary: A micro library for Compass and SASS for building responsibly scoped applications
+test_files: []