renamed layouts to components to better represent modern web app dev …

…+ clean up
leongaban · Jun 1, 2017 · 5df2e31 · 5df2e31
1 parent 52095e4
commit 5df2e31
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -33,33 +33,33 @@ Master Stylesheet
 
 stylesheets/
 |-- vendors/
-|   |-- _reset       	    	# Eric Meyer's reset v2.0.0
+|   |-- _reset # Eric Meyer's reset v2.0.0
 |
-|-- modules/            	    # Partials
-|   |-- _base           	    # Imports all the modules
-|   	|-- _animation      	    # CSS animations
-|   	|-- _colors         	    # Colors
-|   	|-- _fonts          	    # Fonts
-|   	|-- _mixins         	    # Imports all mixins
+|-- modules/
+|   |-- _base # Imports all the modules
+|   	|-- _animation
+|   	|-- _colors
+|   	|-- _fonts
+|   	|-- _mixins
 |
-|   |-- _defaults       	    # Global Defaults
-|   |-- _buttons         	    # Buttons styles
-|   |-- _fonts         	    	# Fonts styles
-|   |-- _inputs          	    # Inputs styles
-|   |-- _layout         	    # Layout Views
+|   |-- _defaults
+|   |-- _buttons
+|   |-- _fonts
+|   |-- _inputs
+|   |-- _layout
 |   	|-- header
 |   	|-- home
 |   	|-- footer
 |   	...
 |
-|   |-- _svg					# For SVG background images
-|   |-- _queries				# Reponsive media queries
+|   |-- _svg
+|   |-- _queries
 |
 |-- vendors/
-|   |-- _normalize      	    # Nicolas Gallagher v3.0.2
+|   |-- _normalize # Nicolas Gallagher v3.0.2
 |   ...
 |
-`-- main     				    # Primary Sass module
+`-- main
 */
 
 @import "vendors/normalize"; 	// Normalize stylesheet
@@ -111,10 +111,10 @@ html, body { width: 100%; height: 100%; }
 
 body {
 	overflow-x: hidden;
-    // font-family: 'Ubuntu', sans-serif; // <- choose your body font
+  // font-family: 'Ubuntu', sans-serif; // <- choose your body font
 	// font-weight: 300;
-    font-size: em(16);
-    color: #666;
+  font-size: em(16);
+  color: #666;
 	background: $body;
 }
 
