Mockup donation page

app/assets/stylesheets/application.css.scss → app/assets/stylesheets/application.scss

@@ -1,33 +1,105 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
+/* 
+ * 1. Core
+ * -------
  *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ * Any module relative to app configuration it should be here. This includes the global reset for common ground
+ * in all browsers, any custom reset we want to apply, all variables the app uses, sass functions and mixins...
  *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
+ */
+
+@import "core/settings";
+@import "core/functions";
+@import "core/mixins";
+@import "core/reset";
+
+/* 
+ * 2. Base
+ * -------
+ *
+ * All base styles for the app will be under base folder. This includes fonts, regular styles for headings, 
+ * paragraphs, lists, links, etc.
  *
- *= require_tree .
- *= require_self
- *= require jquery-ui/autocomplete
- *= require tipsy
- *= require slidebars
- *= require select2
- *= 
  */
 
-@import "http://fonts.googleapis.com/css?family=Raleway:400,700";
-@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
+@import "base/fonts";
+@import "base/base";
+@import "base/links";
+@import "base/lists";
+@import "base/label";
+
+/* 
+ * 3. Helpers
+ * ----------
+ *
+ * Utility classes, like to clearfix the floats or align text. This follows the single responsability principle.
+ *
+ */
 
+@import "helpers/clearfix";
+@import "helpers/is-hidden";
+@import "helpers/percent";
+@import "helpers/font-sizes";
 @import "helpers/white-spacing";
