Initial commit - v0.1

.gitignore

@@ -0,0 +1,3 @@
+!.keep
+*.DS_Store
+*.sass-cache

.scss-lint.yml

@@ -0,0 +1,22 @@
+exclude:
+  - '_assets/stylesheets/vendor/**'
+
+linters:
+  StringQuotes:
+    enabled: true
+    style: double_quotes
+
+  UrlFormat:
+    enabled: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 4
+
+  PropertySortOrder:
+    enabled: true
+    order: recess
+
+  NestingDepth:
+    enabled: true
+    max_depth: 4

Gemfile

@@ -0,0 +1,5 @@
+source "https://rubygems.org"
+
+gem "autoprefixer-rails", "~> 5.1.7.1"
+gem "sass", "~> 3.4.13"
+gem "scss-lint", "~> 0.34.0"

Gemfile.lock

@@ -0,0 +1,21 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    autoprefixer-rails (5.1.7.1)
+      execjs
+      json
+    execjs (2.4.0)
+    json (1.8.2)
+    rainbow (2.0.0)
+    sass (3.4.13)
+    scss-lint (0.34.0)
+      rainbow (~> 2.0)
+      sass (~> 3.4.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  autoprefixer-rails (~> 5.1.7.1)
+  sass (~> 3.4.13)
+  scss-lint (~> 0.34.0)

README.md

@@ -0,0 +1,12 @@
+stacss
+======
+
+*The non-obtrusive SCSS framework.*
+
+## Usage
+
+Copy the contents of `/scss` into your application `scss` folder and you are ready to go!
+
+## License
+
+MIT License

scss/_base.scss

@@ -0,0 +1,129 @@
+// =============================================================================
+// Base
+// =============================================================================
+
+// Typography
+// =============================================================================
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html { font-size: $base-font-size; }
+
+body {
+  margin: 0 auto;
+  font-family: $base-font-family;
+  -webkit-font-smoothing: antialiased;
+  font-weight: $base-font-weight;
+  line-height: $base-line-height;
+  color: $base-font-color;
+}
+
+p {
+  margin: 0;
+  font-weight: $base-font-weight;
+}
+
+b,
+strong {
+  font-weight: $base-font-weight-bold;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  line-height: 1.25;
+  text-rendering: optimizeLegibility;
+}
+
+h1 {
+  font-size: $base-font-size * 2.25;
+}
+
+h2 {
+  font-size: $base-font-size * 2;
+}
+
+h3 {
+  font-size: $base-font-size * 1.75;
+}
+
+h4 {
+  font-size: $base-font-size * 1.5;
+}
+
+h5 {
+  font-size: $base-font-size * 1.25;
+}
+
+h6 {
+  font-size: $base-font-size;
+}
+
+a {
+  color: $base-accent-color;
+  text-decoration: none;
+  transition: color $base-transition-speed linear;
+
+  &:hover,
+  &:active {
+    color: $base-accent-highlighted-color;
+  }
+
+  &:focus {
+    color: $base-accent-highlighted-color;
+    outline: none;
+  }
+}
+
+hr {
+  margin: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid $base-border-color;
+  border-left: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  margin: 0;
+}
+
+abbr,
+acronym {
+  cursor: help;
+  border-bottom: 1px dotted $base-border-color;
+}
+
+blockquote {
+  padding-left: $base-line-height / 2;
+  margin: $base-line-height 0;
+  color: lighten($base-font-color, 15);
+  border-left: 2px solid $base-border-color;
+}
+
+cite {
+  font-style: italic;
+  color: $base-accent-color;
+}
+
+// Selections
+// =============================================================================
+
+::-moz-selection {
+  color: $white;
+  background: $brand-primary;
+}
+
+::selection {
+  color: $white;
+  background: $brand-primary;
+}

scss/_mixins.scss

@@ -0,0 +1,47 @@
+// =============================================================================
+// Mixins
+// =============================================================================
+
+// Handling breakpoints for media queries
+// @param {Number} $val the media query specification.
+
+@mixin breakpoint($val) {
+  @if $val == small {
+    @media all and (max-width: 767px) {
+      @content;
+    }
+  } @else if $val == medium {
+    @media all and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $val == large {
+    @media all and (max-width: 1223px) {
+      @content;
+    }
+  } @else {
+    @warn "The parameter #{$val} is not valid";
+  }
+}
+
+// Generate font face
+// @param {String} $font-name the font name used inside CSS
+// @param {String} $font-filepath-and-name the filepath and name of the font file.
+// @param {Boolean} $is-remote True if the file is located externally.
+
+@mixin font-face($font-name, $font-filepath-and-name, $is-remote: "false") {
+  @if $is-remote == "true" {
+    @font-face {
+      font-family: $font-name;
+      src: url($font-filepath-and-name+".eot?#iefix") format("embedded-opentype"),
+           url($font-filepath-and-name+".woff") format("woff"),
+           url($font-filepath-and-name+".ttf")  format("truetype");
+     }
+  } @else {
+    @font-face {
+      font-family: $font-name;
+      src: url(asset_path($font-filepath-and-name+".eot?#iefix")) format("embedded-opentype"),
+           url(asset_path($font-filepath-and-name+".woff")) format("woff"),
+           url(asset_path($font-filepath-and-name+".ttf")) format("truetype");
+    }
+  }
+}

scss/_variables.scss

@@ -0,0 +1,68 @@
+// =============================================================================
+// Variables
+// =============================================================================
+
+// Typography
+// =============================================================================
+
+$sans-serif: Helvetica, Arial, sans-serif;
+$serif: Courier, serif;
+$base-font-family: $sans-serif;
+
+$base-font-weight: 300;
+$base-font-weight-bold: 700;
+
+// Colors
+// =============================================================================
+
+// Shades of gray
+
+$black: #101111;
+$gray-darkest: #292c30;
+$gray-darker: #3f4850;
+$gray-dark: #718087;
+$gray: #8e9da5;
+$gray-light: #8e98a4;
+$gray-lighter: #c5ced2;
+$gray-lightest: #f1f1f1;
+$white: #fff;
+
+// Colors
+
+$brand-info: #0477bf;
+$brand-success: #44a65c;
+$brand-danger: #d94343;
+$brand-primary: #b465e1;
+$brand-warning: #f2bb16;
+
+// Font color
+
+$base-font-color: $gray-dark;
+$base-accent-color: $brand-primary;
+$base-accent-highlighted-color: darken($base-accent-color, 15);
+
+// Border color
+
+$base-border-color: $gray-lighter;
+
+// Sizes
+// =============================================================================
+
+// Grid
+
+$columns: 12;
+$max-width: 1140px;
+$gutter: 20px;
+$one-column: 100% / $columns;
+$negative-gutter: 0 - $gutter;
+
+// Font sizes
+
+$base-font-size: 16px;
+$base-line-height: 1.5;
+
+// Box sizes
+
+$base-border-radius: 5px;
+$base-box-shadow: 0 2px 0 darken($gray-lighter, 5);
+$base-transition-speed: .1s;

scss/application.scss

@@ -0,0 +1,21 @@
+// Vendors
+
+@import "vendor/normalize";
+
+// Settings
+
+@import "variables";
+@import "mixins";
+@import "base";
+
+// Layouts
+
+@import "layouts/grid";
+
+// Modules
+
+@import "modules/alerts";
+@import "modules/buttons";
+@import "modules/forms";
+@import "modules/icons";
+@import "modules/tables";

scss/layouts/_grid.scss

@@ -0,0 +1,50 @@
+// =============================================================================
+// Grid
+// =============================================================================
+
+// Settings
+// =============================================================================
+
+// Creates widths for each column
+
+@mixin column-generator() {
+  @for $i from 1 through ($columns - 1) {
+    &.with-#{$i}col {
+      width: $one-column * $i;
+    }
+  }
+}
+
+// Component
+// =============================================================================
+
+.grid {
+  display: block;
+  padding: 0;
+  margin: 0 $negative-gutter;
+  font-size: 0;
+  text-align: left;
+}
+
+// Descendants
+// =============================================================================
+
+.grid-cell {
+  @include column-generator();
+  display: inline-block;
+  width: 100%;
+  padding: 0 $gutter;
+  margin: 0;
+  font-size: $base-font-size;
+  text-align: left;
+  vertical-align: top;
+}
+
+// Modifiers
+// =============================================================================
+
+.grid-centered {
+  max-width: $max-width;
+  margin-right: auto;
+  margin-left: auto;
+}