bones-rails 0.1.0 → 1.0.0

data/{LICENSE.txt → LICENSE.md}

@@ -1,4 +1,4 @@
-Copyright (c) 2013 Sean Davis
+Copyright (c) 2013 Sean C. Davis
 
 MIT License
 

data/app/assets/stylesheets/bones.scss

@@ -1,65 +1,67 @@
-/*
-==========================
-Bones CSS Framework
-==========================
-
-This is the manifest file for Bones' CSS. It's purpose is to bring all files together.
-
---------------------------
-
-docs on using files coming ...
+/*! Bones CSS Framework | v1.0 | Sean C. Davis | MIT License | git.io/imidoQ */
 
-*/
-
-// vendor
-@import
-  'bones/vendor/normalize'; // normalizes for cross-browser consistency
+/*
+ * Welcome to Bones CSS Framework!
+ * 
+ * This is the manifest file for Bones' CSS. It brings all files 
+ * together.
+ *
+ * To add or remove modules, simply comment or uncomment and then 
+ * use Compass to recompile and compress.
+ *
+ * Files are noted as recommended and required where applicable.
+ *
+ * Refer to the ../docs/ directory for more detailed instruction.
+ * 
+ */
 
-// variables
-@import 
-  'bones/variables/colors',
-  'bones/variables/globals',
-  'bones/variables/grid',
-  'bones/variables/typography',
-  'bones/variables/code',
-  'bones/variables/buttons',
-  'bones/variables/forms',
-  'bones/variables/tables',
-  'bones/variables/nav',
-  'bones/variables/images',
-  'bones/variables/helpers';
+/* Vendor
+============================ */
+@import 'bones/vendor/normalize'; // highly recommended for cross-browser consistency
   
-// custom variables
-@import 'bones_config';
+/* Config
+============================ */
+/*
+ * These are your configuration files. You should always 
+ * load all of these files, as the variable values are
+ * resolved and do not contribute any size to the final
+ * bones.css file.
+ *
+ */
+@import 'bones/config/colors';
+@import 'bones/config/_default';
+@import 'bones/config/wireframe';
+@import 'bones/config/typography';
+@import 'bones/config/buttons';
+@import 'bones/config/forms';
+@import 'bones/config/tables';
+@import 'bones/config/nav';
+@import 'bones/config/images';
+@import 'bones/config/components';
+@import 'bones/config/helpers';
 
-// mixins
-@import 
-  'bones/mixins/globals',
-  'bones/mixins/grid',
-  'bones/mixins/typography',
-  'bones/mixins/buttons',
-  'bones/mixins/forms',
-  'bones/mixins/nav';
+/* Main Styles
+============================ */
+@import 'bones/styles/_default'; // required
+@import 'bones/styles/wireframe';
+@import 'bones/styles/typography';
+@import 'bones/styles/buttons';
+@import 'bones/styles/forms';
+@import 'bones/styles/tables';
+@import 'bones/styles/nav';
+@import 'bones/styles/images';
+@import 'bones/styles/components';
 
-// partials
-@import 
-  'bones/partials/globals',
-  'bones/partials/grid',
-  'bones/partials/typography',
-  'bones/partials/code',
-  'bones/partials/buttons',
-  'bones/partials/forms',
-  'bones/partials/tables',
-  'bones/partials/nav',
-  'bones/partials/images',
-  'bones/partials/components';
+/* Helpers
+============================ */
+@import 'bones/styles/helpers/margin';
+@import 'bones/styles/helpers/padding';
+@import 'bones/styles/helpers/positioning';
+@import 'bones/styles/helpers/color';
+@import 'bones/styles/helpers/background';
+@import 'bones/styles/helpers/border';
+@import 'bones/styles/helpers/size';
 
-// helpers
-@import 
-  'bones/helpers/margin',
-  'bones/helpers/padding',
-  'bones/helpers/positioning',
-  'bones/helpers/color',
-  'bones/helpers/background',
-  'bones/helpers/border',
-  'bones/helpers/size';
+/* Plugins
+============================ */
+// @import 'bones/styles/plugins/syntax_highlighting';