@@ -143,8 +143,8 @@ body {
 
 <strong>Finally the SVG or PNG and <i>media queries</i> modules.</strong>
 ```
-@import "modules/svg";		// Load SVG
-@import "modules/queries";	// Media Queries
+@import "modules/svg";
+@import "modules/queries";
 ```
 
 <strong>In the SVG module it's recommended to just add class names here, then in the modules where those classes are used, set the visual properties.</strong>
@@ -162,19 +162,19 @@ body {
 
 // Errors | alerts.scss
 .lost-man {
-	background-size: 1600px 1600px;
-	background-image: url(/static/img/dashboard/icons.svg), none;
+  background-size: 1600px 1600px;
+  background-image: url(/static/img/dashboard/icons.svg), none;
 }
 ```
 
 <strong>Class in seperate module using the SVG background image.</strong>
 ```
 .green-phone-icon {
-	float: left;
-	width: 24px;
-	height: 24px;
-	margin: 5px 10px;
-	background-position: -50px -150px;
+  float: left;
+  width: 24px;
+  height: 24px;
+  margin: 5px 10px;
+  background-position: -50px -150px;
 }
 ```
 

diff --git a/package.json b/package.json
@@ -1,17 +1,15 @@
 {
   "name": "sass-smacss",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A starter kit for SASS/SCSS projects",
   "main": "main.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "sass", "scss"
-  ],
-  "authors": [
-    "Leon Gaban @leongaban"
+    "css", "sass", "scss", "smacss"
   ],
+  "author": "Leon Gaban @leongaban",
   "license": "ISC",
   "devDependencies": {
     "del": "^1.1.1",

diff --git a/sass/layouts/_footer.scss → sass/components/_footer.scss b/sass/layouts/_footer.scss → sass/components/_footer.scss
diff --git a/sass/layouts/_header.scss → sass/components/_header.scss b/sass/layouts/_header.scss → sass/components/_header.scss
diff --git a/sass/layouts/_home.scss → sass/components/_home.scss b/sass/layouts/_home.scss → sass/components/_home.scss
diff --git a/sass/layouts/.DS_Store b/sass/layouts/.DS_Store
diff --git a/sass/main.scss b/sass/main.scss
@@ -1,36 +1,36 @@
 /*==========================================================
-Master Stylesheet 0.2.4
+Master Stylesheet 0.2.5
 ============================================================
 
 stylesheets/
 |-- vendors/
-|   |-- reset                   # Eric Meyer's reset v2.0.0
+|   |-- reset # Eric Meyer's reset v2.0.0
 |
-|-- modules/                    # Partials
-|   |-- _base                   # Imports all the modules
-|       |-- _animation              # CSS animations
-|       |-- _colors                 # Colors
-|       |-- _fonts                  # Fonts
-|       |-- _mixins                 # Imports all mixins
+|-- modules/
+|   |-- _base
+|       |-- _animation
+|       |-- _colors
+|       |-- _fonts
+|       |-- _mixins
 |
-|   |-- _defaults               # Global Defaults
-|   |-- _buttons                # Buttons styles
-|   |-- _fonts                  # Fonts styles
-|   |-- _inputs                 # Inputs styles
-|   |-- _layout                 # Layout Views
+|   |-- _defaults
+|   |-- _buttons
+|   |-- _fonts
+|   |-- _inputs
+|   |-- _layout
 |       |-- header
 |       |-- home
 |       |-- footer
 |       ...
 |
-|   |-- _svg                    # SVG background images
-|   |-- _queries                # Reponsive media queries
+|   |-- _svg
+|   |-- _queries
 |
 |-- vendors/
-|   |-- normalize               # Nicolas Gallagher v3.0.2
+|   |-- normalize # Nicolas Gallagher v3.0.2
 |   ...
 |
-`-- main_web                    # Primary Sass module
+`-- main
 */
 
 @import "vendors/normalize";    // Normalize stylesheet

diff --git a/sass/modules/_colors.scss b/sass/modules/_colors.scss
@@ -3,11 +3,11 @@
 ========================================================= */
 
 // Primary
-// $blue: 	 #024562;
+// $blue: 	#024562;
 // $green:  #249B7A;
 // $orange: #FC913A;
-// $red: 	 #F25A43;
-// $gray:	 #454545;
+// $red: 	#F25A43;
+// $gray:	#454545;
 
 // Brands
 // $facebook: #438acb;

diff --git a/sass/modules/_layout.scss → sass/modules/_components.scss b/sass/modules/_layout.scss → sass/modules/_components.scss
@@ -3,10 +3,10 @@
 ========================================================= */
 
 // Header
-// @import "../layouts/header";
+// @import "../components/header";
 
 // Homepage
-// @import "../layouts/home";
+// @import "../components/home";
 
 // Footer
-// @import "../layouts/footer";
+// @import "../components/footer";
diff --git a/sass/modules/_queries.scss b/sass/modules/_queries.scss
@@ -31,13 +31,3 @@
 ========================================================= */
 @media all and (max-width: 640px) {
 }
-
-/* 400
-========================================================= */
-@media all and (max-width: 400px) {
-}
-
-/* 360
-========================================================= */
-@media all and (max-width: 360px) {
-}
diff --git a/sass/modules/defaults.scss b/sass/modules/defaults.scss
@@ -1,7 +1,6 @@
 /* Start of styles | Defaults
 ============================================================
 ========================================================= */
-
 html, body { width: 100%; height: 100%; } 
 
 body {
@@ -10,18 +9,12 @@ body {
     // font-weight: 300;
     font-size: em(16);
     color: #666;
-    background: $body; // from _colors
-}
-
-sup, sub {
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline;
+    background: $body;
 }
 
+sup, sub { font-size: 75%; line-height: 0; vertical-align: baseline; }
 sup { top: -0.5em; left: 0.15em; }
 sub { bottom: -0.25em; }
-
 strong { font-weight: 600; }
 
 a {