Merge branch 'release/Release_for_1.1.0'

index.html

@@ -56,21 +56,21 @@ <h1>Hello, world!</h1>
 				<div class="b0_12 b3_08">
 					<div class="pt pb">
 						<h2>Heading</h2>
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. </p>
+						<p><i class="fa fa-pied-piper"></i>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. </p>
 						<a href="#">Read more</a>
 					</div>
 				</div>
 				<div class="b0_12 b3_08">
 					<div class="pt pb">
 						<h2>Heading</h2>
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. </p>
+						<p><i class="fa fa-info-circle"></i>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. </p>
 						<a href="#">Read more</a>
 					</div>
 				</div>
 				<div class="b0_12 b3_08">
 					<div class="pt pb">
 						<h2>Heading</h2>
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. </p>
+						<p><i class="fa fa-binoculars"></i>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. </p>
 						<a href="#">Read more</a>
 					</div>
 				</div>
@@ -100,31 +100,51 @@ <h2 class="mt-0">Menu</h2>
 						<h1 class="mt-0">Basic layout</h1>
 
 						<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
-
+						<div class="alert mb">
+							<i class="fa fa-info-circle"></i>&nbsp;Friendly alert
+						</div>
 						<h2>Header Level 2</h2>
 						<ol>
 							<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 							<li>Aliquam tincidunt mauris eu risus.</li>
 						</ol>
-
 						<blockquote>
 							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
 						</blockquote>
+						<div class="alert-warning mb">
+							<i class="fa fa-warning"></i>&nbsp;This is a warning with a <a href="#">link</a>!
+						</div>
 
-						<h3>Header Level 3</h3>
+						<h3 class="head2">Header Level 3 met .head2 styling</h3>
 						<ul>
+							<li>By using .head, .head1, .head2, etc you can use heading styling on any element you want</li>
 							<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 							<li>Aliquam tincidunt mauris eu risus.</li>
 						</ul>
 
-						<!-- Standard buttons -->
-						<h2>Standard buttons</h2>
-						<a href="#" class="btn mb">standard button</a></li>
-						<a href="#" class="btn-theme01 mb">btn-theme01</a>
-						<a href="#" class="btn-theme02 mb">btn-theme02</a>
-						<a href="#" class="btn-theme03 mb">btn-theme03</a>
-						<a href="#" class="btn-theme04 mb">btn-theme04</a>
-						<a href="#" class="btn-theme05 mb">btn-theme05</a>
+						<div class="mb-3x">
+							<!-- Standard buttons -->
+							<h2 class="head2">Standard buttons</h2>
+							<a href="#" class="btn mb">standard button</a></li>
+							<a href="#" class="btn-theme01 mb">btn-theme01</a>
+							<a href="#" class="btn-theme02 mb">btn-theme02</a>
+							<a href="#" class="btn-theme03 mb">btn-theme03</a>
+							<a href="#" class="btn-theme04 mb">btn-theme04</a>
+							<a href="#" class="btn-theme05 mb">btn-theme05</a>
+						</div>
+
+						<div class="mb-3x">
+							<h2 class="head2">Example buttons with icons</h2> 
+							<div class="g mb-3x">
+								<div class="b0_12 b2_06 b6_04"><a href="#" class="btn btn-full mb"><i class="fa fa-angle-right"></i> Read more</a></div>
+								<div class="b0_12 b2_06 b6_04"><a href="#" class="btn-theme01 btn-full mb"><i class="fa fa-edit"></i> Edit</a></div>
+								<div class="b0_12 b2_06 b6_04"><a href="#" class="btn-theme02 btn-full mb"><i class="fa fa-cloud"></i> Cloud</a></div>
+								<div class="b0_12 b2_06 b6_04"><a href="#" class="btn-theme03 btn-full mb"><i class="fa fa-globe"></i> Globe</a></div>
+								<div class="b0_12 b2_06 b6_04"><a href="#" class="btn-theme04 btn-full mb"><i class="fa fa-spinner fa-spin"></i> Spin</a></div>
+								<div class="b0_12 b2_06 b6_04"><a href="#" class="btn-theme05 btn-full mb"><i class="fa fa-list"></i> List</a></div>
+							</div>
+						</div>
+						</div>
 					</div>
 				</div>
 			</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "castlecss-boilerplate",
-  "version": "1.0.1",
-  "description": "Boilerplate for CastleCSS",
+  "version": "1.1.0",
+  "description": "HMTL5/CSS Boilerplate with CastleCSS",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
     "url": "git+https://github.com/CastleCSS/castlecss-boilerplate.git"
   },
   "keywords": [
-	"boilerplate",
+    "boilerplate",
     "castlecss",
     "castle",
     "css",
@@ -28,17 +28,18 @@
   },
   "homepage": "http://www.castlecss.com",
   "dependencies": {
-    "castlecss-buttons": "^0.4.1",
-    "castlecss-core": "^2.0.1",
-    "castlecss-notifications": "^0.3.0"
+    "castlecss-buttons": "^0.5.0",
+    "castlecss-core": "^2.1.0",
+    "castlecss-icons": "^1.0.2",
+    "castlecss-notifications": "^1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
     "cssnano": "^3.7.3",
     "grunt": "^1.0.1",
     "grunt-contrib-watch": "~1.0.0",
     "grunt-postcss": "^0.8.0",
-    "grunt-sass": "^1.0.0",
+    "grunt-sass": "^2.0.0",
     "jit-grunt": "^0.10.0",
     "pixrem": "^3.0.0"
   }