data/app/assets/stylesheets/bones/config.scss

@@ -0,0 +1,67 @@
+/*! Bones CSS Framework | v1.0 | Sean C. Davis | MIT License | git.io/imidoQ */
+
+/*
+ * Welcome to Bones CSS Framework!
+ * 
+ * This is the manifest file for Bones' CSS. It brings all files 
+ * together.
+ *
+ * To add or remove modules, simply comment or uncomment and then 
+ * use Compass to recompile and compress.
+ *
+ * Files are noted as recommended and required where applicable.
+ *
+ * Refer to the ../docs/ directory for more detailed instruction.
+ * 
+ */
+
+/* Vendor
+============================ */
+@import 'bones/vendor/normalize'; // highly recommended for cross-browser consistency
+  
+/* Config
+============================ */
+/*
+ * These are your configuration files. You should always 
+ * load all of these files, as the variable values are
+ * resolved and do not contribute any size to the final
+ * bones.css file.
+ *
+ */
+@import 'bones/bones-config/colors';
+@import 'bones/bones-config/_default';
+@import 'bones/bones-config/wireframe';
+@import 'bones/bones-config/typography';
+@import 'bones/bones-config/buttons';
+@import 'bones/bones-config/forms';
+@import 'bones/bones-config/tables';
+@import 'bones/bones-config/nav';
+@import 'bones/bones-config/images';
+@import 'bones/bones-config/components';
+@import 'bones/bones-config/helpers';
+
+/* Main Styles
+============================ */
+@import 'bones/styles/_default'; // required
+@import 'bones/styles/wireframe';
+@import 'bones/styles/typography';
+@import 'bones/styles/buttons';
+@import 'bones/styles/forms';
+@import 'bones/styles/tables';
+@import 'bones/styles/nav';
+@import 'bones/styles/images';
+@import 'bones/styles/components';
+
+/* Helpers
+============================ */
+@import 'bones/styles/helpers/margin';
+@import 'bones/styles/helpers/padding';
+@import 'bones/styles/helpers/positioning';
+@import 'bones/styles/helpers/color';
+@import 'bones/styles/helpers/background';
+@import 'bones/styles/helpers/border';
+@import 'bones/styles/helpers/size';
+
+/* Plugins
+============================ */
+// @import 'bones/styles/plugins/syntax_highlighting';

data/app/assets/stylesheets/bones/config/__default.scss

@@ -0,0 +1,14 @@
+/* Default Values
+============================ */
+/*
+ * Many items within these configuration files 
+ * are relative to values here.
+ *
+ */
+$default-fontSize: 16px; // ALL SIZING IS RELATIVE TO THIS VALUE
+$default-fontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$default-fontWeight: 200;
+$default-lineHeight: 1.25em;
+$default-color: $color-dark;
+$default-margin: 0.75em 0;
+$default-shadowColor: $color-light;

data/app/assets/stylesheets/bones/config/_buttons.scss

@@ -0,0 +1,21 @@
+/* Default Styles
+============================ */
+$button-default-color: $color-light; // default font color
+$button-default-fontSize: $default-fontSize; // default font size
+$button-default-background: $color-dark-lightest; // default button bg
+$button-default-background-hover: $color-1; // default button bg on hover
+$button-default-background-active: $color-1-dark; // bg on click
+/*
+ * Here you can use shorthand where you normally
+ * would with css. for example, you could use
+ * "1px solid #FFF" for border.
+ */
+$button-default-padding: 0.65em 1em;
+$button-default-margin: $default-margin;
+$button-default-border: none;
+
+/* Size Factors
+============================ */
+$button-sizeFactor-huge:   200%; // huge
+$button-sizeFactor-large:  150%; // large
+$button-sizeFactor-small:  75%;  // small

data/app/assets/stylesheets/bones/config/_colors.scss

