From 8f49e41422980407818aa1c4569ee0f5ef90145f Mon Sep 17 00:00:00 2001 From: Brad Dielman + Joe Fiorini Date: Wed, 29 Aug 2012 17:29:42 -0400 Subject: [PATCH 1/3] Refactor structure into folders --- .../source/stylesheets/_0.site-settings.scss | 0 .../smacss/source/stylesheets/_1.base.scss | 2 - .../smacss/source/stylesheets/_2.layout.scss | 2 - .../smacss/source/stylesheets/_3.states.scss | 2 - .../smacss/source/stylesheets/_4.themes.scss | 2 - .../smacss/source/stylesheets/base/base.scss | 1 + .../source/stylesheets/base/normalize.scss | 375 ++++++++++++++++++ .../source/stylesheets/modules/_btn.scss | 2 - .../smacss/source/stylesheets/style.css.scss | 19 +- 9 files changed, 388 insertions(+), 17 deletions(-) delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_0.site-settings.scss delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/normalize.scss delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_0.site-settings.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_0.site-settings.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss deleted file mode 100644 index a3f24d17..00000000 --- a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Base -================================================== */ diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss deleted file mode 100644 index 4bc2f190..00000000 --- a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Layout -================================================== */ diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss deleted file mode 100644 index 3bf069d1..00000000 --- a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* States -================================================== */ diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss deleted file mode 100644 index b1ab10b2..00000000 --- a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Themes -================================================== */ diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss new file mode 100644 index 00000000..10051c76 --- /dev/null +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss @@ -0,0 +1 @@ +// Placeholder diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/normalize.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/normalize.scss new file mode 100644 index 00000000..57b5d267 --- /dev/null +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/normalize.scss @@ -0,0 +1,375 @@ +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Sets default font family to sans-serif. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Removes default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, + * Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; +} + +/* + * Addresses styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + + +/* + * Corrects font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Sets consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * Removes border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Corrects font family not being inherited in all browsers. + * 2. Corrects font size not being inherited in all browsers. + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to `content-box` in IE 8/9. + * 2. Removes excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss deleted file mode 100644 index 11acd5d6..00000000 --- a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Buttons -================================================== */ diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/style.css.scss b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/style.css.scss index 2aecffa1..15e36716 100644 --- a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/style.css.scss +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/style.css.scss @@ -1,7 +1,12 @@ -@import - "0.site-settings", - "1.base", - "2.layout", - "3.states", - "4.themes", - "modules/btn"; \ No newline at end of file +// Import Base Styles +@import "base/normalize" +// @import "base/all_your" + +// Import Layout Styles +// @import "layout/grid" + +// Import Module Styles +// @import "modules/buttons" + +// Import State Styles +// @import "states/validation" From f1038eb5667ce86faa49ffce6547f250c83ae46a Mon Sep 17 00:00:00 2001 From: Joe Fiorini Date: Wed, 29 Aug 2012 17:44:53 -0400 Subject: [PATCH 2/3] Make sure we keep the empty directories --- .../templates/smacss/source/stylesheets/layout/.gitignore | 0 .../templates/smacss/source/stylesheets/modules/.gitignore | 0 .../templates/smacss/source/stylesheets/states/.gitignore | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/.gitignore create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/.gitignore create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/.gitignore diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/.gitignore b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/.gitignore new file mode 100644 index 00000000..e69de29b diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/.gitignore b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/.gitignore new file mode 100644 index 00000000..e69de29b diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/.gitignore b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/.gitignore new file mode 100644 index 00000000..e69de29b From 04f29139cb4f2fe3fc499fa0c72e4b6042a8d6a4 Mon Sep 17 00:00:00 2001 From: Brad Dielman + Joe Fiorini Date: Wed, 29 Aug 2012 18:15:58 -0400 Subject: [PATCH 3/3] Add README files for each directory --- .../smacss/source/stylesheets/base/README.markdown | 11 +++++++++++ .../smacss/source/stylesheets/layout/.gitignore | 0 .../smacss/source/stylesheets/layout/README.markdown | 9 +++++++++ .../smacss/source/stylesheets/modules/.gitignore | 0 .../source/stylesheets/modules/README.markdown | 9 +++++++++ .../smacss/source/stylesheets/states/.gitignore | 0 .../smacss/source/stylesheets/states/README.markdown | 12 ++++++++++++ 7 files changed, 41 insertions(+) create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/README.markdown delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/.gitignore create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/README.markdown delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/.gitignore create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/README.markdown delete mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/.gitignore create mode 100644 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/README.markdown diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/README.markdown b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/README.markdown new file mode 100644 index 00000000..77d0402c --- /dev/null +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/README.markdown @@ -0,0 +1,11 @@ +# SMACSS + +### Base + +> A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page. + +> - SMACSS, Jonathan Snook + +Place files here that impact top-level elements to apply global styles. + +This template includes [`normalize.css`](http://necolas.github.com/normalize.css/) to give consistent base styles for all browsers. diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/.gitignore b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/.gitignore deleted file mode 100644 index e69de29b..00000000 diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/README.markdown b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/README.markdown new file mode 100644 index 00000000..9e813661 --- /dev/null +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/README.markdown @@ -0,0 +1,9 @@ +# SMACSS + +### Layout + +> CSS, by its very nature, is used to lay elements out on the page. However, there is a distinction between layouts dictating the major and minor components of a page. The minor components—such as a callout, or login form, or a navigation item—sit within the scope of major components such as a header or footer. I refer to the minor components as Modules [...] The major components are referred to as Layout styles. + +> - SMACSS, Jonathan Snook + +Use this directory for files that contain the CSS to layout major elements on the page. We typically use one file per major component and `@import` them in `style.css.scss`. diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/.gitignore b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/.gitignore deleted file mode 100644 index e69de29b..00000000 diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/README.markdown b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/README.markdown new file mode 100644 index 00000000..2b394b8b --- /dev/null +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/README.markdown @@ -0,0 +1,9 @@ +# SMACSS + +### Modules + +> A Module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on. This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component. In doing so, the page will be more flexible. If done right, Modules can easily be moved to different parts of the layout without breaking. + +> - SMACSS, Jonathan Snook + +In this directory we typically use one file per module. diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/.gitignore b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/.gitignore deleted file mode 100644 index e69de29b..00000000 diff --git a/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/README.markdown b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/README.markdown new file mode 100644 index 00000000..c3e56e12 --- /dev/null +++ b/middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/README.markdown @@ -0,0 +1,12 @@ +# SMACSS + +### States + +> A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state. [Modules and states] differ in two key ways: + +> 1. State styles can apply to layout and/or module styles; and +> 2. State styles indicate a JavaScript dependency. + +> - SMACSS, Jonathan Snook + +State styles typically refer to styles that only exist on an element for a short period time, for example: styles for invalid form fields would go in `validations.scss`.