scss/layout/example.hero.scss

@@ -1,7 +1,7 @@
 // Basic hero styling for demo purposes
 .hero {
 	background: $theme04;
-	color: $color01;
+	color: $theme02;
 	padding: $padding-default*6 0;
 	margin-bottom: $margin-default;
 

scss/main.scss

@@ -8,6 +8,7 @@
 @import "node_modules/castlecss-core/sass/main";
 @import "node_modules/castlecss-buttons/sass/main";
 @import "node_modules/castlecss-notifications/sass/main";
+@import "node_modules/castlecss-icons/sass/main";
 
 /* 	Include your own files below this line
 	--------------------------------------

scss/variables.scss

@@ -3,35 +3,69 @@
 	EDIT YOUR SITE VARIABLES HERE
 */
 
+/*
+	---------- VARIABLES ----------
+	Castlecss-core variables
+	Do not edit this file!
+	Create a copy and edit or add your own variables there
+	or download the boilerplate for a ready-to-go setup here: https://github.com/CastleCSS/castlecss-boilerplate
+	-------------------------------
+*/
+
 /*
 	Base colors
 	Color 01 and 02 reservered for white and black
 */
 $color03: #eeeeee;
 $color04: #222222;
-$radius: 3px;
 
-/*	Theme colors */
+/*
+	Theme colors
+*/
 $theme01: 	#1B94BF;	// Knight blue
 $theme02: 	#093142; 	// Royal blue
 $theme03:	#12637F;	// Falcon blue
 $theme04:	#FFC200;	// Royal yellow
 $theme05:	#FFFFFF;	// Destroyer white
 
-$alert:		#FFD700;
-$negative:	#FF7878;
-$positive:	#29C85D;
+/*
+	Notification colors
+*/
+$alert:		#c0dbff;
+$warning:	#ffe283;
+$negative:	#feb3b3;
+$positive:	#c3e5cd;
 $disabled:	#CDCDC1;
 
-/* Breakpoints */
+/*
+	Breakpoints
+	You can edit or add breakpoints
+*/
 $b1: 320px;
 $b2: 480px;
 $b3: 768px;
 $b4: 1024px;
 $b5: 1280px;
 $b6: 1600px;
 
-/* Container sizes */
+/*
+	Mapping for breakpoint loops
+	Must be the same amount as breakpoints above
+*/
+$breakpoint-map: (
+	1: $b1,
+	2: $b2,
+	3: $b3,
+	4: $b4,
+	5: $b5,
+	6: $b6,
+);
+$amount-breakpoints: length($breakpoint-map);
+
+/*
+	Container sizes
+	Must be the same amount of breakpoints and $breakpoint-map as above
+*/
 $container: 100%;
 $container-b1: 100%;
 $container-b2: 100%;
@@ -40,8 +74,28 @@ $container-b4: 996px;
 $container-b5: 1224px;
 $container-b6: 1400px;
 
-/* Grid */
+/*
+	Container map
+	Must be the same amount of breakpoints and $breakpoint-map as above
+*/
+$container-map: (
+	1: $container-b1,
+	2: $container-b2,
+	3: $container-b3,
+	4: $container-b4,
+	5: $container-b5,
+	6: $container-b6,
+);
+
+/*
+	Flexbox grid, set to true or false for flexbox
+*/
 $flexbox-grid:	 true;
+
+/*
+	Grid gutters
+	Must be the same amount of breakpoints $breakpoint-map as above
+*/
 $grid-gutter:	 12px;
 $grid-gutter-b1: 12px;
 $grid-gutter-b2: 12px;
@@ -50,16 +104,22 @@ $grid-gutter-b4: 12px;
 $grid-gutter-b5: 12px;
 $grid-gutter-b6: 12px;
 
-/* Default margin, padding, gutter */
+/*
+	Default margin and padding
+*/
+
 $padding-default: 	12px;
 $margin-default: 	12px;
 
-/* Standard border-radius */
-$radius:	5px;
-
-/* Fonts */
-$font-pri: 'Open Sans', Helvetica, Arial;
-$font-sec: 'Open Sans', Helvetica, Arial;
+/*
+	Standard border-radius
+*/
+$radius:	3px;
 
+/*
+	Fonts
+*/
+$font-pri: Arial, Helvetica, sans-serif;
+$font-sec: Arial, Helvetica, sans-serif;
 $font-size-default: 1.6rem;
-$line-height-default: 1.5;
+$line-height-default: 1.5;