@@ -0,0 +1,93 @@
+/* Color Palette
+============================ */
+$color-1: #1B8FB8; // used most often by default
+$color-2: #D65030;
+$color-3: #D48D2B;
+$color-4: #1F7D24;
+$color-5: #BDAD1B;
+$color-dark: #444444; // designed to be a dark color
+$color-light: #efefef; // designed to be a light color
+
+// used primarily for notifications:
+$color-warning: #CCA300;
+$color-danger: #CC0000;
+$color-success: #008A2E;
+
+/* Tones
+============================ */
+// color factors -- to increase tone
+$color-factor-1: 5%;
+$color-factor-2: 15%;
+$color-factor-3: 25%;
+
+/*
+ * These tone calculations are performed automatically.
+ * They provide you with a light, lighter, lightest, 
+ * dark, darker, darkest variations of your palette.
+ *
+ * You don't need to change anything below, but can
+ * if you'd like, or you can add new variations.
+ */
+$color-1-light:     lighten($color-1, $color-factor-1);
+$color-1-lighter:   lighten($color-1, $color-factor-2);
+$color-1-lightest:  lighten($color-1, $color-factor-3);
+$color-1-dark:      darken($color-1, $color-factor-1);
+$color-1-darker:    darken($color-1, $color-factor-2);
+$color-1-darkest:   darken($color-1, $color-factor-3);
+
+$color-2-light:     lighten($color-2, $color-factor-1);
+$color-2-lighter:   lighten($color-2, $color-factor-2);
+$color-2-lightest:  lighten($color-2, $color-factor-3);
+$color-2-dark:      darken($color-2, $color-factor-1);
+$color-2-darker:    darken($color-2, $color-factor-2);
+$color-2-darkest:   darken($color-2, $color-factor-3);
+
+$color-3-light:     lighten($color-3, $color-factor-1);
+$color-3-lighter:   lighten($color-3, $color-factor-2);
+$color-3-lightest:  lighten($color-3, $color-factor-3);
+$color-3-dark:      darken($color-3, $color-factor-1);
+$color-3-darker:    darken($color-3, $color-factor-2);
+$color-3-darkest:   darken($color-3, $color-factor-3);
+
+$color-4-light:     lighten($color-4, $color-factor-1);
+$color-4-lighter:   lighten($color-4, $color-factor-2);
+$color-4-lightest:  lighten($color-4, $color-factor-3);
+$color-4-dark:      darken($color-4, $color-factor-1);
+$color-4-darker:    darken($color-4, $color-factor-2);
+$color-4-darkest:   darken($color-4, $color-factor-3);
+
+$color-5-light:     lighten($color-5, $color-factor-1);
+$color-5-lighter:   lighten($color-5, $color-factor-2);
+$color-5-lightest:  lighten($color-5, $color-factor-3);
+$color-5-dark:      darken($color-5, $color-factor-1);
+$color-5-darker:    darken($color-5, $color-factor-2);
+$color-5-darkest:   darken($color-5, $color-factor-3);
+
+$color-dark-light:     lighten($color-dark, $color-factor-1);
+$color-dark-lighter:   lighten($color-dark, $color-factor-2);
+$color-dark-lightest:  lighten($color-dark, $color-factor-3);
+
+$color-light-dark:      darken($color-light, $color-factor-1);
+$color-light-darker:    darken($color-light, $color-factor-2);
+$color-light-darkest:   darken($color-light, $color-factor-3);
+
+$color-success-light:     lighten($color-success, $color-factor-1);
+$color-success-lighter:   lighten($color-success, $color-factor-2);
+$color-success-lightest:  lighten($color-success, $color-factor-3);
+$color-success-dark:      darken($color-success, $color-factor-1);
+$color-success-darker:    darken($color-success, $color-factor-2);
+$color-success-darkest:   darken($color-success, $color-factor-3);
+
+$color-warning-light:     lighten($color-warning, $color-factor-1);
+$color-warning-lighter:   lighten($color-warning, $color-factor-2);
+$color-warning-lightest:  lighten($color-warning, $color-factor-3);
+$color-warning-dark:      darken($color-warning, $color-factor-1);
+$color-warning-darker:    darken($color-warning, $color-factor-2);
+$color-warning-darkest:   darken($color-warning, $color-factor-3);
+
+$color-danger-light:     lighten($color-danger, $color-factor-1);
+$color-danger-lighter:   lighten($color-danger, $color-factor-2);
+$color-danger-lightest:  lighten($color-danger, $color-factor-3);
+$color-danger-dark:      darken($color-danger, $color-factor-1);
+$color-danger-darker:    darken($color-danger, $color-factor-2);
+$color-danger-darkest:   darken($color-danger, $color-factor-3);

