Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Feature/adjustments #1

Merged
merged 10 commits into from
This page is out of date. Refresh to see the latest.
View
61 README.md
@@ -1,4 +1,63 @@
-Example SASS pattern template
+Example Sass pattern template
=============================
+This is an example of our module pattern in Sass.
+
+ /module
+ |-- module.scss
+ |-- _style.scss
+ |
+ |-- /docs
+ | |-- module-data.yml
+ | |-- module-data.handlebars
+ |
+ |-- /includes
+ | |-- _module-default-vars.scss
+ | |-- _module-scaffold.scss
+ | |-- _module-utilities.scss
+ |
+ |-- /modifiers
+ | |-- _module-color.scss
+ | |-- _module-size.scss
+
+
+
+Directory Structure
+---------------------
+
+#### module.scss
+
+The example `module.scss` (which might be called `buttons.scss` or `grid.scss` in a real project) imports _styles.scss and exports a single CSS file which is then included in the `<head>` of a document.
+
+
+#### styles.scss
+
+In the `_styles.scss` file the scaffolding styles are imported first.
+
+Next the main components of a module are then styled beneath. Modifiers (such as colors, sizing, etc) are imported at the end of the file and can be optionally turned on or off.
+
+
+#### /docs
+
+In `/docs` there is data about the module and example markup using a [Handlebars](http://handlebarsjs.com/) template which can then be exported for use in a pattern library.
+
+
+#### /includes
+
+This directory contains the utilities (mixins/functions) and default variables that are specific to this module. The `_module-scaffold.scss` file then imports all of the global config variables and the rest of these files together.
+
+These are files that do not generate styles such as the global variables, and the module’s defaults.
+
+
+#### /modifiers
+
+Often throughout a project we’ll need to optionally style separate modifiers for color, sizing or positioning, without contaminating the default styles. These should be contained in separate files such as `_button-color.scss`, `button-size.scss`).
+
+
+
+
+Documentation
+---------------------
+
+This template style was developed using [a fork](https://github.com/erskinedesign/Idiomatic-SCSS-Comments-Snippets) of the Idiomatic CSS comment syntax Sublime Text package. This is to make sure we keep files consistently organised and documented.
View
26 _style.scss
@@ -1,26 +0,0 @@
-///////////////////////
-// Styles for Module //
-///////////////////////
-
-// - BEM naming http://bem.info/method/
-
-@import 'includes/module-scaffold'; // default vars for this module
-
-.module {
- //block
-}
-
-// basic description of element's role in module
-.module__element {
- // element
-}
-
-// Basic comment explaining what modifier does
-.module--modifier {
- // modifier
-}
-
-// addtional optional includes
-@if ($module-option-enabled == true ) {
- @import 'includes/module-option';
-}
View
13 includes/_module-defaults.scss
@@ -1,13 +0,0 @@
-//////////////////////////////////
-// Default variables for module //
-//////////////////////////////////
-
-// Do NOT edit this file unless you are developing the module itself
-// For project specific changes override this variable in an appropriately
-// named filethe global in the config directory
-
-// - namespace variable names with the module-name
-// - prefix private variable names with _module name
-// - always set !default on public variables
-
-$module_variable: 'default' !default;
View
7 includes/_module-option.scss
@@ -1,7 +0,0 @@
-
-@import './module-scaffold'; // default vars for this module
-
-// short comment explaining what this module permits
-.module--option {
- //do stuff
-}
View
4 includes/_module-scaffold.scss
@@ -1,4 +0,0 @@
-// Import scaffolding for styling this module - do not import anything that outputs CSS!
-@import '../../common/config'; // global config
-@import 'includes/module-defaults'; // default vars for this module
-@import 'includes/module-utils'; // mixins and fns for this module
View
16 includes/_module-utils.scss
@@ -1,16 +0,0 @@
-/////////////////////////////////////
-// Mixins and functions for module //
-/////////////////////////////////////
-
-
-// - namespace function and mixin names with the module name
-// - prefix private function and mixin names with _module name
-// - only declare variables in fn/mixin scope
-
-@function module-calculation-function($some-number, $another-number){
- @return $some-number + $another-number
-}
-
-@mixin module-mixin(){
- width: module-calculation-function(1, 2) * 1%;
-}
View
0  LICENSE → module/LICENSE
File renamed without changes
View
2  module/README.md
@@ -0,0 +1,2 @@
+MODULE README
+======================
View
0  VERSION → module/VERSION
File renamed without changes
View
43 module/_styles.scss
@@ -0,0 +1,43 @@
+// ==========================================================================
+// STYLES FOR THE MODULE
+// ==========================================================================
+//
+// These styles are imported into module.scss.
+//
+//
+// CONTENTS
+// 1. Default variables, functions and mixins.
+// 2. Module styles.
+// 3. Import modifiers.
+
+
+
+
+// DEFAULT VARIABLES AND OPTIONS FOR THIS MODULE
+// ==========================================================================
+// Import all of the scaffolding includes that don’t generate styles
+
+@import 'includes/module-scaffold';
+
+
+
+// MODULE STYLES
+// ==========================================================================
+
+.module {
+}
+
+
+.module__element {
+}
+
+
+
+
+
+// IMPORT MODULE MODIFIERS
+// ==========================================================================
+@if ($option) {
+ @import 'modifiers/module-color'
+ @import 'modifiers/module-size'
+}
View
0  docs/module-data.yml → module/docs/module-data.yml
File renamed without changes
View
0  docs/module-template.handlebars → module/docs/module-template.handlebars
File renamed without changes
View
14 module/includes/_module-default-vars.scss
@@ -0,0 +1,14 @@
+// ==========================================================================
+// DEFAULT VARIABLES FOR MODULE
+// ==========================================================================
+//
+// WARNING! Do not edit this file unless you are developing the module itself
+//
+// For project specific changes override this variable in an appropriately
+// named file in the config directory.
+//
+
+
+$module_variable: 'default' !default;
+
+$btn_border_radius: 5px !default;
View
28 module/includes/_module-scaffold.scss
@@ -0,0 +1,28 @@
+// ==========================================================================
+// MODULE SCAFFOLDING
+// ==========================================================================
+//
+// Import scaffolding code for styling this module.
+//
+// This is code that does not generate output eg. mixins and functions
+//
+
+
+// IMPORT GLOBAL CONFIG
+// Imports global variables and mixins/functions
+
+@import '../../globals/config';
+
+
+
+// MODULE DEFAULTS
+// Imports all of the module’s default variables
+
+@import 'includes/module-default-vars';
+
+
+
+// MODULE UTILITIES
+// Imports functions and mixins for this module.
+
+@import 'includes/module-utilities';
View
29 module/includes/_module-utilities.scss
@@ -0,0 +1,29 @@
+// ==========================================================================
+// MODULE UTILITIES
+// ==========================================================================
+//
+// These are the mixins and functions available to this module.
+//
+//
+// CONTENTS
+// 1. Module width calculator mixins.
+//
+
+
+
+
+
+
+
+
+// MODULE WIDTH CALCULATOR
+// ==========================================================================
+
+@function module-calculation-function($some-number, $another-number){
+ @return $some-number + $another-number
+}
+
+
+@mixin module-mixin(){
+ width: module-calculation-function(1, 2) * 1%;
+}
View
15 module/modifiers/_module-color.scss
@@ -0,0 +1,15 @@
+// ==========================================================================
+// MODULE COLOR MODIFIER
+// ==========================================================================
+//
+// This modifier alternates the color of the module.
+//
+
+
+.btn--primary {
+
+}
+
+.btn--secondary {
+
+}
View
13 module/modifiers/_module-size.scss
@@ -0,0 +1,13 @@
+/* ==========================================================================
+ MODULE SIZE MODIFIER
+ ========================================================================== */
+/**
+ * This modifier alternates the size of the module.
+ */
+
+.module--alpha-size {
+}
+
+
+.module--beta-size {
+}
View
24 module.scss → module/module.scss
@@ -1,7 +1,6 @@
-/////////////////
-// Module name //
-/////////////////
-//
+// ==========================================================================
+// MODULE NAME
+// ==========================================================================
// @name Module
// @description Module description
//
@@ -18,5 +17,18 @@
// This is a [markdown](http://daringfireball.net/projects/markdown/syntax)
// formatted block that will be output at the top of the styleguide entry
// for this module.
-//
-@import 'styles'; // output styling for this
+//
+
+
+
+
+
+// IMPORT STYLES
+// ==========================================================================
+// Import styles to be output as a CSS file.
+
+@import 'styles';
+
+
+
+
View
0  package.json → module/package.json
File renamed without changes
Something went wrong with that request. Please try again.