aesthetics-rails 0.1.0.pre.alpha

data/assets/stylesheets/aesthetics.scss

@@ -0,0 +1,46 @@
+//==================================================
+// Aesthetics Framework
+//
+// Copyright 2015 Duane Adam
+//
+// Index
+// -----
+// 1) Mixins
+// 2) Reset
+// 3) Global Styles
+// 4) Settings
+// 5) Components
+//==================================================
+
+
+//=========================
+// 1) Mixins
+//=========================
+@import "mixins";
+
+//=========================
+// 2) Reset
+//=========================
+@import "normalize";
+
+//=========================
+// 3) Settings
+//=========================
+@import "settings/colors";
+@import "settings/devices";
+@import "settings/type";
+@import "settings/z-index";
+
+//=========================
+// 4) Global Styles
+//=========================
+@import "components/global";
+
+//=========================
+// 5) Components
+//=========================
+@import "components/buttons";
+@import "components/container";
+@import "components/forms";
+@import "components/navbar";
+@import "components/utilities";

data/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,182 @@
+//==================================================
+// Buttons.scss
+//
+// Index
+// -----
+// 1) Base Class & Element
+// 2) Buttons Modes
+// 3) Button Themes
+// 4) Button Shapes
+// 5) Button Sizes
+//==================================================
+
+
+//=========================
+// 1) Base Class & Element
+//=========================
+button,
+.btn {
+  display: inline-block;
+  height: auto;
+  margin: 0;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: inherit;
+  font-weight: normal;
+  line-height: 1.42857143;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  box-shadow: 0 2px 0 #c6c6c6;
+  -webkit-transition: border 0.3s linear,color 0.3s linear,background-color 0.3s linear;
+  transition: border 0.3s linear,color 0.3s linear,background-color 0.3s linear;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+button:after,
+button:before,
+.btn:after,
+.btn:before {
+  box-sizing: border-box;
+}
+
+::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+button:hover, .btn:hover { text-decoration: none }
+
+//=======================
+// 2) Button Modes
+//=======================
+.btn.is-disabled {
+  color: #fff;
+  background-color: #999999;
+}
+.btn.is-disabled:hover {
+  background-color: #737373;
+}
+.btn.is-disabled:active {
+  background-color: #474747;
+}
+
+.btn.is-fixed {
+  position: fixed;
+}
+
+//=========================
+// 3) Button Themes
+//=========================
+
+//=======================
+  // Primary Theme
+//=======================
+.btn--primary {
+  color: #fff;
+  background-color: $color-primary;
+}
+.btn--primary:hover {
+  background-color: lighten($color-primary, 6%);
+}
+.btn--primary:active {
+  background-color: darken($color-primary, 8%);
+}
+
+//=======================
+  // General Themes
+//=======================
+.btn--success {
+  color: #fff;
+  background-color: $color-success;
+}
+.btn--success:hover {
+  background-color: lighten($color-success, 6%);
+}
+.btn--success:active {
+  background-color: darken($color-success, 8%);
+}
+
+.btn--warning {
+  color: #fff;
+  background-color: $color-warning;
+}
+.btn--warning:hover {
+  background-color: lighten($color-warning, 6%);
+}
+.btn--warning:active {
+  background-color: darken($color-warning, 8%);
+}
+
+.btn--danger {
+  color: #fff;
+  background-color: $color-danger;
+}
+.btn--danger:hover {
+  background-color: lighten($color-danger, 6%);
+}
+.btn--danger:active {
+  background-color: darken($color-danger, 8%);
+}
+
+.btn--info {
+  color: #fff;
+  background-color: $color-info;
+}
+.btn--info:hover {
+  background-color: lighten($color-info, 6%);
+}
+.btn--info:active {
+  background-color: darken($color-info, 8%);
+}
+
+//=========================
+// 4) Button Shapes
+//=========================
+.btn--square { border-radius: 0 !important; }
+
+.btn--circle { border-radius: 100% !important; }
+
+//=========================
+// 5) Button Sizes
+//=========================
+.btn--fill {
+  display: block;
+  width: 100%;
+}
+
+.btn--lg {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 6px;
+}
+
+.btn--lg.btn--square,
+.btn--lg.btn--circle {
+  width: 90px;
+  height: 90px;
+  line-height: 70px;
+}
+
+.btn--square,
+.btn--circle {
+  width: 66px;
+  height: 66px;
+  line-height: 54px;
+}
+
+.btn--sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.btn--sm.btn--square,
+.btn--sm.btn--circle {
+  width: 44px;
+  height: 44px;
+  line-height: 34px;
+}

data/assets/stylesheets/components/_container.scss

@@ -0,0 +1,47 @@
+//==================================================
+// Container.scss
+//
+// Index
+// -----
+// 1) Base Container Class
+// 2) Container Modifiers
+//==================================================
+
+
+//=========================
+// 1) Base Container Class
+//=========================
+.container {
+	margin-right: auto;
+  margin-left: auto;
+	padding-left: 1.25em; // 20px
+	padding-right: 1.25em; // 20px
+	@include bp-medium-up {
+		padding-left: 2.5em; // 40px
+		padding-right: 2.5em; // 40px
+	}
+	@include bp-large-up {
+		padding-left: 3.75em; //60px
+		padding-right: 3.75em; //60px
+	}
+	@include bp-xlarge-up {
+		padding-left: 5em; //80px
+		padding-right: 5em; //80px
+	}
+}
+
+//=========================
+// 2) Container Modifiers
+//=========================
+.container.container--fluid {
+	padding-right: 1.25em; // 20px;
+	padding-left: 1.25em; // 20px;
+}
+
+.container--fixed1024 {
+	width: 1024px;
+}
+
+.container--fixed1440 {
+	max-width: 1440px;
+}

data/assets/stylesheets/components/_forms.scss

@@ -0,0 +1,58 @@
+//==================================================
+// Taken from Basscss' Forms
+// Source: http://www.basscss.com/docs/base-forms/
+//==================================================
+input,
+select,
+textarea,
+fieldset {
+  font-size: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+input[type=text],
+input[type=datetime],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=time],
+input[type=url],
+input[type=week] {
+  box-sizing: border-box;
+  height: 2.25rem;
+  padding: .5rem .5rem;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
+
+select {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: .5rem .5rem;
+}
+
+select:not([multiple]) {
+  height: 2.25rem;
+  vertical-align: middle;
+}
+
+textarea {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: .5rem .5rem;
+}
+
+.fieldset-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border: 0;
+}
+.fieldset-reset legend {
+  padding: 0;
+}

data/assets/stylesheets/components/_global.scss

@@ -0,0 +1,43 @@
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html,
+body {
+  font-size: 100%;
+}
+
+body {
+  position: relative;
+  background: #fff;
+  color: #222;
+  font-family: $type-helvetica;
+  font-weight: normal;
+  line-height: $type-baseLineHeight
+}
+
+a { text-decoration: none; }
+a:hover { cursor: pointer; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0.2rem;
+  margin-bottom: 0.5rem;
+	font-family: $type-lato;
+	line-height: $type-headingLineHeight;
+}
+
+h1, .h1 { font-size: $type-h1FontSize }
+h2, .h2 { font-size: $type-h2FontSize }
+h3, .h3 { font-size: $type-h3FontSize }
+h4, .h4 { font-size: $type-h4FontSize }
+h5, .h5 { font-size: $type-h5FontSize }
+h6, .h6 { font-size: $type-h6FontSize }

data/assets/stylesheets/components/_navbar.scss

@@ -0,0 +1,29 @@
+//==================================================
+// Navbar.scss
+//
+// Index
+// -----
+// 1) Base Navbar Class
+// 2) Navbar Themes
+//==================================================
+
+
+//=========================
+// 1) Base Navbar Class
+//=========================
+.navbar {
+  position: relative;
+  // To make sure navbar always show
+  min-height: 5px;
+  width: 100%;
+  z-index: $zIndex-7--navbar;
+}
+
+//=========================
+// 2) Navbar Themes
+//=========================
+.navbar--primary {
+  height: 50px;
+  color: white;
+  background: $color-primary;
+}

data/assets/stylesheets/components/_utilities.scss

@@ -0,0 +1,159 @@
+//==================================================
+// Utilities.scss
+//
+// Please use available utilities before attempting
+// of adding a new property to your CSS classes.
+//
+// Index
+// -----
+// 1) Debugging Utility
+// 2) Layout
+// 3) Positioning
+// 4) Text Alignment
+// 5) Text Decoration
+// 6) Visilibity
+//==================================================
+
+
+//=========================
+// 1) Debugging Utility
+//
+// Disable = uncomment
+// Please disable after work is done
+// If styling border, it might be a good idea to disable it
+//=========================
+*, *:before, *:after {
+ // outline: 1px solid green;
+}
+
+//=========================
+// 2) Layout
+//=========================
+// Turn element into a flexbox container
+.u-flex {
+  @include flexbox();
+}
+
+.u-contain {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.u-inline       { display: inline }
+.u-block        { display: block }
+.u-inline-block { display: inline-block }
+
+//=========================
+// 3) Positioning
+//=========================
+.u-pullLeft {
+  float: left;
+}
+
+.u-pullRight {
+  float: right;
+}
+
+.u-clearfix:before, .u-clearfix:after {
+  display: table;
+  content: "";
+}
+.u-clearfix:after {
+  clear: both;
+}
+
+.u-center {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.u-fixed {
+  position: fixed;
+}
+
+//=========================
+// 4) Text Alignment
+//=========================
+.u-textAlignCenter {
+  text-align: center;
+}
+
+.u-verticalAlignMiddle {
+  vertical-align: middle;
+}
+
+//=========================
+// 5) Text Decoration
+//=========================
+.u-hyphenate {
+  word-break: break-word;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 2;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-lines: 2;
+}
+
+.u-antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+//=========================
+// 6) Visibility
+//=========================
+// Used for overlaying the entire page
+.u-pageOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255,255,255,0.2);
+  z-index: $zIndex-8--overlay;
+}
+
+// Used for overlaying everything under the navbar layer
+.u-navbarOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: $zIndex-6--navbarOverlay;
+}
+
+// Used for hiding things.
+// Example: Use with jQuery toggleClass to hide or show element
+.u-hide {
+    display: none;
+}
+
+ // Same like .u-hide but for opacity
+.u-opaque {
+    opacity: 1;
+}
+
+@include bp-small-only {
+  .u-hideOnMobile {
+    display: none;
+  }
+}
+
+@include bp-medium-only {
+    .u-hideOnTablet {
+    display: none;
+  }
+}
+
+.u-overflowHidden { overflow: hidden }
+.u-overflowScroll { overflow: scroll }
+
+.u-textOverflowHidden {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}