Organised sass folders

scss/_vars.scss

@@ -0,0 +1,21 @@
+// Base
+
+$base-colour:            #444;
+$base-background-colour: #fff;
+
+$base-font-stack:        'Helvetica Neue', Helvetica, Arial, sans-serif;
+$base-font-size:         16;
+$base-line-height:       1.5;
+$base-margin-bottom:     ($base-font-size * $base-line-height) * 1px;
+
+// Breakpoints
+
+$breakpoint-small:       640px;
+$breakpoint-medium:      768px;
+$breakpoint-large:       1200px;
+
+// Scaffolding
+
+
+
+// Custom colours etc.

scss/base/_forms.scss

@@ -0,0 +1,47 @@
+input, 
+select, 
+textarea {
+  background-color: $base-background-colour;
+  border: solid 1px $base-colour;
+  color: $base-colour;
+  display: inline-block;
+  font: inherit;
+  line-height: $base-margin-bottom;
+  padding: ($base-margin-bottom / 4);
+  width: 100%;
+}
+
+input[type="checkbox"], 
+input[type="radio"] {
+  background: transparent;
+  border: 0;
+  width: auto;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+}
+
+select {
+  height: ($base-margin-bottom * 1.5);
+}
+
+textarea {
+  min-height: ($base-margin-bottom * 4);
+}
+
+.form__group {
+  margin-bottom: $base-margin-bottom;
+  .form__group__controls {
+    @extend .clearfix;
+    label {
+      font-weight: normal;
+    }
+    &.form__group__controls--inline {
+      label {
+        display: inline-block;
+      }
+    }
+  }
+}

scss/base/_normalise.scss

@@ -0,0 +1,113 @@
+* {
+  -moz-osx-font-smoothing: grayscale;
+   -webkit-font-smoothing: antialiased;
+           font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+html {
+  background-color: $base-background-colour;
+  color: $base-colour;
+  font: #{($base-font-size * 6.25) * 1%}/#{$base-line-height} $base-font-stack;
+  min-height: 100%;
+}
+
+a {
+  color: $base-colour;
+  text-decoration: none;
+}
+
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6, 
+p, 
+hr, 
+ul, 
+ol {
+  margin-bottom: $base-margin-bottom;
+}
+
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+  line-height: $base-margin-bottom;
+}
+
+h1 {
+  @include font-size($base-font-size * 2);
+}
+
+h2 {
+  @include font-size($base-font-size * 1.75);
+}
+
+h3 {
+  @include font-size($base-font-size * 1.5);
+}
+
+h4 {
+  @include font-size($base-font-size * 1.25);
+}
+
+h5,
+h6 {
+  @include font-size($base-font-size);
+}
+
+ul, 
+ol {
+  margin-left: $base-margin-bottom;
+}
+
+ul ul, 
+ol ol {
+  margin-bottom: 0;
+}
+
+img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+blockquote {
+  font-family: serif;
+  padding-left: $base-margin-bottom;
+}
+
+em {
+  font-style: italic;
+}
+
+hr {
+  background-color: $base-colour;
+  border: 0;
+  color: $base-colour;
+  height: 1px;
+}
+
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6, 
+strong,
+th {
+  font-weight: bold;
+}
+
+table {
+  width: 100%;
+  th,
+  td {
+    padding: ($base-margin-bottom / 4);
+    text-align: left;
+  }
+}

scss/generic/_mixins.scss

@@ -0,0 +1,38 @@
+@mixin resp-min($size) {
+  @media screen and (min-width: $size) { 
+    @content; 
+  }
+}
+
+@mixin resp-max($size) {
+  @media screen and (max-width: $size) { 
+    @content; 
+  }
+}
+
+@mixin font-size($px) {
+  font-size: $px + px;
+  font-size: #{$px / $base-font-size}rem;
+}
+
+@mixin background-size($size) {
+  -webkit-background-size: $size;
+     -moz-background-size: $size;
+       -o-background-size: $size;
+          background-size: $size;
+}
+
+@mixin placeholder {
+  ::-webkit-input-placeholder {
+    @content; 
+  }
+  :-moz-placeholder {
+    @content; 
+  }
+  ::-moz-placeholder {
+    @content; 
+  }
+  :-ms-input-placeholder {  
+    @content; 
+  }
+}

scss/generic/_reset.scss

@@ -0,0 +1,56 @@
+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 {
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+article, 
+aside, 
+details, 
+figcaption, 
+figure, 
+footer, 
+header, 
+hgroup, 
+menu, 
+nav, 
+section, 
+main {
+  display: block;
+}
+
+address, 
+caption, 
+cite, 
+dfn, 
+th, 
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote,
+q {
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th {
+  font-weight: bold;
+  text-align: left;
+}

scss/generic/_utilities.scss

@@ -0,0 +1,39 @@
+.alignleft {
+  float: left;
+}
+
+img.alignleft {
+  margin-right: $base-margin-bottom;
+}
+
+.alignright {
+  float: right;
+}
+
+img.alignright {
+  margin-left : $base-margin-bottom;
+}
+
+.aligncenter {
+  display: block;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+img.aligncenter {
+  margin-bottom: $base-margin-bottom;
+}
+
+.clearfix {
+  &:before,
+  &:after{
+    content: '';
+    display: table;
+    line-height: 0;
+  }
+  &:after{
+    clear: both;
+  }
+}

scss/modules/_buttons.scss

@@ -0,0 +1,14 @@
+.btn {
+  background-color: $base-colour;
+  border: 0;
+  color: $base-background-colour;
+  cursor: pointer;
+  display: inline-block;
+  font: inherit;
+  font-weight: bold;
+  height: ($base-margin-bottom * 1.5);
+  line-height: ($base-margin-bottom * 1.5);
+  padding: 0 $base-margin-bottom;
+  text-align: center;
+  width: auto;
+}

scss/modules/_nav.scss

@@ -0,0 +1,10 @@
+.nav {
+  list-style: none;
+  margin: 0;
+  > li {
+      display: inline-block;
+    > a {
+      display: block;
+    }
+  }
+}

scss/style.scss

@@ -0,0 +1,16 @@
+/*
+Theme Name: Bare Bones
+Theme URI: http://github.com/mikefrancis/barebones
+Author: Mike Francis
+*/
+
+@import 'vars';
+
+@import 'generic/reset';
+@import 'generic/utilities';
+@import 'generic/mixins';
+@import 'base/normalise';
+@import 'base/forms';
+
+@import 'modules/nav';
+@import 'modules/buttons';