sass-lint and placeholder/output choices added for the predefined classes

Author: bcinarli

.gitignore

@@ -5,3 +5,89 @@ output
 codekit-project-icon.png
 bower_components
 npm-debug.log
+### OSX template
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Windows template
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+

.sass-lint.yml

@@ -0,0 +1,36 @@
+files:
+  ignore: 'rocket-engine/styles/gui/overwrites/**'
+
+# Rules Configuration
+rules:
+  # Mixins
+  mixins-before-declarations: 0
+
+  # Disallows
+  no-color-literals: 0
+  no-css-comments: 0
+  no-vendor-prefixes: 0
+
+  # Style
+  indentation: 0
+  hex-notation:
+    - 1
+    -
+      style: lowercase
+  nesting-depth:
+    - 1
+    -
+      max-depth: 3
+  property-sort-order:
+    - 1
+    -
+      order: smacss # https://gist.github.com/chipcullen/b014d9d6885e1e785a31
+
+  clean-import-paths:
+    leading-underscore: true
+
+  # Inner Spacing
+  space-around-operator: 0
+
+  # Final Items
+  final-newline: 0

VERSION.md

@@ -1,13 +1,22 @@
 # Melange Change Log
+## Version 0.7.0
+- NEW: sass-lint added for better standardization
+- NEW: `%melange-*` placeholders added for most of the melange default classes.
+- NEW: `$predefined-classes` variable added to control if Melange classes will stay as placeholders for the project `@extend`s or css outputs. To prevent major breakdowns, default value set to `true`
+- CHANGE: Normalize version updated to `4.1.1`
+- CHANGE: Underscored variable names changed to their dashed versions.
+- FIX: Coding style revised according to sass-lint configurations.
+
+
 ## Version 0.6.1
-- Fix: Missing "disabled" styles in input elements
+- FIX: Missing "disabled" styles in input elements
 
 ## Version 0.6.0
