Skip to content
This repository

Reorganized SMACSS template for greater flexibility #591

Merged
merged 3 commits into from over 1 year ago

2 participants

Joe Fiorini Thomas Reynolds
Joe Fiorini

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
Thomas Reynolds
Owner

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

Thomas Reynolds tdreyno merged commit c2d816f into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 3 unique commits by 3 authors.

Sep 11, 2012
Brad Dielman + Joe Fiorini Refactor structure into folders 8f49e41
Joe Fiorini joefiorini Make sure we keep the empty directories f1038eb
Brad Dielman + Joe Fiorini Add README files for each directory 04f2913
This page is out of date. Refresh to see the latest.

Showing 13 changed files with 429 additions and 17 deletions. Show diff stats Hide diff stats

  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
0  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_0.site-settings.scss
No changes.
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_1.base.scss
... ... @@ -1,2 +0,0 @@
1   -/* Base
2   -================================================== */
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_2.layout.scss
... ... @@ -1,2 +0,0 @@
1   -/* Layout
2   -================================================== */
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_3.states.scss
... ... @@ -1,2 +0,0 @@
1   -/* States
2   -================================================== */
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/_4.themes.scss
... ... @@ -1,2 +0,0 @@
1   -/* Themes
2   -================================================== */
11 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/README.markdown
Source Rendered
... ... @@ -0,0 +1,11 @@
  1 +# SMACSS
  2 +
  3 +### Base
  4 +
  5 +> 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.
  6 +
  7 +> - SMACSS, Jonathan Snook
  8 +
  9 +Place files here that impact top-level elements to apply global styles.
  10 +
  11 +This template includes [`normalize.css`](http://necolas.github.com/normalize.css/) to give consistent base styles for all browsers.
1  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/base.scss
... ... @@ -0,0 +1 @@
  1 +// Placeholder
375 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/base/normalize.scss
... ... @@ -0,0 +1,375 @@
  1 +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
  2 +
  3 +/* ==========================================================================
  4 + HTML5 display definitions
  5 + ========================================================================== */
  6 +
  7 +/*
  8 + * Corrects `block` display not defined in IE 8/9.
  9 + */
  10 +
  11 +article,
  12 +aside,
  13 +details,
  14 +figcaption,
  15 +figure,
  16 +footer,
  17 +header,
  18 +hgroup,
  19 +nav,
  20 +section,
  21 +summary {
  22 + display: block;
  23 +}
  24 +
  25 +/*
  26 + * Corrects `inline-block` display not defined in IE 8/9.
  27 + */
  28 +
  29 +audio,
  30 +canvas,
  31 +video {
  32 + display: inline-block;
  33 +}
  34 +
  35 +/*
  36 + * Prevents modern browsers from displaying `audio` without controls.
  37 + * Remove excess height in iOS 5 devices.
  38 + */
  39 +
  40 +audio:not([controls]) {
  41 + display: none;
  42 + height: 0;
  43 +}
  44 +
  45 +/*
  46 + * Addresses styling for `hidden` attribute not present in IE 8/9.
  47 + */
  48 +
  49 +[hidden] {
  50 + display: none;
  51 +}
  52 +
  53 +/* ==========================================================================
  54 + Base
  55 + ========================================================================== */
  56 +
  57 +/*
  58 + * 1. Sets default font family to sans-serif.
  59 + * 2. Prevents iOS text size adjust after orientation change, without disabling
  60 + * user zoom.
  61 + */
  62 +
  63 +html {
  64 + font-family: sans-serif; /* 1 */
  65 + -webkit-text-size-adjust: 100%; /* 2 */
  66 + -ms-text-size-adjust: 100%; /* 2 */
  67 +}
  68 +
  69 +/*
  70 + * Removes default margin.
  71 + */
  72 +
  73 +body {
  74 + margin: 0;
  75 +}
  76 +
  77 +/* ==========================================================================
  78 + Links
  79 + ========================================================================== */
  80 +
  81 +/*
  82 + * Addresses `outline` inconsistency between Chrome and other browsers.
  83 + */
  84 +
  85 +a:focus {
  86 + outline: thin dotted;
  87 +}
  88 +
  89 +/*
  90 + * Improves readability when focused and also mouse hovered in all browsers.
  91 + */
  92 +
  93 +a:active,
  94 +a:hover {
  95 + outline: 0;
  96 +}
  97 +
  98 +/* ==========================================================================
  99 + Typography
  100 + ========================================================================== */
  101 +
  102 +/*
  103 + * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
  104 + * Safari 5, and Chrome.
  105 + */
  106 +
  107 +h1 {
  108 + font-size: 2em;
  109 +}
  110 +
  111 +/*
  112 + * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
  113 + */
  114 +
  115 +abbr[title] {
  116 + border-bottom: 1px dotted;
  117 +}
  118 +
  119 +/*
  120 + * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
  121 + */
  122 +
  123 +b,
  124 +strong {
  125 + font-weight: bold;
  126 +}
  127 +
  128 +/*
  129 + * Addresses styling not present in Safari 5 and Chrome.
  130 + */
  131 +
  132 +dfn {
  133 + font-style: italic;
  134 +}
  135 +
  136 +/*
  137 + * Addresses styling not present in IE 8/9.
  138 + */
  139 +
  140 +mark {
  141 + background: #ff0;
  142 + color: #000;
  143 +}
  144 +
  145 +
  146 +/*
  147 + * Corrects font family set oddly in Safari 5 and Chrome.
  148 + */
  149 +
  150 +code,
  151 +kbd,
  152 +pre,
  153 +samp {
  154 + font-family: monospace, serif;
  155 + font-size: 1em;
  156 +}
  157 +
  158 +/*
  159 + * Improves readability of pre-formatted text in all browsers.
  160 + */
  161 +
  162 +pre {
  163 + white-space: pre;
  164 + white-space: pre-wrap;
  165 + word-wrap: break-word;
  166 +}
  167 +
  168 +/*
  169 + * Sets consistent quote types.
  170 + */
  171 +
  172 +q {
  173 + quotes: "\201C" "\201D" "\2018" "\2019";
  174 +}
  175 +
  176 +/*
  177 + * Addresses inconsistent and variable font size in all browsers.
  178 + */
  179 +
  180 +small {
  181 + font-size: 80%;
  182 +}
  183 +
  184 +/*
  185 + * Prevents `sub` and `sup` affecting `line-height` in all browsers.
  186 + */
  187 +
  188 +sub,
  189 +sup {
  190 + font-size: 75%;
  191 + line-height: 0;
  192 + position: relative;
  193 + vertical-align: baseline;
  194 +}
  195 +
  196 +sup {
  197 + top: -0.5em;
  198 +}
  199 +
  200 +sub {
  201 + bottom: -0.25em;
  202 +}
  203 +
  204 +/* ==========================================================================
  205 + Embedded content
  206 + ========================================================================== */
  207 +
  208 +/*
  209 + * Removes border when inside `a` element in IE 8/9.
  210 + */
  211 +
  212 +img {
  213 + border: 0;
  214 +}
  215 +
  216 +/*
  217 + * Corrects overflow displayed oddly in IE 9.
  218 + */
  219 +
  220 +svg:not(:root) {
  221 + overflow: hidden;
  222 +}
  223 +
  224 +/* ==========================================================================
  225 + Figures
  226 + ========================================================================== */
  227 +
  228 +/*
  229 + * Addresses margin not present in IE 8/9 and Safari 5.
  230 + */
  231 +
  232 +figure {
  233 + margin: 0;
  234 +}
  235 +
  236 +/* ==========================================================================
  237 + Forms
  238 + ========================================================================== */
  239 +
  240 +/*
  241 + * Define consistent border, margin, and padding.
  242 + */
  243 +
  244 +fieldset {
  245 + border: 1px solid #c0c0c0;
  246 + margin: 0 2px;
  247 + padding: 0.35em 0.625em 0.75em;
  248 +}
  249 +
  250 +/*
  251 + * 1. Corrects color not being inherited in IE 8/9.
  252 + * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  253 + */
  254 +
  255 +legend {
  256 + border: 0; /* 1 */
  257 + padding: 0; /* 2 */
  258 +}
  259 +
  260 +/*
  261 + * 1. Corrects font family not being inherited in all browsers.
  262 + * 2. Corrects font size not being inherited in all browsers.
  263 + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
  264 + */
  265 +
  266 +button,
  267 +input,
  268 +select,
  269 +textarea {
  270 + font-family: inherit; /* 1 */
  271 + font-size: 100%; /* 2 */
  272 + margin: 0; /* 3 */
  273 +}
  274 +
  275 +/*
  276 + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
  277 + * the UA stylesheet.
  278 + */
  279 +
  280 +button,
  281 +input {
  282 + line-height: normal;
  283 +}
  284 +
  285 +/*
  286 + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  287 + * and `video` controls.
  288 + * 2. Corrects inability to style clickable `input` types in iOS.
  289 + * 3. Improves usability and consistency of cursor style between image-type
  290 + * `input` and others.
  291 + */
  292 +
  293 +button,
  294 +html input[type="button"], /* 1 */
  295 +input[type="reset"],
  296 +input[type="submit"] {
  297 + -webkit-appearance: button; /* 2 */
  298 + cursor: pointer; /* 3 */
  299 +}
  300 +
  301 +/*
  302 + * Re-set default cursor for disabled elements.
  303 + */
  304 +
  305 +button[disabled],
  306 +input[disabled] {
  307 + cursor: default;
  308 +}
  309 +
  310 +/*
  311 + * 1. Addresses box sizing set to `content-box` in IE 8/9.
  312 + * 2. Removes excess padding in IE 8/9.
  313 + */
  314 +
  315 +input[type="checkbox"],
  316 +input[type="radio"] {
  317 + box-sizing: border-box; /* 1 */
  318 + padding: 0; /* 2 */
  319 +}
  320 +
  321 +/*
  322 + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
  323 + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
  324 + * (include `-moz` to future-proof).
  325 + */
  326 +
  327 +input[type="search"] {
  328 + -webkit-appearance: textfield; /* 1 */
  329 + -moz-box-sizing: content-box;
  330 + -webkit-box-sizing: content-box; /* 2 */
  331 + box-sizing: content-box;
  332 +}
  333 +
  334 +/*
  335 + * Removes inner padding and search cancel button in Safari 5 and Chrome
  336 + * on OS X.
  337 + */
  338 +
  339 +input[type="search"]::-webkit-search-cancel-button,
  340 +input[type="search"]::-webkit-search-decoration {
  341 + -webkit-appearance: none;
  342 +}
  343 +
  344 +/*
  345 + * Removes inner padding and border in Firefox 4+.
  346 + */
  347 +
  348 +button::-moz-focus-inner,
  349 +input::-moz-focus-inner {
  350 + border: 0;
  351 + padding: 0;
  352 +}
  353 +
  354 +/*
  355 + * 1. Removes default vertical scrollbar in IE 8/9.
  356 + * 2. Improves readability and alignment in all browsers.
  357 + */
  358 +
  359 +textarea {
  360 + overflow: auto; /* 1 */
  361 + vertical-align: top; /* 2 */
  362 +}
  363 +
  364 +/* ==========================================================================
  365 + Tables
  366 + ========================================================================== */
  367 +
  368 +/*
  369 + * Remove most spacing between table cells.
  370 + */
  371 +
  372 +table {
  373 + border-collapse: collapse;
  374 + border-spacing: 0;
  375 +}
9 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/layout/README.markdown
Source Rendered
... ... @@ -0,0 +1,9 @@
  1 +# SMACSS
  2 +
  3 +### Layout
  4 +
  5 +> 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.
  6 +
  7 +> - SMACSS, Jonathan Snook
  8 +
  9 +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`.
9 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/README.markdown
Source Rendered
... ... @@ -0,0 +1,9 @@
  1 +# SMACSS
  2 +
  3 +### Modules
  4 +
  5 +> 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.
  6 +
  7 +> - SMACSS, Jonathan Snook
  8 +
  9 +In this directory we typically use one file per module.
2  middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/modules/_btn.scss
... ... @@ -1,2 +0,0 @@
1   -/* Buttons
2   -================================================== */
12 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/states/README.markdown
Source Rendered
... ... @@ -0,0 +1,12 @@
  1 +# SMACSS
  2 +
  3 +### States
  4 +
  5 +> 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:
  6 +
  7 +> 1. State styles can apply to layout and/or module styles; and
  8 +> 2. State styles indicate a JavaScript dependency.
  9 +
  10 +> - SMACSS, Jonathan Snook
  11 +
  12 +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`.
19 middleman-more/lib/middleman-more/templates/smacss/source/stylesheets/style.css.scss
... ... @@ -1,7 +1,12 @@
1   -@import
2   - "0.site-settings",
3   - "1.base",
4   - "2.layout",
5   - "3.states",
6   - "4.themes",
7   - "modules/btn";
  1 +// Import Base Styles
  2 +@import "base/normalize"
  3 +// @import "base/all_your"
  4 +
  5 +// Import Layout Styles
  6 +// @import "layout/grid"
  7 +
  8 +// Import Module Styles
  9 +// @import "modules/buttons"
  10 +
  11 +// Import State Styles
  12 +// @import "states/validation"

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.