Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Reorganized SMACSS template for greater flexibility #591

Merged
merged 3 commits into from

2 participants

@joefiorini

This pull request is per a discussion in #562.

This is the layout that we've used to great success on a number of projects. It allows us to organize our code into many small files and have Sass concatenate them together. We also provided some brief descriptions of each folder to guide developers on what goes where.

Brad Dielman... and others added some commits
@tdreyno
Owner

Cool, I'll merge this for the next point release.

@tdreyno tdreyno merged commit c2d816f into middleman:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 11, 2012
  1. Refactor structure into folders

    Brad Dielman + Joe Fiorini authored Brad Dielman + Joe Fiorini committed
  2. @joefiorini

    Make sure we keep the empty directories

    joefiorini authored Brad Dielman + Joe Fiorini committed
  3. Add README files for each directory

    Brad Dielman + Joe Fiorini authored
This page is out of date. Refresh to see the latest.
Showing with 429 additions and 17 deletions.
  1. 0  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_0.site-settings.scss
  2. +0 −2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss
  3. +0 −2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss
  4. +0 −2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss
  5. +0 −2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss
  6. +11 −0 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/README.markdown
  7. +1 −0  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss
  8. +375 −0 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/normalize.scss
  9. +9 −0 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/README.markdown
  10. +9 −0 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/README.markdown
  11. +0 −2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss
  12. +12 −0 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/README.markdown
  13. +12 −7 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/style.css.scss
View
0  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_0.site-settings.scss
No changes.
View
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss
@@ -1,2 +0,0 @@
-/* Base
-================================================== */
View
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss
@@ -1,2 +0,0 @@
-/* Layout
-================================================== */
View
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss
@@ -1,2 +0,0 @@
-/* States
-================================================== */
View
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss
@@ -1,2 +0,0 @@
-/* Themes
-================================================== */
View
11 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.
View
1  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss
@@ -0,0 +1 @@
+// Placeholder
View
375 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;
+}
View
9 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`.
View
9 ...leman-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.
View
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss
@@ -1,2 +0,0 @@
-/* Buttons
-================================================== */
View
12 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`.
View
19 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";
+// 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"
Something went wrong with that request. Please try again.