-- New: Field radius settings added for field styles. Use `$base-field-border-radius` variable to set.
-- New: woff2 font type support settings added for `font-face` mixins.
-- New: Border Radius setting added for button styles. Use `$base-button-border-radius` variable to set one. Default is `null`
-- New: `button-colors` mixin added for button styles. 
-- New: Breakpoints settings added. `$base-widescreen`, `$base-desktop`, `$base-tablet`, `$base-tablet-landscape`, `$base-tablet-portrait` and `$base-phone` variables added both to default variables and settings.
-- New: `.mobile-hidden`, `.mobile-visible` auxiliary classes added.
-- Change: Predefined font-size definitions from _normalize.css_ removed
-- Fix: `text-decoration: underline` problem for anchor buttons resolved.
+- NEW: Field radius settings added for field styles. Use `$base-field-border-radius` variable to set.
+- NEW: woff2 font type support settings added for `font-face` mixins.
+- NEW: Border Radius setting added for button styles. Use `$base-button-border-radius` variable to set one. Default is `null`
+- NEW: `button-colors` mixin added for button styles. 
+- NEW: Breakpoints settings added. `$base-widescreen`, `$base-desktop`, `$base-tablet`, `$base-tablet-landscape`, `$base-tablet-portrait` and `$base-phone` variables added both to default variables and settings.
+- NEW: `.mobile-hidden`, `.mobile-visible` auxiliary classes added.
+- CHANGE: Predefined font-size definitions from _normalize.css_ removed
+- FIX: `text-decoration: underline` problem for anchor buttons resolved.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "melange",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "homepage": "https://github.com/bcinarli/melange",
   "authors": [
     "Bilal Çınarlı <[email protected]>"

lib/_melange.scss

@@ -9,42 +9,42 @@
     General Settings
     ------------------------------------------- **/
 // add settings to your styles before melange.
-//@import "settings/settings";
+//@import 'settings/settings';
 
 
 
 /** -------------------------------------------
     Internal Variables
     ------------------------------------------- **/
-@import "melange/variables/variables";
+@import 'melange/variables/variables';
 
 
 /** -------------------------------------------
     Melange Internal Methods
     ------------------------------------------- **/
 // use Caffeine
-//@import "melange/_system/system";
+//@import 'melange/_system/system';
 
 
 /** -------------------------------------------
     Global Styles
     ------------------------------------------- **/
-@import "melange/globals/globals";
+@import 'melange/globals/globals';
 
 
 /** -------------------------------------------
     Layout Definitions
     ------------------------------------------- **/
-@import "melange/layout/layout";
+@import 'melange/layout/layout';
 
 
 /** -------------------------------------------
     Base Element Styles
     ------------------------------------------- **/
-@import "melange/elements/elements";
+@import 'melange/elements/elements';
 
 
 /** -------------------------------------------
     Default Components
     ------------------------------------------- **/
-@import "melange/components/components";
+@import 'melange/components/components';

lib/melange/auxiliary/_auxiliary.scss

@@ -6,4 +6,4 @@
 //
 // Visuals
 //
-@import "_visibility";
+@import 'visibility';

lib/melange/auxiliary/_visibility.scss

@@ -7,8 +7,8 @@
  * Hide element
  */
 .is-hidden,
-.hide // for fallback older versions
-{
+// for fallback older versions
+.hide {
     display: none;
 }
 
@@ -18,37 +18,37 @@
  * visually invisible for accessibility 
  */
 .for-screenreader-only {
-	position: absolute;
-	overflow: hidden;
-	width: 1px;
-	height: 1px;
-	margin: -1px;
-	padding: 0;
-	clip: rect(0 0 0 0);
-	clip: rect(0, 0, 0, 0);
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip: rect(0, 0, 0, 0);
 }
 
 /**
  * Device visibility
  */
 .desktop-visible {
     // do not interfere element's display, just hide when not needed
-    @media screen and (max-width: $base-desktop - 1px){
-    	display: none;
+    @media screen and (max-width: $base-desktop - 1px) {
+        display: none;
     }
 }
 
 .desktop-hidden,
 .tablet-visible {
-    @media screen and (min-width: $base-desktop){
-    	display: none;
+    @media screen and (min-width: $base-desktop) {
+        display: none;
     }
 }
 
 .tablet-hidden {
     // hide if in the tablet region
     @media screen and (min-width: $base-phone + 1px) and (max-width: $base-tablet-landscape) {
-    	display: none;
+        display: none;
     }
 }
 

lib/melange/components/_components.scss

@@ -6,4 +6,4 @@
 /**
  * Media Component
  */
-@import "media";
+@import 'media';

lib/melange/components/_media.scss

@@ -10,19 +10,19 @@
  */
 
 .media {
-    @extend .group;
-}
+    @extend %melange-button;
 
-.media-visual {
-    display: block;
-    float: left;
-    margin-right: $base-spacing;
-}
+    &-visual {
+        display: block;
+        margin-right: $base-spacing;
+        float: left;
+    }
 
-.media-text {
-    + .media-visual { // visual added after text
-        float: right;
-        margin-right: auto;
-        margin-left: $base-spacing;
+    &-text {
+        + .media-visual { // visual added after text
+            margin-right: auto;
+            margin-left: $base-spacing;
+            float: right;
+        }
     }
 }

lib/melange/elements/_elements.scss

@@ -6,45 +6,45 @@
 //
 // Text Styles
 //
-@import "texts";
+@import 'texts';
 
 //
 // Form Styles
 //
-@import "forms/forms";
+@import 'forms/forms';
 
 
 //
 // Table Styles
 //
-@import "tables";
+@import 'tables';
 
 
 //
 // Link & Nav Styles
 //
-@import "links";
+@import 'links';
 
 
 //
 // Heading Styles
 //
-@import "headings";
+@import 'headings';
 
 
 //
 // List Styles
 //
-@import "lists";
+@import 'lists';
 
 
 //
 //  Inline Elements
 //
-@import "inline";
+@import 'inline';
 
 
 //
 // Block Elements
 //
-@import "block";
+@import 'block';