data/app/assets/stylesheets/bones/config/_components.scss

@@ -0,0 +1,4 @@
+/* Notifications
+============================ */
+$component-notification-padding: 0.5em 1em;
+$component-notification-margin: 1em 0;

data/app/assets/stylesheets/bones/config/_forms.scss

@@ -0,0 +1,28 @@
+/* Inputs / Text Fields
+============================ */
+/*
+ * Where it makes sense, these styles are also
+ * applied to textarea elements.
+ *
+ * And although submit buttons are inputs,
+ * their styles are handled in config/_buttons
+ *
+ */
+$form-input-margin: $default-margin;
+$form-input-width: 100%;
+$form-input-boxSizing: border-box;
+$form-input-border: 1px solid $color-light-darker;
+$form-input-outline-focus: none;
+$form-input-border-focus: 1px solid $color-1;
+$form-input-padding: 4px;
+
+/* Radio Buttons
+============================ */
+$form-radio-margin: 0 0 0.5em 0;
+
+/* Fieldsets
+============================ */
+$form-fieldset-border: 1px solid $color-light-darker;
+// fieldset legens
+$form-legend-fontWeight: 600;
+$form-legend-padding: 0 5px;

data/app/assets/stylesheets/bones/config/_helpers.scss

@@ -0,0 +1,31 @@
+/* Border
+============================ */
+$helper-border-width: 1px;
+$helper-border-style: solid;
+
+/* Margin
+============================ */
+$helper-margin-small: 0.25em;
+$helper-margin-medium: 0.5em;
+$helper-margin-large: 0.75em;
+
+/* Padding
+============================ */
+$helper-padding-small: 0.5em;
+$helper-padding-medium: 1em;
+$helper-padding-large: 1.5em;
+
+/* Size
+============================ */
+/*
+ * The helper classes available are looped
+ * by going from 1 to max, where the value
+ * is multiplied by the index.
+ *
+ * The smaller the index and the larger the 
+ * max, the more choices available (but that
+ * makes the bones.css file larger, too).
+ *
+ */
+$helper-size-index: 10;
+$helper-size-max: 100;

data/app/assets/stylesheets/bones/config/_images.scss

@@ -0,0 +1,23 @@
+/* Sizes
+============================ */
+// thumb
+$img-thumb-width: 150px;
+// medium
+$img-medium-width: 250px;
+// large
+$img-large-width: 400px;
+
+/* Styles
+============================ */
+// frame
+$img-frame-width: 0.5em;
+$img-frame-outline: 1px solid $color-light-dark;
+$img-frame-color: white;
+// polaroid
+$img-polaroid-frameWidth: 0.75em;
+$img-polaroid-frameColor: white;
+$img-polaroid-bottomHeight: 2.75em;
+$img-polaroid-outline: 1px solid $color-light-dark;
+// panoramic
+$img-panoramic-height: 200px;
+$img-panoramic-top: -40%;

data/app/assets/stylesheets/bones/config/_nav.scss