+@import "helpers/colors";
+@import "helpers/layout";
+@import "helpers/float";
+@import "helpers/with-border";
+@import "helpers/bold";
+@import "helpers/align";
+@import "helpers/flex";
+
+/* 
+ * 4. Objects
+ * ----------
+ *
+ * We want reusable modules that they could be applied repeatedly on different pages. This alignes with
+ * the DRY principle
+ *
+ */
+
+@import "objects/form";
+@import "objects/form-fields";
+@import "objects/justify-columns";
+@import "objects/content";
+@import "objects/checkbox";
+@import "objects/avatar";
+@import "objects/grid";
+
+/* 
+ * 5. Layout
+ * ---------
+ *
+ * Sometimes it happens you need to overwrite some components' behaviour. This should be an exception, and if you 
+ * find yourself overwriting any component twice, we are probably doing wrong.
+ *
+ */
+
+ @import "layout/donations";
+ @import "layout/post-donation";
+ @import "layout/home-donation";
+/* 
+ * 6. Vendors
+ * ----------
+ *
+ * Any vendor styles, usually linked to jquery plugins or javascripts, should go here.
+ *
+ */
+
+@import "vendor/select2";
+@import "vendor/slidebars";
+@import "vendor/tipsy";
+@import "vendor/pikaday";
+
+/* 
+
+Prefer components over page level styles, for large term maintenability reasons mostly. We want our front end to 
+feel like library code. We should start to break files like this into smaller more focused files like 
+form.scss, button.scss, tags.scss, dropdown.css, etc.
+
+And this is important, make a tatoo in your arm if you prefer, but follow this rule: 
+DON'T USE #ID FOR STYLING. DON'T. JUST DON'T.
 
-$main_color: #7C9200; /* main green */
-$secondary_color: #565631; /* dark green */
-$tertiary_color: #E4D6B3;
-$light_background: #EBE8CC;
+*/
 
 /* colors */
 body { background: #F3E9D1; }

app/assets/stylesheets/base/_base.scss

@@ -0,0 +1,23 @@
+/*
+ * Base styles for html pages
+ *
+ */
+
+html, body {
+  height: 100%;
+  min-height: 590px;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body { 
+  background: #F3E9D1; 
+  color: $secondary-color;
+  font-family: 'Raleway', Arial, sans-serif; 
+  font-size: 1.6rem; 
+  font-weight: 400; 
+  overflow-y: scroll; 
+  overflow: hidden; 
+}

app/assets/stylesheets/base/_fonts.scss

@@ -0,0 +1,2 @@
+@import "http://fonts.googleapis.com/css?family=Raleway:400,700";
+@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";

app/assets/stylesheets/base/_label.scss

@@ -0,0 +1,13 @@
+/*
+ *
+ * Label
+ * -----
+ *
+ * Default label styles.
+ *
+ */
+
+label {
+  cursor: pointer;
+  display: inline-block;
+}

app/assets/stylesheets/base/_links.scss

@@ -0,0 +1,23 @@
+/*
+ * Base styles for regular links
+ *
+ */
+
+a { 
+  color: $main_color; 
+}
+
+.link-share {
+  padding: 0.7rem;
+  background: $main_color;
+  color: white;
+  font-size: 1rem;
+  width: 105px;
+  display: inline-block;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
+.link-blue {
+  color: #247AA3;
+}

app/assets/stylesheets/base/_lists.scss

@@ -0,0 +1,13 @@
+/*
+ * Base styles for regular lists
+ *
+ */
+
+ul, li { 
+  font-size: 100%; 
+  line-height: 100%; 
+}
+
+.no-bullet {
+  list-style: none;
+}

app/assets/stylesheets/core/_functions.scss

@@ -0,0 +1,27 @@
+/*
+
+Functions
+---------
+
+Calculations used by other SCSS files. If you need to DRY-up some CSS properties
+put that code in `core/_mixins.scss`, this is only for functions.
+
+*/
+
+@function number-to-width-unit($num) {
+  $count: 1;
+
+  @each $word in five, ten, fifteen, twenty,
+  twentyfive, thirty, thirtyfive, forty, fortyfive, 
+  fifty, fiftyfive, sixty, sixtyfive, seventy, seventyfive, 
+  eighty, eightyfive, ninety, ninetyfive, hundred {
+    @if ($count == $num) { @return $word; }
+    $count: $count + 1;
+  }
+
+  @return "invalid";
+}
+
+@function width-unit-to-percent($num) {
+  @return ($num * 5%);
+}

app/assets/stylesheets/core/_mixins.scss

@@ -0,0 +1,83 @@
+  /*
+
+Mixins
+------
+
+Chunks of code to help us along the way. If you need to perform some calculation
+place that in the `generic/_functions.scss` file, mixins is more for CSS
+properties.
+
+*/
+
+@mixin size($width, $height: $width) {
+  @if $width  != false { width: $width; }
+  @if $height != false { height: $height; }
+}
+
+@mixin position($top, $right, $bottom, $left) {
+  position: absolute;
+  @if $top    != false { top: $top; }
+  @if $right  != false { right: $right; }
+  @if $bottom != false { bottom: $bottom; }
+  @if $left   != false { left: $left; }
+}
+
+@mixin placeholder($color) {
+  &::-webkit-input-placeholder       { color: $color; }
+  &:-moz-placeholder                 { color: $color; }
+  &:focus::-webkit-input-placeholder { color: lighten($color, 20%); }
+  &:focus:-moz-placeholder           { color: lighten($color, 20%); }
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+@mixin keyframes( $animationName ) {
+    @-webkit-keyframes $animationName {
+        @content;
+    }
+    @-moz-keyframes $animationName {
+        @content;
+    }
+    @-o-keyframes $animationName {
+        @content;
+    }
+    @keyframes $animationName {
+        @content;
+    }
+}
+
+/*
+* @include triangle within a pseudo element and add positioning properties (ie. top, left)
+* $direction: up, down, left, right
+*/
+@mixin triangle($direction, $size: 8px, $color: #222){
+  content: '';
+  display: block;
+  position: absolute;
+  height: 0; width: 0;
+  @if ($direction == 'up'){
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+  @else if ($direction == 'down'){
+    border-top: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+  @else if ($direction == 'left'){
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+  }
+  @else if ($direction == 'right'){
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+  }
+}