@@ -0,0 +1,117 @@
+/* Default Nav Menu
+============================ */
+// container
+$nav-default-background: transparent; // background of entire bar
+// basic styles
+$nav-default-padding: 0.35em 0;
+$nav-default-margin: 0 1.25em;
+$nav-default-fontSize: 1.1em;
+// effects
+$nav-default-background: transparent;
+$nav-default-color: $color-light-darkest;
+$nav-default-transition: all 0.35s linear; // keep set to "all" if you want all styles/effects to transition
+$nav-default-underline: 2px solid transparent; // stylish substitute for underline -- a "border-bottom" style, NOT "text-decoration"
+// hover state
+$nav-default-background-hover: transparent;
+$nav-default-color-hover: $color-1;
+$nav-default-transition-hover: $nav-default-transition;
+$nav-default-underline-hover: 2px solid $color-1;
+
+
+/* Navbar
+============================ */
+// container
+$nav-bar-container-background: $color-1;
+// basic styles
+$nav-bar-padding: 0.35em 1.25em;
+$nav-bar-margin: 0;
+$nav-bar-fontSize: 1.1em;
+// effects
+$nav-bar-background: transparent;
+$nav-bar-color: $color-light-dark;
+$nav-bar-transition: all 0.35s linear;
+$nav-bar-underline: none;
+// hover state
+$nav-bar-background-hover: $color-1-lighter;
+$nav-bar-color-hover: $nav-bar-color;
+$nav-bar-transition-hover: $nav-bar-transition;
+$nav-bar-underline-hover: none;
+
+
+/* Vertical Nav
+============================ */
+// container
+$nav-vertical-container-background: transparent;
+// basic styles
+$nav-vertical-padding: 0.35em 1.25em;
+$nav-vertical-margin: 0;
+$nav-vertical-fontSize: 1.1em;
+// effects
+$nav-vertical-background: transparent;
+$nav-vertical-color: $color-light-darker;
+$nav-vertical-transition: all 0.35s linear;
+$nav-vertical-underline: none;
+// hover state
+$nav-vertical-background-hover: transparent;
+$nav-vertical-color-hover: $color-1;
+$nav-vertical-transition-hover: $nav-vertical-transition;
+$nav-vertical-underline-hover: none;
+
+
+/* Filters
+============================ */
+// container
+$nav-filter-container-background: transparent;
+// basic styles
+$nav-filter-padding: 0.5em;
+$nav-filter-margin: 0 0.5em;
+$nav-filter-fontSize: 0.9em;
+// effects
+$nav-filter-background: transparent;
+$nav-filter-color: $color-1;
+$nav-filter-transition: all 0.35s linear;
+$nav-filter-underline: none;
+// hover state
+$nav-filter-background-hover: $color-1;
+$nav-filter-color-hover: $color-light;
+$nav-filter-transition-hover: $nav-filter-transition;
+$nav-filter-underline-hover: none;
+// active state
+$nav-filter-font-weight-active: 600;
+$nav-filter-background-active: transparent;
+$nav-filter-color-active: $color-1;
+$nav-filter-underline-active: none;
+// disabled state
+$nav-filter-background-disabled: transparent;
+$nav-filter-color-disabled: $color-light-dark;
+$nav-filter-underline-disabled: none;
+
+
+/* Breadcrumbs
+============================ */
+// container
+$nav-breadcrumbs-container-background: transparent;
+// basic styles
+$nav-breadcrumbs-padding: 0.5em;
+$nav-breadcrumbs-margin: 0 0.5em;
+$nav-breadcrumbs-fontSize: 0.9em;
+$nav-breadcrumbs-separator: " \002F ";
+// effects
+$nav-breadcrumbs-background: transparent;
+$nav-breadcrumbs-color: $color-light-darkest;
+$nav-breadcrumbs-transition: all 0.35s linear;
+$nav-breadcrumbs-underline: none;
+// hover state
+$nav-breadcrumbs-background-hover: transparent;
+$nav-breadcrumbs-color-hover: $color-1;
+$nav-breadcrumbs-transition-hover: $nav-breadcrumbs-transition;
+$nav-breadcrumbs-underline-hover: none;
+// active state
+$nav-breadcrumbs-font-weight-active: 600;
+$nav-breadcrumbs-background-active: transparent;
+$nav-breadcrumbs-color-active: $color-1;
+$nav-breadcrumbs-underline-active: none;
+// disabled state
+$nav-breadcrumbs-background-disabled: transparent;
+$nav-breadcrumbs-color-disabled: $color-light-dark;
+$nav-breadcrumbs-underline-disabled: none;