diff --git a/.gitignore b/.gitignore
index f460b01a1fd0f294539c37a7bbbb8bb4dc06a88e..2185e5bc7bc929e134c1767b1fb699f54fd046e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
cache/
packages
pubspec.lock
+build
\ No newline at end of file
diff --git a/lib/generators/webstarterkit/pubspec.yaml b/lib/generators/webstarterkit/pubspec.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..be18f61e03f117d96efae4f9d07c105ae726147c
--- /dev/null
+++ b/lib/generators/webstarterkit/pubspec.yaml
@@ -0,0 +1,11 @@
+name: foo
+description: An awesome mobile web experience.
+
+dependencies:
+ script_inliner: ">=0.0.2 <0.1.0"
+ browser: any
+ sass: ">=0.3.0 <0.4.0"
+
+transformers:
+- sass
+- script_inliner
diff --git a/lib/generators/webstarterkit/web/apple-touch-icon-precomposed.png b/lib/generators/webstarterkit/web/apple-touch-icon-precomposed.png
new file mode 100644
index 0000000000000000000000000000000000000000..76c482b49d4e2af89734bc267681df56f312ab84
Binary files /dev/null and b/lib/generators/webstarterkit/web/apple-touch-icon-precomposed.png differ
diff --git a/lib/generators/webstarterkit/web/basic.html b/lib/generators/webstarterkit/web/basic.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a0539d5663260312092ae20f71ad0981e5bf9e9
--- /dev/null
+++ b/lib/generators/webstarterkit/web/basic.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title></title>
+
+ <!-- Add to homescreen for Chrome on Android -->
+ <meta name="mobile-web-app-capable" content="yes">
+ <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+
+ <!-- Add to homescreen for Safari on iOS -->
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
+ <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+
+ <!-- Tile icon for Win8 (144x144 + tile color) -->
+ <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+ <meta name="msapplication-TileColor" content="#3372DF">
+
+ <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+ <!--
+ <link rel="canonical" href="http://www.example.com/">
+ -->
+
+ </head>
+ <body>
+ <!-- Add your site or app content here -->
+
+ <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ ga('create', 'UA-XXXXX-X', 'auto');
+ ga('send', 'pageview');
+ </script>
+ <!-- Built with love using Web Starter Kit -->
+ </body>
+</html>
diff --git a/lib/generators/webstarterkit/web/favicon.ico b/lib/generators/webstarterkit/web/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..61325435a0e0b12f6bf1d60e02259971b0ce4a72
Binary files /dev/null and b/lib/generators/webstarterkit/web/favicon.ico differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.eot b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.eot
new file mode 100644
index 0000000000000000000000000000000000000000..01748f7872431292b4ccfca5c969073c1a11fc1a
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.eot differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.ttf b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..48dd63534bae7019b7a4e48ec648e29ce153ccf0
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.ttf differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.woff b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.woff
new file mode 100644
index 0000000000000000000000000000000000000000..fbe14e8a96a1aa6ccf4c2443b663760e53ccb7fa
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Bold.woff differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.eot b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.eot
new file mode 100644
index 0000000000000000000000000000000000000000..e1746ff9a199aca9596f7181875c63841f6204c0
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.eot differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.ttf b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..ad728646a17f2c5f972c7fa4ec887511292f7937
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.ttf differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.woff b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..158ec8d4a27c7091cb0f0a05f3202d4a42828f8c
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-BoldItalic.woff differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.eot b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.eot
new file mode 100644
index 0000000000000000000000000000000000000000..75b9b56be6263ee6fa23abad815ec4b94aab3884
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.eot differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.ttf b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..a232513d592c414ce19e90e7535002fe3900ec11
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.ttf differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.woff b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..4411da9e56d4b0ae5b5c2f2a127925e475e41db6
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Italic.woff differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.eot b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.eot
new file mode 100644
index 0000000000000000000000000000000000000000..4779a6a3f326c8f69afb684f0af1a4a3d1f5c0be
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.eot differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.ttf b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..a6e368d40eacc749999c887f55452f03729f02ad
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.ttf differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.woff b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.woff
new file mode 100644
index 0000000000000000000000000000000000000000..dc6faf63fe8c336ad4687037cf9711b89f35ce7d
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Light.woff differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.eot b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.eot
new file mode 100644
index 0000000000000000000000000000000000000000..9b8bf79ad9dffba82aac70228a39b92207332949
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.eot differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.ttf b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..5b2b6ae087b385571599d8f5a5dac7019faca3e7
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.ttf differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.woff b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..d218654a28bb3d2c905b10ea834bda055d1774c3
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-LightItalic.woff differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.eot b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.eot
new file mode 100644
index 0000000000000000000000000000000000000000..5495d438be73a4a0cec3663351b3076f04c2277b
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.eot differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.ttf b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..65bf32a19f9fe3d42d7f48f3f35c56b62b83513a
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.ttf differ
diff --git a/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.woff b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..8f80878fea03cc0dc049b788067755f730e38194
Binary files /dev/null and b/lib/generators/webstarterkit/web/fonts/RobotoCondensed-Regular.woff differ
diff --git a/lib/generators/webstarterkit/web/humans.txt b/lib/generators/webstarterkit/web/humans.txt
new file mode 100644
index 0000000000000000000000000000000000000000..0481f94095edf5e5346235ed76e153391da0fe5c
--- /dev/null
+++ b/lib/generators/webstarterkit/web/humans.txt
@@ -0,0 +1,14 @@
+# humanstxt.org/
+# The humans responsible & technology colophon
+
+# TEAM
+
+ <name> -- <role> -- <twitter>
+
+# THANKS
+
+ <name>
+
+# TECHNOLOGY COLOPHON
+
+ HTML5, CSS3
diff --git a/lib/generators/webstarterkit/web/images/hamburger.svg b/lib/generators/webstarterkit/web/images/hamburger.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cb62b73ffcef5b687fc090f716e1dc74f7d6bcbd
--- /dev/null
+++ b/lib/generators/webstarterkit/web/images/hamburger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="z" fill="none"/><path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/></svg>
\ No newline at end of file
diff --git a/lib/generators/webstarterkit/web/images/icons/icons-hinted.ttf b/lib/generators/webstarterkit/web/images/icons/icons-hinted.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/lib/generators/webstarterkit/web/images/icons/icons.eot b/lib/generators/webstarterkit/web/images/icons/icons.eot
new file mode 100644
index 0000000000000000000000000000000000000000..ee360b9b27cb30a82a6d9f0fad93008dc237c3cc
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/icons.eot differ
diff --git a/lib/generators/webstarterkit/web/images/icons/icons.svg b/lib/generators/webstarterkit/web/images/icons/icons.svg
new file mode 100644
index 0000000000000000000000000000000000000000..21008a23c5c68e21f9dc147b5196648546864ad8
--- /dev/null
+++ b/lib/generators/webstarterkit/web/images/icons/icons.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><defs><font horiz-adv-x="512"><font-face font-family="icons" font-weight="500" units-per-em="512" panose-1="2 0 6 3 0 0 0 0 0 0" ascent="448" descent="-64" bbox="-0.0208333 -64 512 448" underline-thickness="25" underline-position="-52" unicode-range="U+E001-E018"/><glyph glyph-name=".notdef" horiz-adv-x="187" d="M17 0v341h136V0H17zm17 17h102v307H34V17z"/><glyph glyph-name=".null" horiz-adv-x="0"/><glyph glyph-name="nonmarkingreturn" horiz-adv-x="170"/><glyph glyph-name="uniE001" unicode="î€" d="M0-64v512h512V-64H0z"/><glyph glyph-name="uniE002" unicode="" d="M512 448V294L256 90 0 294v154l256-205z"/><glyph glyph-name="uniE003" unicode="" horiz-adv-x="306" d="M0 448h104l202-257L104-64H0l201 255z"/><glyph glyph-name="uniE004" unicode="" horiz-adv-x="307" d="M159 192L307-64H148L0 192l148 256h159z"/><glyph glyph-name="uniE005" unicode="" horiz-adv-x="307" d="M0 448h159l148-256L159-64H0l148 256z"/><glyph glyph-name="uniE006" unicode="" d="M256 294L0 90v153l256 205 256-205V90z"/><glyph glyph-name="uniE007" unicode="" d="M452 448l60-60L60-64 0-4zm-392 0L512-4l-60-60L0 388z"/><glyph glyph-name="uniE008" unicode="" d="M512 160l-77-32q-4-12-7-18l32-76-45-45-77 31q-12-6-18-8l-32-76h-64l-32 76q-15 5-19 7L98-12 53 33l30 76q-6 12-8 19L0 160v64l75 32q2 7 8 19l-31 75 45 45 76-30q4 2 19 7l32 76h64l32-76q12-4 18-7l76 31 45-45-31-77q6-12 8-18l76-32v-64zM256 80q46 0 78.5 32.5T367 192t-32.5 79.5T256 304t-79-33-33-79 33-79 79-33z"/><glyph glyph-name="uniE009" unicode="" d="M0 192l256 256 256-256L256-64z"/><glyph glyph-name="uniE00A" unicode="" horiz-adv-x="116" d="M116 111H0v337h116V111zm0-175H0v93h116v-93z"/><glyph glyph-name="uniE00B" unicode="" d="M219 6H106L0 192l106 186h113L114 192zm74 372h113l106-186L406 6H293l105 186z"/><glyph glyph-name="uniE00C" unicode="" horiz-adv-x="392" d="M205 80h-57L124-64H54L78 80H0v65h89l15 92H26v65h89l24 146h69l-23-146h56l24 146h70l-24-146h81v-65h-91l-16-92h81V80h-91L251-64h-70zm-46 65h56l16 92h-57z"/><glyph glyph-name="uniE00D" unicode="î€" d="M0-23l116 291L349-23H0zm236 178l160 217L512-23H349zm-96 194q0 58 58 58t58-58-58-58-58 58z"/><glyph glyph-name="uniE00E" unicode="" horiz-adv-x="442" d="M0 448h442V-64H0v512zM419-41v466H23V-41h396zM58 308v47h326v-47H58zm0-104v46h326v-46H58zm0-105v46h279V99H58z"/><glyph glyph-name="uniE00F" unicode="î€" d="M0 372v76h512v-76H0zm0-152v76h512v-76H0zM0 69v76h512V69H0z"/><glyph glyph-name="uniE010" unicode="î€" d="M0 227h512v-70H0v70z"/><glyph glyph-name="uniE011" unicode="" d="M36 156L0 192l123 122 36-36zm87-86L0 192l36 36 123-122zm353 158l36-36L389 70l-36 36zm-87 86l123-122-36-36-123 122zM33 204v-24h411v24H33z"/><glyph glyph-name="uniE012" unicode="" d="M221 37q0 35 35 35t35-35-35-35-35 35zm181 221q-67 76-169 76-89 0-156-62-66-62-71-152H0v6q0 106 75 181t181 75q110 0 185-80zM237 42l26-23 221 246-26 24zm207 147l43 47q25-51 25-110v-2q0-2-.5-5t-.5-7l-53 20q-3 27-14 57z"/><glyph glyph-name="uniE013" unicode="" d="M221 448h70V-64h-70v512zM0 227h512v-70H0v70z"/><glyph glyph-name="uniE014" unicode="" horiz-adv-x="344" d="M100 76q0 48 17 73 18 26 61 56 24 16 37 36t13 49q0 28-16 46-15 17-44 17-22 0-38-14t-16-42H1l-1 2q-1 71 46 108 53 41 122 41 76 0 129-46 47-41 47-112 0-42-26-79-24-34-65-56-22-14-30-33-7-15-7-46H100zM209-64H105v81h104v-81z"/><glyph glyph-name="uniE015" unicode="" horiz-adv-x="372" d="M372 448L172-64H0l201 512h171z"/><glyph glyph-name="uniE016" unicode="" d="M182 162L0 214l36 108 177-75-13 201h119l-15-205 172 73 36-109-183-52L450 3l-95-67-103 168L151-58 55 6z"/><glyph glyph-name="uniE017" unicode="" d="M0 92l50 104L351 51 301-53zm512 294L301-53 196-3l212 439z"/><glyph glyph-name="uniE018" unicode="" d="M314 192q0-24-17-41t-41-17-41 17-17 41 17 41 41 17 41-17 17-41zm-58 128q-53 0-90.5-37.5T128 192t37.5-90.5T256 64t90.5 37.5T384 192t-37.5 90.5T256 320zm0 23q63 0 107-44t44-107-44-107-107-44-107 44-44 107 44 107 107 44zm0 93q-101 0-172.5-71.5T12 192 83.5 19.5 256-52t172.5 71.5T500 192t-71.5 172.5T256 436zm0 12q106 0 181-75t75-181-75-181-181-75T75 11 0 192t75 181 181 75z"/></font></defs></svg>
\ No newline at end of file
diff --git a/lib/generators/webstarterkit/web/images/icons/icons.ttf b/lib/generators/webstarterkit/web/images/icons/icons.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..5c9b6b90b241c9dbd88c08a3d9e9b9e884517210
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/icons.ttf differ
diff --git a/lib/generators/webstarterkit/web/images/icons/icons.woff b/lib/generators/webstarterkit/web/images/icons/icons.woff
new file mode 100644
index 0000000000000000000000000000000000000000..77e1d5da0f60803974f63524e1c761142f2fdd82
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/icons.woff differ
diff --git a/lib/generators/webstarterkit/web/images/icons/icons.woff2 b/lib/generators/webstarterkit/web/images/icons/icons.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..0ed2d705bfd96a85fe91bae7a480d6f052dee4b1
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/icons.woff2 differ
diff --git a/lib/generators/webstarterkit/web/images/icons/placeholder--medium.png b/lib/generators/webstarterkit/web/images/icons/placeholder--medium.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a1840927efa3e2fd610804a86bec488c57910df
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/placeholder--medium.png differ
diff --git a/lib/generators/webstarterkit/web/images/icons/placeholder--small.png b/lib/generators/webstarterkit/web/images/icons/placeholder--small.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c0e308e7faa583d66094c7489c939be70bbb137
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/placeholder--small.png differ
diff --git a/lib/generators/webstarterkit/web/images/icons/placeholder--wide.png b/lib/generators/webstarterkit/web/images/icons/placeholder--wide.png
new file mode 100644
index 0000000000000000000000000000000000000000..95f83b01cf6a3e7816ca7d459217078777650236
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/icons/placeholder--wide.png differ
diff --git a/lib/generators/webstarterkit/web/images/touch/chrome-touch-icon-192x192.png b/lib/generators/webstarterkit/web/images/touch/chrome-touch-icon-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6ba515101d3aed9289c2cfb93374548cb60f07a
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/touch/chrome-touch-icon-192x192.png differ
diff --git a/lib/generators/webstarterkit/web/images/touch/icon-128x128.png b/lib/generators/webstarterkit/web/images/touch/icon-128x128.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5c78429a977cc27326a87f5d76d86280b1805b2
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/touch/icon-128x128.png differ
diff --git a/lib/generators/webstarterkit/web/images/touch/ms-touch-icon-144x144-precomposed.png b/lib/generators/webstarterkit/web/images/touch/ms-touch-icon-144x144-precomposed.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7edfab7e1ecb1c20e2698733506624effe434d9
Binary files /dev/null and b/lib/generators/webstarterkit/web/images/touch/ms-touch-icon-144x144-precomposed.png differ
diff --git a/lib/generators/webstarterkit/web/index.html b/lib/generators/webstarterkit/web/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..46eea767c521a9c05a6a81eb931dc469aa48765b
--- /dev/null
+++ b/lib/generators/webstarterkit/web/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Web Starter Kit</title>
+
+ <!-- Add to homescreen for Chrome on Android -->
+ <meta name="mobile-web-app-capable" content="yes">
+ <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+
+ <!-- Add to homescreen for Safari on iOS -->
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
+ <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
+
+ <!-- Tile icon for Win8 (144x144 + tile color) -->
+ <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+ <meta name="msapplication-TileColor" content="#3372DF">
+
+ <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
+ <!--
+ <link rel="canonical" href="http://www.example.com/">
+ -->
+
+ <!-- Page styles -->
+ <link rel="stylesheet" href="styles/main.css">
+ </head>
+ <body>
+ <header class="app-bar promote-layer">
+ <div class="app-bar-container">
+ <button class="menu"><img src="images/hamburger.svg" alt="Menu"></button>
+ <h1 class="logo">Web <strong>Starter Kit</strong></h1>
+ <section class="app-bar-actions">
+ <!-- Put App Bar Buttons Here -->
+ <!-- e.g <button><i class="icon icon-star"></i></button> -->
+ </section>
+ </div>
+ </header>
+
+ <nav class="navdrawer-container promote-layer">
+ <h4>Navigation</h4>
+ <ul>
+ <li><a href="#hello">Hello</a></li>
+ <li><a href="#get-started">Get Started</a></li>
+ <li><a href="styleguide.html">Style Guide</a></li>
+ </ul>
+ </nav>
+
+ <main>
+ <h1 id="hello">Hello!</h1>
+ <p>Welcome to Web Starter Kit.</p>
+
+ <h2 id="get-started">Get Started.</h2>
+ <p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide.html">Style Guide</a>.</p>
+ </main>
+
+ <script async type="application/dart" src="scripts/main.dart"></script>
+ <script async data-pub-inline src="packages/browser/dart.js"></script>
+
+ <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ ga('create', 'UA-XXXXX-X', 'auto');
+ ga('send', 'pageview');
+ </script>
+ <!-- Built with love using Web Starter Kit -->
+ </body>
+</html>
diff --git a/lib/generators/webstarterkit/web/manifest.webapp b/lib/generators/webstarterkit/web/manifest.webapp
new file mode 100644
index 0000000000000000000000000000000000000000..c55aec4b600ca42b5a36b8e5aad41b333a0c7c0c
--- /dev/null
+++ b/lib/generators/webstarterkit/web/manifest.webapp
@@ -0,0 +1,25 @@
+{
+ "version": "1.0.0",
+ "name": "Web Starter Kit",
+ "launch_path": "/index.html",
+ "description": "A front-end template that helps you build fast, modern mobile web apps.",
+ "icons": {
+ "128": "/images/touch/icon-128x128.png"
+ },
+ "developer": {
+ "name": "",
+ "url": ""
+ },
+ "installs_allowed_from": [
+ "*"
+ ],
+ "default_locale": "en",
+ "permissions": {
+ },
+ "locales": {
+ "en": {
+ "name": "Web Starter Kit",
+ "description": "A front-end template that helps you build fast, modern mobile web apps."
+ }
+ }
+}
\ No newline at end of file
diff --git a/lib/generators/webstarterkit/web/robots.txt b/lib/generators/webstarterkit/web/robots.txt
new file mode 100644
index 0000000000000000000000000000000000000000..d0e5f1be6bb0124953f05108e71171eb531e46f5
--- /dev/null
+++ b/lib/generators/webstarterkit/web/robots.txt
@@ -0,0 +1,5 @@
+# www.robotstxt.org/
+
+# Allow crawling of all content
+User-agent: *
+Disallow:
diff --git a/lib/generators/webstarterkit/web/scripts/main.dart b/lib/generators/webstarterkit/web/scripts/main.dart
new file mode 100644
index 0000000000000000000000000000000000000000..15f3a74a0c96afd38464785a2fd2cbb90bfc3bcc
--- /dev/null
+++ b/lib/generators/webstarterkit/web/scripts/main.dart
@@ -0,0 +1,33 @@
+import 'dart:html';
+
+initWsk() {
+ var navdrawerContainer = querySelector('.navdrawer-container');
+ var appbarElement = querySelector('.app-bar');
+ var menuBtn = querySelector('.menu');
+ var main = querySelector('main');
+
+ closeMenu() {
+ document.body.classes.remove('open');
+ appbarElement.classes.remove('open');
+ navdrawerContainer.classes.remove('open');
+ }
+
+ toggleMenu() {
+ document.body.classes.toggle('open');
+ appbarElement.classes.toggle('open');
+ navdrawerContainer.classes.toggle('open');
+ navdrawerContainer.classes.add('opened');
+ }
+
+ main.onClick.listen((_) => closeMenu());
+ menuBtn.onClick.listen((_) => toggleMenu());
+ navdrawerContainer.onClick.listen((event) {
+ if (event.target.nodeName == 'A' || event.target.nodeName == 'LI') {
+ closeMenu();
+ }
+ });
+}
+
+main() {
+ initWsk();
+}
\ No newline at end of file
diff --git a/lib/generators/webstarterkit/web/styleguide.html b/lib/generators/webstarterkit/web/styleguide.html
new file mode 100644
index 0000000000000000000000000000000000000000..185aa5291204dc9b91906236552a224c59c90fc1
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styleguide.html
@@ -0,0 +1,1263 @@
+<!doctype html>
+<html lang="en" class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
+ <head>
+ <meta charset="utf-8" >
+ <meta name="description" content="Visual style guide used by this site.">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
+ <meta itemprop="name" content="Visual Style Guide — Web Starter Kit">
+ <meta itemprop="description" content="Visual style guide used by this site.">
+
+ <link rel="stylesheet" href="styles/components/components.css">
+
+ <title>Visual Style Guide — Web Starter Kit</title>
+ <style>
+ .auto-gen-code-snippet {
+ display: none;
+ }
+ .auto-gen-code-visible {
+ display: block;
+ }
+ </style>
+ </head>
+ <body class="page--styleguide">
+
+ <div class="container">
+ <h1>Web <strong>Starter Kit</strong></h1>
+ </div>
+
+ <div class="summary-header">
+ <div class="container">
+ <h2 class="summary-header__title">Visual Style Guide</h2>
+ <ol class="summary-header__anchor-list list-links">
+ <li class="summary-header__anchors-item"><a href="#typography">Typography</a></li>
+ <li class="summary-header__anchors-item"><a href="#buttons">Buttons</a></li>
+ <li class="summary-header__anchors-item"><a href="#lists">Lists</a></li>
+ <li class="summary-header__anchors-item"><a href="#links">Links</a></li>
+ <li class="summary-header__anchors-item"><a href="#icons">Icons</a></li>
+ <li class="summary-header__anchors-item"><a href="#breadcrumbs">Breadcrumbs</a></li>
+ <li class="summary-header__anchors-item"><a href="#table">Table</a></li>
+ <li class="summary-header__anchors-item"><a href="#grid">Grid</a></li>
+ <li class="summary-header__anchors-item"><a href="#colors">Colors</a></li>
+ <li class="summary-header__anchors-item"><a href="#highlights">Highlights</a></li>
+ <li class="summary-header__anchors-item"><a href="#editorial-header">Editorial header</a></li>
+ <li class="summary-header__anchors-item"><a href="#article-section">Article section</a></li>
+ <li class="summary-header__anchors-item"><a href="#guides-section">Guides section</a></li>
+ <li class="summary-header__anchors-item"><a href="#page-header">Page header</a></li>
+ <li class="summary-header__anchors-item"><a href="#quote">Quote</a></li>
+ <li class="summary-header__anchors-item"><a href="#guides-intro">Featured icons</a></li>
+ <li class="summary-header__anchors-item"><a href="#featured-spotlight">Featured spotlight</a></li>
+ <li class="summary-header__anchors-item"><a href="#featured-list">Featured list</a></li>
+ <li class="summary-header__anchors-item"><a href="#next-lessons">Featured block</a></li>
+ <li class="summary-header__anchors-item"><a href="#article-navigation">Article navigation</a></li>
+ </ol>
+ </div>
+ </div>
+
+ <div class="container">
+ <button id="snippet-toggle" class="button--primary">Toggle Code Snippets</button>
+ </div>
+
+ <div class="container">
+ <!-- Typography Start -->
+ <a name="typography"></a>
+ <section class="styleguide__typography">
+ <h2 class="subsection-title"><strong class="subsection-number">#01</strong> Typography</h2>
+ <div class="code-sample">
+ <p class="small">Lorem ipsum dolor sit amet.</p>
+ </div>
+
+ <div class="code-sample">
+ <p class="base">Lorem ipsum dolor sit amet.</p>
+ </div>
+
+ <div class="code-sample">
+ <p class="medium">Lorem ipsum dolor sit amet.</p>
+ </div>
+
+ <div class="code-sample">
+ <p class="large">Lorem ipsum dolor sit amet.</p>
+ </div>
+
+ <div class="code-sample">
+ <p class="xlarge">Lorem ipsum dolor sit amet.</p>
+ </div>
+
+ <div class="code-sample">
+ <p class="xxlarge">Lorem ipsum dolor sit amet.</p>
+ </div>
+
+ <div class="code-sample">
+ <p class="huge">Lorem ipsum dolor sit amet.</p>
+ </div>
+ </section>
+ <!-- Typography End-->
+
+ <!-- Buttons Start -->
+ <a name="buttons"></a>
+ <section class="styleguide__buttons">
+ <h2 class="subsection-title"><strong class="subsection-number">#02</strong> Buttons</h2>
+
+ <div>
+ <h4>Primary</h4>
+ <div class="code-sample">
+ <a href="#ignore-click" class="button--primary">Use our tool</a>
+ </div>
+ </div>
+
+ <div>
+ <h4>Secondary</h4>
+ <div>
+ <div class="code-sample">
+ <a href="#ignore-click" class="button--secondary">Use our tool</a>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <div class="styleguide__inverted-block">
+ <a href="#ignore-click" class="button--secondary-variation">Use our tool</a>
+ </div>
+ </div>
+ </div>
+ </section>
+ <!-- Buttons End -->
+
+ <!-- Lists Start -->
+ <a name="lists"></a>
+ <section class="styleguide__lists">
+ <h2 class="subsection-title"><strong class="subsection-number">#03</strong> Lists</h2>
+
+ <h3>Default lists</h3>
+
+ <h4>ul</h4>
+ <div class="code-sample">
+ <ul>
+ <li>Lorem ipsum dolor sit amet.</li>
+ <li>Dicta optio cumque dolore hic ea facilis</li>
+ <li>Minus, possimus, veniam, incidunt eligendi</li>
+ </ul>
+ </div>
+
+ <h4>ol</h4>
+ <div class="code-sample">
+ <ol>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Dicta optio cumque dolore hic ea facilis</li>
+ <li>Minus, possimus, veniam, incidunt eligendi</li>
+ </ol>
+ </div>
+
+ <h3>Default lists of links</h3>
+
+ <h4>ul</h4>
+ <div class="code-sample">
+ <ul class="list-links">
+ <li class="list__item"><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li class="list__item"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li class="list__item"><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ </ul>
+ </div>
+
+ <div class="code-sample">
+ <ul class="list-links list-links--primary">
+ <li class="list__item"><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li class="list__item"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li class="list__item"><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ </ul>
+ </div>
+
+ <h4>ol</h4>
+ <div class="code-sample">
+ <ol class="list-links">
+ <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li class="current"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ </ol>
+ </div>
+
+ <div class="code-sample">
+ <ol class="list-anchor">
+ <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ </ol>
+ </div>
+
+ <div class="code-sample">
+ <ol class="list-anchor list-small">
+ <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ </ol>
+ </div>
+
+ <div class="code-sample">
+ <ol class="list-links list-links--secondary">
+ <li><a href="#ignore-click">Layout basics</a></li>
+ <li><a href="#ignore-click">Basics layouts</a></li>
+ <li><a href="#ignore-click">Layout patterns</a></li>
+ </ol>
+ </div>
+
+ <div class="code-sample">
+ <ol class="list-links list-links--secondary list-small">
+ <li><a href="#ignore-click">Layout basics</a></li>
+ <li><a href="#ignore-click">Basics layouts</a></li>
+ <li><a href="#ignore-click">Layout patterns</a></li>
+ </ol>
+ </div>
+ </section>
+ <!-- Lists End -->
+
+ <!-- Links Start -->
+ <a name="links"></a>
+ <section class="styleguide__links">
+ <h2 class="subsection-title"><strong class="subsection-number">#04</strong> Links</h2>
+
+ <div>
+ <h4>Primary</h4>
+ <div class="code-sample">
+ <a href="#ignore-click" class="cta--primary">Use our tool</a>
+ </div>
+ </div>
+
+ <div>
+ <h4>Secondary</h4>
+ <div class="code-sample">
+ <a href="#ignore-click" class="cta--secondary">Use our tool</a>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#ignore-click" class="cta">use our tool</a> Fugiat, quam alias voluptatem tempora minus dolor facere cumque necessitatibus placeat velit aliquid ab dolore beatae. Neque ipsam in a illum repellendus?</p>
+ </div>
+ </section>
+ <!-- Links End -->
+
+ <!-- Icons Start -->
+ <a name="icons"></a>
+ <section class="styleguide__icons">
+ <h2 class="styleguide__icons"><strong class="subsection-number">#05</strong> Icons</h2>
+
+ <div class="clear">
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-minus"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-plus"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-star"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-chevron-right"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-chevron-left"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-chevron-up"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-chevron-down"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-slash"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-google-dev"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-lessons"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-multi-device-layouts"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-user-input"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-introduction-to-media"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-performance"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-bullet"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-chevron-large"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-close"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-cog"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-diamond"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-exclamation"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-hash"></i></div></p>
+ </div>
+
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-menu"></i></div></p>
+ </div>
+ <div class="g--third">
+ <p><div class="code-sample"><i class="icon icon-question"></i></div></p>
+ </div>
+ <div class="g--third g--last">
+ <p><div class="code-sample"><i class="icon icon-tick"></i></div></p>
+ </div>
+ </div>
+
+ <h4>Icon Circles</h4>
+
+ <div class="clear">
+
+ <div class="g--half">
+ <p>
+ <div class="code-sample">
+ <span class="icon-circle"><i class="icon icon-lessons"></i></span>
+ </div>
+ </p>
+ </div>
+ <div class="g--half g--last">
+ <p>
+ <div class="code-sample">
+ <span class="icon-circle"><i class="icon icon-lessons"></i></span>
+ </div>
+ </p>
+ </div>
+
+ </div>
+
+ <h4>Icon Circles - Themed</h4>
+
+ <div class="clear">
+
+ <div class="g--half">
+ <div class="code-sample">
+ <p class="theme--multi-device-layouts">
+ <span class="icon-circle themed--background"><i class="icon icon-multi-device-layouts"></i></span>
+ </p>
+ </div>
+ </div>
+ <div class="g--half g--last">
+ <div class="code-sample">
+ <p class="theme--user-input">
+ <span class="icon-circle themed--background"><i class="icon icon-user-input"></i></span>
+ </p>
+ </div>
+ </div>
+
+ <div class="g--half">
+ <div class="code-sample">
+ <p class="theme--introduction-to-media">
+ <span class="icon-circle themed--background"><i class="icon icon-introduction-to-media"></i></span>
+ </p>
+ </div>
+ </div>
+ <div class="g--half g--last">
+ <div class="code-sample">
+ <p class="theme--performance">
+ <span class="icon-circle themed--background"><i class="icon icon-performance"></i></span>
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <h4>Icon Circles - Large</h4>
+
+ <div class="clear">
+
+ <div class="g--half">
+ <div class="code-sample">
+ <p class="theme--multi-device-layouts">
+ <span class="icon-circle--large themed--background"><i class="icon icon-multi-device-layouts"></i></span>
+ </p>
+ </div>
+ </div>
+ <div class="g--half g--last">
+ <div class="code-sample">
+ <p class="theme--user-input">
+ <span class="icon-circle--large themed--background"><i class="icon icon-user-input"></i></span>
+ </p>
+ </div>
+ </div>
+
+ <div class="g--half">
+ <div class="code-sample">
+ <p class="theme--introduction-to-media">
+ <span class="icon-circle--large themed--background"><i class="icon icon-introduction-to-media"></i></span>
+ </p>
+ </div>
+ </div>
+ <div class="g--half g--last">
+ <div class="code-sample">
+ <p class="theme--performance">
+ <span class="icon-circle--large themed--background"><i class="icon icon-performance"></i></span>
+ </p>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
+ <!-- Icons End -->
+
+ <!-- Breadcrumbs Start -->
+ <a name="breadcrumbs"></a>
+ <section class="styleguide__breadcrumb">
+ <h2 class="subsection-title"><strong class="subsection-number">#06</strong> Breadcrumbs</h2>
+
+ <div class="code-sample">
+ <nav class="breadcrumbs">
+ <p><a href="#ignore-click" class="breadcrumbs__link">Link 1</a> / <a href="#ignore-click" class="breadcrumbs__link">Link 2</a> / <a href="#ignore-click" class="breadcrumbs__link">Link 3</a> / <a href="#ignore-click" class="breadcrumbs__link">Link 4</a> </p>
+ </nav>
+ </div>
+
+ </section>
+ <!-- Breadcrumbs End -->
+
+ <!-- Tables Start -->
+ <a name="table"></a>
+ <section class="styleguide__table">
+ <h2 class="subsection-title"><strong class="subsection-number">#07</strong> Table</h2>
+
+ <div class="code-sample">
+ <table class="table-4">
+ <colgroup>
+ <col span="1">
+ <col span="1">
+ <col span="1">
+ <col span="1">
+ </colgroup>
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Availability</th>
+ <th>Description</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td data-th="element"><code>src</code></td>
+ <td data-th="availability">All browsers</td>
+ <td data-th="description">Gives the address (URL) of the video.</td>
+ <td data-th="description">Gives the address (URL) of the video.</td>
+ </tr>
+ <tr>
+ <td data-th="element"><code>poster</code></td>
+ <td data-th="availability">All browsers</td>
+ <td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
+ <td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="code-sample">
+ <table class="table-3">
+ <colgroup>
+ <col span="1">
+ <col span="1">
+ <col span="1">
+ </colgroup>
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Availability</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td data-th="element"><code>src</code></td>
+ <td data-th="availability">All browsers</td>
+ <td data-th="description">Gives the address (URL) of the video.</td>
+ </tr>
+ <tr>
+ <td data-th="element"><code>poster</code></td>
+ <td data-th="availability">All browsers</td>
+ <td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="code-sample">
+ <table class="table-2">
+ <colgroup>
+ <col span="1">
+ <col span="1">
+ </colgroup>
+ <thead>
+ <tr>
+ <th>Element</th>
+ <th>Availability</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td data-th="element"><code>src</code></td>
+ <td data-th="availability">Rules applied for any browser width over the value defined in the query.</td>
+ </tr>
+ <tr>
+ <td data-th="element"><code>poster</code></td>
+ <td data-th="availability">Rules applied for any browser width over the value defined in the query.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <p>
+ <b>Note:</b> <code>markdown</code> isn't recognized in tables, therefore any code
+ blocks should be wrapped in <code> tags.
+ </p>
+
+ </section>
+ <!-- Tables End -->
+
+ <!-- Grid Start -->
+ <a name="grid"></a>
+ <section class="styleguide__grid">
+ <h2 class="subsection-title"><strong class="subsection-number">#08</strong> Grid</h2>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--half g-wide--1"></div>
+ <div class="g-medium--half g-medium--last g-wide--1"></div>
+ <div class="g-medium--half g-wide--1"></div>
+ <div class="g-medium--half g-medium--last g-wide--1 g-wide--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-wide--1 g-medium--half"></div>
+ <div class="g-wide--3 g-wide--last g-medium--half g--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-wide--3 g-medium--half"></div>
+ <div class="g-wide--1 g-wide--last g-medium--half g--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--full g-wide--full"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--2 g-medium--last g-wide--3"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--1 g-medium--last g-wide--2"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--1 g-medium--last g-wide--1"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--1 g-medium--push-2 g-medium--last g-wide--1 g-wide--push-3 g-wide--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--1 g-medium--push-2 g-medium--last g-wide--2 g-wide--push-2 g-wide--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g-medium--2 g-medium--push-1 g-medium--last g-wide--3 g-wide--push-1 g-wide--last"></div>
+ </div>
+ </div>
+
+ <h4>Consistent grid classes</h4>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g--third"></div>
+ <div class="g--third"></div>
+ <div class="g--third g--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g--half"></div>
+ <div class="g--half g--last"></div>
+ </div>
+ </div>
+
+ <div class="clear demo">
+ <div class="code-sample">
+ <div class="g--half g--centered"></div>
+ <div class="g--third g--centered"></div>
+ </div>
+ </div>
+
+ </section>
+ <!-- Grid End -->
+
+ <!-- Colors Start -->
+ <a name="colors"></a>
+ <section class="styleguide__colors">
+ <h2 class="subsection-title"><strong class="subsection-number">#09</strong> Colours</h2>
+
+ <h3>Blacks</h3>
+ <div class="code-sample">
+ <ul class="styleguide__color-list list--reset clear">
+ <li class="color--gray-background g--half">gray-background</li>
+ <li class="color--gray-keyline g--half g--last">gray-keyline</li>
+ <li class="color--gray g--half">gray</li>
+ <li class="color--gray-dark g--half g--last">gray-dark</li>
+ </ul>
+ </div>
+
+ <h3>Themes</h3>
+ <div class="code-sample">
+ <ul class="styleguide__color-list list--reset clear">
+ <li class="color--layouts g--half">layouts</li>
+ <li class="color--layouts-secondary g--half g--last">layouts secondary</li>
+ <li class="color--user g--half">user</li>
+ <li class="color--user-secondary g--half g--last">user secondary</li>
+ <li class="color--media g--half">media</li>
+ <li class="color--media-secondary g--half g--last">media secondary</li>
+ <li class="color--performance g--half">performance</li>
+ <li class="color--performance-secondary g--half g--last">performance secondary</li>
+ </ul>
+ </div>
+
+ <h3>Google</h3>
+ <div class="code-sample">
+ <ul class="styleguide__color-list list--reset clear">
+ <li class="color--blue g--half">blue</li>
+ <li class="color--blue-secondary g--half g--last">blue secondary</li>
+ <li class="color--green g--half">green</li>
+ <li class="color--green-secondary g--half g--last">green secondary</li>
+ <li class="color--red g--half">red</li>
+ <li class="color--red-secondary g--half g--last">red secondary</li>
+ <li class="color--yellow g--half">yellow</li>
+ <li class="color--yellow-secondary g--half g--last">yellow secondary</li>
+ </ul>
+ </div>
+
+ <h3>Helpers</h3>
+ <div class="code-sample">
+ <ul class="styleguide__color-list list--reset clear">
+ <li class="color--text g--half">text</li>
+ <li class="color--highlight g--half g--last">highlight</li>
+ <li class="color--warning g--half">warning</li>
+ <li class="color--danger g--half g--last">danger</li>
+ <li class="color--muted g--half">muted</li>
+ <li class="color--remember g--half g--last">remember</li>
+ <li class="color--learning g--half">learning</li>
+ </ul>
+ </div>
+ </section>
+ <!-- Colors End -->
+ </div> <!-- // closing container -->
+
+ <!-- Highlights Start -->
+ <div class="container">
+ <a name="highlights"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#10</strong> Highlights</h2>
+ </div>
+
+ <section class="styleguide__highlights">
+
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--right highlight-module--remember">
+ <div class="highlight-module__container icon-exclamation ">
+ <div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--pull-1 ">
+ <p class="highlight-module__title"> Remember</p>
+ <p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--left highlight-module--learning ">
+ <div class="highlight-module__container icon-star ">
+ <div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--push-1 ">
+ <p class="highlight-module__title"> Key Takeaways</p>
+ <p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--right highlight-module--remember ">
+ <div class="highlight-module__container icon-exclamation ">
+ <div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--pull-1 ">
+ <p class="highlight-module__title"> Remember</p>
+ <ul class="highlight-module__list">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Fugit itaque sapiente earum quo expedita</li>
+ <li>labore aliquam cupiditate veritatis nihil</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--left highlight-module--remember ">
+ <div class="highlight-module__container icon-exclamation ">
+ <div class="highlight-module__content g-wide--push-1 g-wide--pull-1 g-medium--push-1 ">
+ <p class="highlight-module__title"> Remember</p>
+ <p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </section>
+
+ <div class="container">
+ <h3>Code Samples</h3>
+ </div>
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--code highlight-module--right">
+ <div class="highlight-module__container">
+ <code class='html'><div class="highlight"><pre> <span class="cp"><!DOCTYPE html></span>
+ <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
+ <span class="nt"><head></span>
+ <span class="nt"><title></span>Article Example: sample example<span class="nt"></title></span>
+ <span class="nt"></head></span>
+ <span class="nt"><body></span>
+ <span class="nt"><div</span> <span class="na">role=</span><span class="s">"main"</span><span class="nt">></span>
+ Hello, world.
+ <span class="nt"></div></span>
+ <span class="nt"></body></span>
+ <span class="nt"></html></span>
+ </pre></div></code>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="code-sample">
+ <pre><code class='html'><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></pre>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--left highlight-module--learning highlight-module--inline ">
+ <div class="highlight-module__container icon-star ">
+ <div class="highlight-module__content g-wide--pull-1 ">
+ <p class="highlight-module__title"> Key Takeaways</p>
+
+ <ul class="highlight-module__list">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Fugit itaque sapiente earum quo expedita</li>
+ <li>labore aliquam cupiditate veritatis nihil</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="code-sample">
+ <div class="highlight-module highlight-module--right highlight-module--remember highlight-module--inline ">
+ <div class="highlight-module__container icon-exclamation ">
+ <div class="highlight-module__content g-wide--pull-1 ">
+ <p class="highlight-module__title"> Remember</p>
+
+ <ul class="highlight-module__list">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Fugit itaque sapiente earum quo expedita</li>
+ <li>labore aliquam cupiditate veritatis nihil</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Highlights End -->
+
+ <!-- Editorial Header Start-->
+ <div class="container">
+ <a name="editorial-header"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#11</strong> Editorial header</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__editorial-header">
+
+ <div class="editorial-header">
+ <div class="container">
+ <nav class="breadcrumbs">
+ <p> / <a href="#ignore-click" class="breadcrumbs__link">The Essentials</a> / <a href="#ignore-click" class="breadcrumbs__link"> Multi-screen layouts</a></p>
+ </nav>
+
+ <h1 class="tag editorial-header__title">Layout Basics</h1>
+ <h2 class="editorial-header__subtitle">What is the viewport?</h2>
+ <p class="editorial-header__excerpt g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Sed vitae varius augue, eu varius dolor. </p>
+ <p class="g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Donec augue diam, scelerisque eget lectus in, posuere aliquet mi. Pellentesque suscipit nisl gravida sem tincidunt, id blandit turpis commodo.</p>
+
+ <div class="toc">
+ <p class="toc__title">In this lesson</p>
+ <ol class="toc__list list-anchor" id="toc">
+ <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li class="current"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
+ <li><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
+ <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
+ </ol>
+ </div>
+
+ </div>
+ </div>
+
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="article-section"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#12</strong> Article section</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__articles-section">
+ <div class="articles-section">
+ <div class="container">
+ <p class="articles-count">4 guides</p>
+ <ol class="articles-list">
+ <li class="articles-list__item">
+ <h3 class="xlarge"><a href="#ignore-click">Layout basics</a></h3>
+ <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
+ <a href="#ignore-click" class="cta--primary">See all lessons</a>
+ </li>
+ <li class="articles-list__item">
+ <h3 class="xlarge"><a href="#ignore-click">Basic layouts</a></h3>
+ <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
+ <a href="#ignore-click" class="cta--primary">See all lessons</a>
+ </li>
+ <li class="articles-list__item">
+ <h3 class="xlarge"><a href="#ignore-click">Layout patterns</a></h3>
+ <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
+ <a href="#ignore-click" class="cta--primary">See all lessons</a>
+ </li>
+ <li class="articles-list__item">
+ <h3 class="xlarge"><a href="#ignore-click">UI Elements</a></h3>
+ <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
+ <a href="#ignore-click" class="cta--primary">See all lessons</a>
+ </li>
+ </ol>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="guides-section"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#13</strong> Guides section</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__guides-section">
+ <div class="guides-section">
+ <header class="container">
+ <h2 class="xxlarge">Documentation</h2>
+ <p>Follow these guides and build web content users can access on any device they choose.</p>
+ </header>
+ <ul class="guides-list container-medium">
+ <li class="guides-list__item g--half theme--multi-device-layouts ">
+ <div class="primary-content">
+ <h3 class="xlarge"><a href="#ignore-click" title="Go to Multi-Device Layouts" class="themed">Multi-Device Layouts</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, velit, illum iure id in saepe laborum. Doloribus, eaque, assumenda inventore eos iusto tenetur error dolorem suscipit molestiae natus ullam aliquam?</p>
+ </div>
+ <div class="secondary-content">
+ <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
+ <ol class="list-links list-links--secondary">
+ <li><a href="#ignore-click" title="Read the lesson Responsive Web Design Fundamentals">Responsive Web Design Fundamentals</a></li>
+ <li><a href="#ignore-click" title="Read the lesson Responsive Web Design Patterns">Responsive Web Design Patterns</a></li>
+ <li><a href="#ignore-click" title="Read the lesson Navigation and Action Patterns">Navigation and Action Patterns</a></li>
+ </ol>
+ </div>
+ </li>
+ <li class="guides-list__item g--half theme--introduction-to-media g--last">
+ <div class="primary-content">
+ <h3 class="xlarge"><a href="#ignore-click" title="Go to Images, Audio and Video" class="themed">Images, Audio and Video</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, fugit ea maiores omnis ad iste autem sed reiciendis amet quam deleniti sapiente laboriosam voluptate pariatur veniam quod beatae sunt architecto?</p>
+ </div>
+ <div class="secondary-content">
+ <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
+ <ol class="list-links list-links--secondary">
+ <li><a href="#ignore-click" title="Read the lesson Images">Images</a></li>
+ <li><a href="#ignore-click" title="Read the lesson Video">Video</a></li>
+ <li><a href="#ignore-click" title="Read the lesson Audio">Audio</a></li>
+ </ol>
+ </div>
+ </li>
+ <li class="guides-list__item g--half theme--user-input ">
+ <div class="primary-content">
+ <h3 class="xlarge"><a href="#ignore-click" title="Go to Forms and User Input" class="themed">Forms and User Input</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, adipisci, aspernatur. Velit, consequatur, temporibus, neque minus obcaecati dolor officia architecto voluptatem et pariatur quo vitae saepe laborum ratione eum. Soluta.</p>
+ </div>
+ <div class="secondary-content">
+ <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
+ <ol class="list-links list-links--secondary">
+ <li><a href="#ignore-click" title="Read the lesson Create Amazing Forms">Create Amazing Forms</a></li>
+ <li><a href="#ignore-click" title="Read the lesson Add Touch to Your Site">Add Touch to Your Site</a></li>
+ </ol>
+ </div>
+ </li>
+ <li class="guides-list__item g--half theme--performance g--last">
+ <div class="primary-content">
+ <h3 class="xlarge"><a href="#ignore-click" title="Go to Optimizing Performance" class="themed">Optimizing Performance</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ratione officia officiis natus illum quos cumque quis! Optio, dolore, eligendi ea culpa quod esse atque architecto reprehenderit at tempora itaque!</p>
+ </div>
+ <div class="secondary-content">
+ <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
+ <ol class="list-links list-links--secondary">
+ <li><a href="#ignore-click" title="Read the lesson Critical Rendering Path">Critical Rendering Path</a></li>
+ <li><a href="#ignore-click" title="Read the lesson Optimizing Content Efficiency">Optimizing Content Efficiency</a></li>
+ </ol>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="page-header"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#14</strong> Page header</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__page-header">
+ <div class="page-header">
+ <div class="container">
+ <nav class="breadcrumbs">
+ <p> / <a href="#ignore-click" class="breadcrumbs__link"> The Essentials</a></p>
+ </nav>
+ <h3 class="xxlarge text-divider">Multi-screen layouts</h3>
+ <p class="page-header__excerpt g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, optio, ad, voluptates repudiandae at excepturi error delectus explicabo nulla eum provident quibusdam ipsum sapiente culpa sequi quia unde fuga id.</p>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="quote"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#15</strong> Quote</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__quote">
+ <div class="quote">
+ <div class="container">
+ <blockquote class="quote__content g-wide--push-1 g-wide--pull-1 g-medium--push-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, illum, at quis vero nam minus incidunt consequatur reprehenderit aliquid blanditiis fugiat nihil dolor tempora distinctio ipsum quisquam debitis excepturi magni.
+ <p>Name / Details</p>
+ </blockquote>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="guides-intro"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#16</strong> Featured icons</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__centered-list">
+ <div class="container">
+ <ul class="list-guides-intro list-centered list--reset clear">
+ <li class="g-medium--half g-wide--1 theme--multi-device-layouts ">
+ <a href="#ignore-click" class="themed">
+ <span class="icon-circle--large themed--background"><i class="icon icon-multi-device-layouts"></i></span>
+ <h3 class="large text-divider">Multi-Device Layouts</h3>
+ </a>
+ <p>Create flexible, not fixed, layouts.</p>
+ </li>
+ <li class="g-medium--half g-wide--1 theme--introduction-to-media g-medium--last ">
+ <a href="#ignore-click" class="themed">
+ <span class="icon-circle--large themed--background"><i class="icon icon-introduction-to-media"></i></span>
+ <h3 class="large text-divider">Images, Audio and Video</h3>
+ </a>
+ <p>Only use media that loads fast and scales.</p>
+ </li>
+ <li class="g-medium--half g-wide--1 theme--user-input ">
+ <a href="#ignore-click" class="themed">
+ <span class="icon-circle--large themed--background"><i class="icon icon-user-input"></i></span>
+ <h3 class="large text-divider">Forms and User Input</h3>
+ </a>
+ <p>Touch, tap, click, and submit.</p>
+ </li>
+ <li class="g-medium--half g-wide--1 theme--performance g-medium--last g-wide--last ">
+ <a href="#ignore-click" class="themed">
+ <span class="icon-circle--large themed--background"><i class="icon icon-performance"></i></span>
+ <h3 class="large text-divider">Optimizing Performance</h3>
+ </a>
+ <p>Performance is a feature.</p>
+ </li>
+ </ul>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="featured-spotlight"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#17</strong> Featured spotlight</h2>
+ </div>
+
+ <a name="feature-spotlight"></a>
+ <div class="code-sample">
+ <section class="styleguide__feature-spotlight">
+ <div class="featured-spotlight">
+ <div class="container-medium">
+ <div class="featured-spotlight__container g--pull-half">
+ <div class="featured-spotlight__img">
+ <img src="images/icons/placeholder--wide.png" alt="wide image placeholder example">
+ </div>
+
+ <div class="container-small">
+ <h3 class="xxlarge">Featured spotlight</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed vitae varius augue, eu varius dolor.</p>
+ <a href="#ignore-click" class="cta--primary">View Google</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="featured-list"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#18</strong> Featured list</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__featured-section">
+ <div class="featured-section">
+ <div class="container-medium">
+ <ul class="featured-list">
+ <li class="featured-list__item clear">
+ <div class="container-small">
+ <div class="featured-list__content g--half">
+ <h3>Case study</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.</p>
+ <a href="#ignore-click" class="cta--primary">View Google</a>
+ </div>
+ <div class="featured-list__img-wrapper g--half g--last">
+ <div class="featured-list__img">
+ <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
+ </div>
+ </div>
+ </div>
+ </li>
+ <li class="featured-list__item clear">
+ <div class="container-small">
+ <div class="featured-list__content g--half">
+ <h3>Case study</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.</p>
+ <a href="#ignore-click" class="cta--primary">View Google</a>
+ </div>
+ <div class="featured-list__img-wrapper g--half g--last">
+ <div class="featured-list__img">
+ <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="next-lessons"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#19</strong> Featured block</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__next-lessons">
+ <div class="next-lessons container-medium" data-current-lesson="03">
+ <h3><i class="icon icon-lessons"></i> Next Lessons</h3>
+ <ol class="list-lessons list-links">
+ <li><a href="#ignore-click">Lesson title one</a></li>
+ <li class="current"><a href="#ignore-click">Lesson title two <i class="icon icon-tick"></i></a></li>
+ <li><a href="#ignore-click">Lesson title three</a></li>
+ <li><a href="#ignore-click">Lesson title four</a></li>
+ <li><a href="#ignore-click">Lesson title five</a></li>
+ </ol>
+ </div>
+ </section>
+ </div>
+
+ <div class="container">
+ <a name="article-navigation"></a>
+ <h2 class="subsection-title"><strong class="subsection-number">#20</strong> Article navigation</h2>
+ </div>
+
+ <div class="code-sample">
+ <section class="styleguide__article-nav">
+ <div class="container-medium">
+ <nav class="article-nav">
+ <a href="#ignore-click" class="article-nav-link article-nav-link--prev">
+ <p class="article-nav-count">02</p>
+ <p>A need for responsive pages</p>
+ </a>
+ <a href="#ignore-click" class="article-nav-link article-nav-link--next">
+ <p class="article-nav-count">04</p>
+ <p>Create images for multiple resolutions</p>
+ </a>
+ </nav>
+ </div>
+ </section>
+ </div>
+
+ <footer id="gc-footer">
+ <div class="container">
+ <p><a href="#">Back to top</a></p>
+ </div>
+ </footer>
+
+ <script>
+ (function () {
+ 'use strict';
+
+ var snippetToggle = document.querySelector('#snippet-toggle');
+ var snippets;
+
+ snippetToggle.addEventListener('click', function () {
+ if (snippets) {
+ for (var i = 0; i < snippets.length; i++) {
+ snippets[i].classList.toggle('auto-gen-code-visible');
+ }
+ }
+ });
+
+ window.onload = function () {
+ createCodeSamples();
+ snippets = document.querySelectorAll('.auto-gen-code-snippet');
+ };
+
+ function createCodeSamples() {
+ var codeWrappers = document.querySelectorAll('.code-sample');
+
+ for (var i = 0; i < codeWrappers.length; i++) {
+ var codeWrapper = codeWrappers[i];
+ var clonedNodes = getClonedNonTextNodes(codeWrapper);
+
+ beautifyNodes(clonedNodes);
+
+ var preElement = document.createElement('pre');
+ var codeElement = document.createElement('code');
+
+ for (var j = 0; j < clonedNodes.length; j++) {
+ codeElement.appendChild(document.createTextNode(clonedNodes[j].outerHTML));
+
+ if (j + 1 < clonedNodes.length) {
+ codeElement.appendChild(document.createTextNode('\n'));
+ }
+ }
+
+ preElement.appendChild(codeElement);
+ preElement.classList.add('auto-gen-code-snippet');
+ preElement.classList.add('container');
+
+ var clearDiv = document.createElement('div');
+ clearDiv.classList.add('clear');
+
+ var parent = codeWrapper.parentNode;
+
+ if (codeWrapper.nextSibling) {
+ parent.insertBefore(preElement, codeWrapper.nextSibling);
+ } else {
+ parent.appendChild(preElement);
+ }
+
+ parent.insertBefore(clearDiv, preElement);
+ }
+ }
+
+ function getClonedNonTextNodes(element) {
+ var nonTextNodes = [];
+ var childNodes = element.childNodes;
+
+ for (var i = 0; i < childNodes.length; i++) {
+ var childElement = childNodes[i];
+
+ if (childElement.nodeType !== 3) {
+ // Found a valid child element
+ nonTextNodes.push(childElement.cloneNode(true));
+ }
+ }
+
+ return nonTextNodes;
+ }
+
+ function beautifyNodes(elements) {
+ for (var i = 0; i < elements.length; i++) {
+ beautifyNode(elements[i], 0);
+ }
+ }
+
+ function beautifyNode(element, depth) {
+ var childNodes = element.childNodes;
+ var singleIndent = ' ';
+ var currentDepthSpacing = '';
+
+ for (var i = 0; i < depth; i++) {
+ currentDepthSpacing += singleIndent;
+ }
+
+ var nextDepthSpacing = currentDepthSpacing + singleIndent;
+
+ for (var j = 0; j < childNodes.length; j++) {
+ var childElement = childNodes[j];
+
+ if (childElement.nodeType === 3) {
+ // found a text node
+ if (childElement.nodeValue.indexOf('\n') >= 0) {
+ if (j + 1 < childNodes.length) {
+ childElement.nodeValue = '\n' + nextDepthSpacing;
+ } else {
+ childElement.nodeValue = '\n' + currentDepthSpacing;
+ }
+ }
+ } else {
+ beautifyNode(childElement, depth + 1);
+ }
+ }
+ }
+ })();
+ </script>
+ </body>
+</html>
diff --git a/lib/generators/webstarterkit/web/styles/_h5bp.scss b/lib/generators/webstarterkit/web/styles/_h5bp.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aab30b6403c71ea983fee759b8d27e7c58d2d1b0
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/_h5bp.scss
@@ -0,0 +1,207 @@
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+html,
+button,
+input,
+select,
+textarea {
+ color: #222;
+}
+
+body {
+ font-size: 1em;
+ line-height: 1.4;
+}
+
+a {
+ color: #00e;
+}
+
+a:visited {
+ color: #551a8b;
+}
+
+a:hover {
+ color: #06e;
+}
+
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+
+img {
+ vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+ resize: vertical;
+}
+
+/* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+/* Prevent callout */
+
+.nocallout {
+ -webkit-touch-callout: none;
+}
+
+.pressed {
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+/* A hack for HTML5 contenteditable attribute on mobile */
+
+textarea[contenteditable] {
+ -webkit-appearance: none;
+}
+
+/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
+ they have been set as display: none */
+
+.gifhidden {
+ position: absolute;
+ left: -100%;
+}
+
+/*
+ * Image replacement
+ */
+
+.ir {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: 0;
+ direction: ltr;
+ display: block;
+ overflow: hidden;
+ text-align: left;
+ text-indent: -999em;
+}
+
+.ir br {
+ display: none;
+}
+
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+
+.hidden {
+ display: none !important;
+ visibility: hidden;
+}
+
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+
+.visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+
+.invisible {
+ visibility: hidden;
+}
+
+/**
+ * Clearfix helper
+ * Used to contain floats: h5bp.com/q
+ */
+
+.clearfix::before,
+.clearfix::after {
+ content: "";
+ display: table;
+}
+
+.clearfix::after {
+ clear: both;
+}
+
+/* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ Theses examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+@media only screen and (min-width: 800px) {
+ /* Style adjustments for viewports that meet the condition */
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-resolution: 144dpi) {
+ /* Style adjustments for viewports that meet the condition */
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_articles-list.scss b/lib/generators/webstarterkit/web/styles/components/_components/_articles-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..431efa0d0fd9912846b87dbcc48331b670169ae0
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_articles-list.scss
@@ -0,0 +1,55 @@
+/**
+*
+* Articles list
+*
+**/
+
+.articles-list {
+ padding-left: 0;
+}
+
+.articles-list__item {
+
+ padding-bottom: $lineHeight * 2;
+
+ &:last-child {
+ padding-bottom: $lineHeight * 2 + 1;
+ }
+
+ padding-left: 0;
+
+ &::before {
+ content: "";
+ display: block;
+ width: 40%;
+ height: 1px;
+ box-shadow: inset 0 1px 0 0 $colorGrayKeyline;
+ margin-right: 0;
+ margin-left: 30%;
+ }
+
+ h3 {
+ a:hover {
+ text-decoration: none;
+ }
+ }
+
+ p {
+ margin-top: $lineHeight;
+ margin-bottom: $lineHeight;
+ }
+
+ &:first-child {
+ padding-top: 0;
+
+ @include medium {
+ padding-top: $lineHeight - 2;
+ }
+
+ &::before {
+ display: none;
+ }
+ }
+
+}
+
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_breadcrumb.scss b/lib/generators/webstarterkit/web/styles/components/_components/_breadcrumb.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5a8c7dbbc4dce8a629a1bb5b7573e4a2259c364f
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_breadcrumb.scss
@@ -0,0 +1,31 @@
+/**
+*
+* Breadcrumb
+*
+**/
+
+.breadcrumbs {
+ display: none;
+ @include medium {
+ display: block;
+ }
+
+ position: relative;
+ z-index: 1;
+}
+
+.breadcrumbs p {
+ @include type--small;
+ padding-top: $lineHeight;
+}
+
+.breadcrumbs__link {
+ @include type--small;
+ color: black;
+ font-weight: 400;
+ padding-top: 0;
+
+ @include medium {
+ padding-top: 0;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_button.scss b/lib/generators/webstarterkit/web/styles/components/_components/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..349566d5dd0fd2156b926de7487fefd8b4c7cb23
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_button.scss
@@ -0,0 +1,56 @@
+/**
+*
+* Button
+*
+**/
+
+.button {
+ display: inline-block;
+ padding: (($lineHeight / 2) - 1) 32px;
+ margin-bottom: $lineHeight / 2;
+ margin-top: $lineHeight / 2;
+ min-height: $lineHeight;
+
+ text-align: center;
+
+ font-family: $fontHighlight;
+ font-weight: 600;
+ text-decoration: none;
+
+ outline: 0;
+
+ transition: none;
+
+ &:hover {
+ background: #4d4d4d;
+ color: #ffffff;
+ border: 1px solid #4d4d4d;
+ text-decoration: none;
+ }
+}
+
+// Mixin to create buttons
+@mixin style-button($color, $textColor, $isInverted: false) {
+
+ background: $color;
+ color: $textColor;
+ border: 1px solid darken($color, 10%);
+
+ @if $isInverted { border-color: transparent;}
+}
+
+
+.button--primary {
+ @extend .button;
+ @include style-button(#4285f4, #ffffff);
+}
+
+.button--secondary {
+ @extend .button;
+ @include style-button(#ffffff, $colorBlue);
+}
+
+.button--secondary-variation {
+ @extend .button;
+ @include style-button(#ffffff, $colorBlue, true);
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_column-list.scss b/lib/generators/webstarterkit/web/styles/components/_components/_column-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1e8fb9afa40bb0990fa44ebe062b97ece4ebb22d
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_column-list.scss
@@ -0,0 +1,42 @@
+/**
+*
+* Column list
+*
+**/
+
+.columns-list-wrapper {
+ @include wide {
+ margin-right: $mediumColWidth;
+ }
+
+}
+
+.list--columns {
+ border-bottom: 1px solid #ccc;
+ padding-bottom: $lineHeight - 1;
+ margin-bottom: 1px;
+
+ @include medium {
+ column-count: 2;
+ column-rule: 0 none transparent;
+ column-gap: 0;
+ }
+
+ & li,
+ & .columns-list-item {
+ @include type--small;
+ padding: 0;
+ }
+
+ & a {
+ display: block;
+ position: relative;
+ padding-left: 39px;
+
+ &::before {
+ line-height: 26px;
+ }
+ }
+
+}
+
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_grid.scss b/lib/generators/webstarterkit/web/styles/components/_components/_grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fa30c683e8a914d3f03041ccc8935e956943d2e2
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_grid.scss
@@ -0,0 +1,144 @@
+/**
+*
+* Grid
+*
+**/
+
+
+@include medium-only {
+ // Generating grid classes for medium view
+ @for $i from 1 through $mediumColCount {
+ .g-medium--#{$i} {
+ @include rule--col(medium);
+ width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
+ @if $i == $mediumColCount { margin-right: 0; }
+ }
+
+ @if $i < $mediumColCount {
+ .g-medium--push-#{$i} {
+ margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
+ }
+ .g-medium--pull-#{$i} {
+ margin-right: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
+ }
+ }
+ }
+
+ .g-medium--full {
+ @include rule--col(medium);
+ margin-right: 0;
+ width: 100%;
+ }
+
+ .g--third {
+ @include rule--col(medium);
+ width: $mediumColWidth;
+ }
+
+ .g--half,
+ .g-medium--half {
+ @include rule--col(medium);
+ width: 50% - $mediumGutterWidth/2;
+ }
+
+ .g-medium--last { margin-right: 0; }
+ .g-medium--last + .g-medium--half { clear: left; }
+
+ .g--pull-half { margin-right: 50% + $mediumGutterWidth/2; }
+}
+
+
+@include wide {
+ // Generating grid classes for wide view
+ @for $i from 1 through $wideColCount {
+ .g-wide--#{$i} {
+ @include rule--col(wide);
+ width: ($wideColWidth*$i) + ($wideGutterWidth*($i + -1));
+ @if $i == $wideColCount { margin-right: 0; }
+ }
+
+ @if $i < $wideColCount {
+ .g-wide--push-#{$i} {
+ margin-left: ($wideColWidth*$i) + ($wideGutterWidth*$i);
+ }
+ .g-wide--pull-#{$i} {
+ margin-right: ($wideColWidth*$i) + ($wideGutterWidth*$i);
+ }
+ }
+ }
+
+ .g-wide--last { margin-right: 0; }
+
+ .g-wide--full {
+ @include rule--col(wide);
+ margin-right: 0;
+ width: 100%;
+ }
+
+ .g--third {
+ @include rule--col(wide);
+ width: 30.8%;
+ }
+
+ .g--half,
+ .g-wide--half {
+ @include rule--col(wide);
+ width: 50% - $wideGutterWidth/2;
+ }
+
+ .g--pull-half { margin-right: 50% + $wideGutterWidth/2; }
+}
+
+
+// This is a global 'last' class
+// to be used with global grid classes, such as 'half' or 'third'
+// Example usage:
+// <div class="third"></div>
+// <div class="third"></div>
+// <div class="third last"></div>
+.g--last { margin-right: 0; }
+
+
+// This is a global 'centered' class
+.g--centered {
+ float: none; // reset float to none so we can center it
+ margin-left: auto;
+ margin-right: auto;
+}
+
+// This is a grid overlay
+// Its purpose is to show users our grid system
+// It becomes visible when a class 'debug' is added to the body
+.grid-overlay {
+
+ display: none;
+ pointer-events: none;
+
+ // Only show when parents (body) has debug class
+ .debug & {
+ @include container(true);
+
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ display: block;
+
+ [class*="g-"] {
+ height: 100%;
+ background-color: rgba(lighten(#000, 35%), .2);
+ }
+
+ @include medium-only {
+ .g-wide--last {
+ display: none;
+ }
+ }
+
+ @include small-only {
+ display: none;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_guides-list.scss b/lib/generators/webstarterkit/web/styles/components/_components/_guides-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b7a18b9895c50b89e0bde1752fe626173d18da68
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_guides-list.scss
@@ -0,0 +1,78 @@
+/**
+*
+* Guides List
+*
+**/
+
+
+.guides-list {
+ overflow: hidden;
+
+ @include medium {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ padding-top: $lineHeight*2;
+ }
+}
+
+.guides-list__item {
+ padding: 0;
+ background: #ffffff;
+ margin-top: $lineHeight;
+ margin-bottom: 0;
+
+ @include medium {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ }
+
+ h3 {
+ margin: 0 32px;
+ }
+
+ p {
+ margin: $lineHeight 32px 0;
+ }
+
+ .primary-content {
+ @include medium {
+ flex: 1;
+ }
+ }
+
+ .secondary-content {
+ position: relative;
+ // background: #f5f5f5;
+ margin-top: ($lineHeight*2) - 1;
+ border-top: 1px solid $colorGrayKeyline;
+
+ @include medium {
+ width: 100%; // needed due to parent being flex
+ }
+
+ .icon-circle {
+ position: absolute;
+ top: -$lineHeight - 2;
+ left: 50%;
+ margin-left: -21px;
+ border: 2px solid #ffffff;
+
+ & i {
+ font-size: 23px;
+ }
+ }
+ }
+
+ ol {
+ margin: $lineHeight 0 0;
+ padding: $lineHeight*2 0 $lineHeight*2;
+ margin-top: 0;
+ }
+
+ &::before {
+ display: none;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_icon-circle.scss b/lib/generators/webstarterkit/web/styles/components/_components/_icon-circle.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ee5ba5d674d8aeb183cf358c0bacb1ee8608aed1
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_icon-circle.scss
@@ -0,0 +1,110 @@
+/**
+*
+* Icon Circle
+*
+**/
+
+.icon-circle,
+.icon-circle--large {
+ height: 0;
+ width: 0;
+ background: $colorGray;
+ display: block;
+ position: relative;
+ border-radius: 100%;
+ font-size: 0;
+ padding: 22px; // Breaks baseline grid
+ margin: 4px auto; // Adds margin top/bottom to fix baseline grid ;)
+
+ i,
+ span {
+ position: absolute;
+ line-height: 0px;
+ top: 50%;
+ width: 100%;
+ left: 0;
+ text-align: center;
+ color: #ffffff;
+ font-size: $fontLarge;
+ }
+
+ span {
+ font-family: $fontHighlight;
+ font-size: $fontLarge;
+ font-weight: 700;
+
+ @include medium {
+ font-size: $fontXLarge;
+ }
+ }
+}
+
+.icon-circle--large {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: $lineHeight;
+ position: relative;
+
+ i {
+ font-size: $fontLarge;
+
+ @include medium {
+ font-size: $fontXLarge;
+ }
+ }
+
+ @include medium {
+ padding: ($lineHeight + $lineHeight/2) - 2;
+ border: 2px solid #ffffff;
+
+ a & {
+ padding: ($lineHeight + $lineHeight/2) - 1;
+
+ box-shadow: inset 0px 0px 0px 1px rgba(#ffffff, .42);
+ border: 1px solid;
+
+ // demo transition
+ transition: all 100ms linear;
+ transform: translateZ(0); // kick in hardware acceleration
+ }
+
+ .no-touch a:hover & {
+ box-shadow: inset 0px 0px 0px 1px #ffffff;
+ transform: scale(1.1);
+ }
+ }
+
+}
+
+.icon-circle--nav {
+ height: 0;
+ width: 0;
+ background: $colorGray;
+ display: block;
+ position: relative;
+ border-radius: 100%;
+ font-size: 0;
+ padding: $lineHeight/2;
+ margin: 0 auto;
+
+ @include medium {
+ padding: 22px; // Breaks baseline grid
+ margin-top: 4px; // Adds margin top/bottom to fix baseline grid ;)
+ margin-bottom: 4px; // Adds margin top/bottom to fix baseline grid ;)
+ }
+
+ i {
+ position: absolute;
+ line-height: 1px;
+ top: 50%;
+ width: 100%;
+ left: 0;
+ text-align: center;
+ color: #ffffff;
+ font-size: $fontBase;
+
+ @include medium {
+ font-size: $fontLarge;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_icons.scss b/lib/generators/webstarterkit/web/styles/components/_components/_icons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b08738f0635cc377b888b38788c5b394eebd1f36
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_icons.scss
@@ -0,0 +1,147 @@
+@font-face {
+ font-family: icons;
+ src: url(../../images/icons/icons.eot);
+ src: url(../../images/icons/icons.eot?#iefix) format('embedded-opentype'),
+ url(../../images/icons/icons.woff2) format('woff2'),
+ url(../../images/icons/icons.woff) format('woff'),
+ url(../../images/icons/icons.ttf) format('truetype'),
+ url(../../images/icons/icons.svg?#icons) format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon {
+ font-family: 'icons';
+ display: inline-block;
+ vertical-align: top;
+ line-height: 1;
+ font-weight: normal;
+ font-style: normal;
+ speak: none;
+ text-decoration: inherit;
+ text-transform: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+// Icons
+$icon-bullet: '\e001';
+.icon-bullet::before {
+ content:"\e001";
+}
+
+$icon-chevron-down: '\e002';
+.icon-chevron-down::before {
+ content: '\e002';
+}
+
+$icon-chevron-large: '\e003';
+.icon-chevron-large::before {
+ content: '\e003';
+}
+
+$icon-chevron-left: '\e004';
+.icon-chevron-left::before {
+ content: '\e004';
+}
+
+$icon-chevron-right: '\e005';
+.icon-chevron-right::before {
+ content: '\e005';
+}
+
+$icon-chevron-up: '\e006';
+.icon-chevron-up::before {
+ content: '\e006';
+}
+
+$icon-close: '\e007';
+.icon-close::before {
+ content: '\e007';
+}
+
+$icon-cog: '\e008';
+.icon-cog::before {
+ content: '\e008';
+}
+
+$icon-diamond: '\e009';
+.icon-diamond::before {
+ content: '\e009';
+}
+
+$icon-exclamation: '\e00a';
+.icon-exclamation::before {
+ content: '\e00a';
+}
+
+$icon-google-dev: '\e00b';
+.icon-google-dev::before {
+ content: '\e00b';
+}
+
+$icon-hash: '\e00c';
+.icon-hash::before {
+ content: '\e00c';
+}
+
+$icon-introduction-to-media: '\e00d';
+.icon-introduction-to-media::before {
+ content: '\e00d';
+}
+
+$icon-lessons: '\e00e';
+.icon-lessons::before {
+ content: '\e00e';
+}
+
+$icon-menu: '\e00f';
+.icon-menu::before {
+ content: '\e00f';
+}
+
+$icon-minus: '\e010';
+.icon-minus::before {
+ content: '\e010';
+}
+
+$icon-multi-device-layouts: '\e011';
+.icon-multi-device-layouts::before {
+ content: '\e011';
+}
+
+$icon-performance: '\e012';
+.icon-performance::before {
+ content: '\e012';
+}
+
+$icon-plus: '\e013';
+.icon-plus::before {
+ content: '\e013';
+}
+
+$icon-question: '\e014';
+.icon-question::before {
+ content: '\e014';
+}
+
+$icon-slash: '\e015';
+.icon-slash::before {
+ content: '\e015';
+}
+
+$icon-star: '\e016';
+.icon-star::before {
+ content: '\e016';
+}
+
+$icon-tick: '\e017';
+.icon-tick::before {
+ content: '\e017';
+}
+
+$icon-user-input: '\e018';
+.icon-user-input::before {
+ content: '\e018';
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_link.scss b/lib/generators/webstarterkit/web/styles/components/_components/_link.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a9a11bad05f9fd8cad4bde500ac51eebafda4c34
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_link.scss
@@ -0,0 +1,21 @@
+/**
+*
+* Link
+*
+**/
+
+a {
+ color: $colorBlue;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+.cta--primary {
+ @include style-cta($colorBlue, $icon-chevron-right);
+}
+
+.cta--secondary {
+ @include style-cta($colorBlue);
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_list.scss b/lib/generators/webstarterkit/web/styles/components/_components/_list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01a53d6bdec61f6fb53af524b4046e680056f279
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_list.scss
@@ -0,0 +1,336 @@
+/**
+*
+* List
+*
+**/
+
+ul,
+ol {
+ list-style: none;
+ margin: 0;
+
+ @include small-only {
+ padding-left: 0;
+ }
+}
+
+ul li {
+ position: relative;
+ padding-left: 16px;
+ @include bullet-type("", icon-bullet);
+
+ &::before {
+ font-size: 4px;
+ }
+}
+
+ol {
+ counter-reset: list;
+ > li {
+ @include numbered-list;
+ position: relative;
+ padding-left: 32px;
+
+ // This selected every adjacent <li>
+ // from the 10th and overrides the
+ // content property of each
+ &:nth-child(10n) ~ li::before,
+ &:nth-child(10n)::before {
+ content: counter(list);
+ }
+
+ }
+}
+
+ul ol,
+ol ul {
+ padding-top: 0;
+}
+
+
+/*========== LIST LINKS ==========*/
+
+ul.list-links {
+ li::before {
+ display: none;
+ }
+ a {
+ @include bullet-type("", icon-bullet);
+
+ &::before {
+ font-size: 4px;
+ }
+
+ font-weight: 400;
+ }
+
+ &.list-links--primary {
+ a {
+ @include bullet-type("", icon-chevron-right);
+ font-weight: 400;
+ font-family: $fontHighlight;
+ line-height: 1; // fixes baseline grid alignment
+ text-decoration: none;
+ }
+ }
+}
+
+ol.list-links {
+ li {
+ &::before {
+ display: none;
+ }
+
+ a {
+ display: inline-block;
+ @include numbered-list;
+ font-weight: 300;
+ }
+
+ &:nth-child(10n) ~ li a::before,
+ &:nth-child(10n) a::before {
+ content: counter(list);
+ }
+ }
+
+ &.list-links--secondary {
+ a::before {
+ display: none;
+ }
+ }
+}
+
+.list-links--secondary {
+ @include type--base;
+ padding-left: 0;
+
+ li {
+ padding-left: 0;
+ }
+}
+
+/*========== ANCHOR LIST ==========*/
+
+.list-anchor {
+ padding-left: 0;
+
+ li {
+ @include type--base;
+ padding-top: 0;
+ padding-left: 0;
+
+ &::before {
+ display: none
+ }
+
+ }
+
+ a {
+ @include bullet-type("", icon-bullet);
+ line-height: 1; // fixes baseline grid alignment
+ display: inline-block;
+ padding-left: 16px;
+
+ &::before {
+ font-size: 4px;
+ }
+ }
+}
+
+/*========== SMALL LIST ==========*/
+
+.list-small {
+
+ li {
+ @include medium {
+ @include type--small;
+ padding-top: 0;
+ }
+ }
+}
+
+/*========== CENTERED LIST ==========*/
+
+.list-centered {
+ text-align: center;
+ padding-left: 0;
+}
+
+/*========== FEATURED LIST ==========*/
+
+.featured-list {
+ padding-top: $lineHeight * 3;
+ padding-bottom: $lineHeight * 3;
+}
+
+.featured-list__item {
+ background: #ffffff;
+ padding-left: 0;
+ padding-top: $lineHeight;
+ padding-bottom: $lineHeight;
+
+ @include medium {
+ min-height: $lineHeight * 13;
+ padding: $lineHeight * 2 32px;
+ }
+
+ margin-top: $lineHeight;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ p {
+ margin-bottom: $lineHeight;
+ }
+}
+
+.featured-list__img-wrapper {
+ display: none;
+ position: relative;
+ padding-top: $lineHeight;
+ margin: 0 -5%;
+
+ @include medium {
+ display: block;
+ padding-top: 0;
+ margin: 0;
+ }
+}
+
+.featured-list__img {
+ @include medium {
+ padding-top: 60.8%;
+ padding-bottom: 0;
+ height: 0;
+ overflow: hidden;
+ position: absolute;
+ width: 100%;
+
+ }
+
+ img {
+ display: block;
+ margin: 0 auto;
+ max-width: 100%;
+
+ @include medium {
+ margin: 0;
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ }
+ }
+}
+
+/*========== RELATED GUIDES LIST ==========*/
+.related-guides-list {
+ font-family: $fontHighlight;
+ padding-top: 0;
+ padding-left: 0;
+
+ @include medium {
+ padding-top: $lineHeight
+ }
+
+ @include wide {
+ padding-top: 0
+ }
+
+ p {
+ padding-top: 0;
+ }
+
+ .tag {
+ padding-top: 0;
+ }
+
+ li {
+ padding-top: $lineHeight;
+ padding-bottom: $lineHeight - 1;
+ border-bottom: 1px solid $colorGrayKeyline;
+
+ &:last-child {
+ border-color: transparent;
+ }
+
+ @include medium {
+ padding-top: 0;
+ padding-bottom: 0;
+ border-color: transparent;
+ }
+ }
+}
+
+/*========== LIST RESET ==========*/
+
+.list--reset {
+ padding-left: 0;
+
+ li {
+ padding-left: 0;
+ }
+
+ &.list-links a::before,
+ & li::before {
+ display: none !important; // Fine to use !important when we are forcing an override
+ }
+}
+
+
+/*========== LESSONS ==========*/
+.list-lessons {
+ padding-left: 0;
+
+ & a {
+ color: #ffffff;
+ }
+
+ & .current {
+ &,
+ a {
+ text-decoration: none;
+ cursor: default;
+ }
+
+ & .icon {
+ font-size: $fontSmall;
+ display: inline-block;
+ background: rgba(#000000, .2);
+ border-radius: 100%;
+ width: 26px;
+ line-height: 26px;
+ text-align: center;
+ margin-left: 7px;
+ }
+ }
+
+}
+
+
+/*========== GUIDES INTO - used on homepage ==========*/
+.list-guides-intro {
+ margin-bottom: $lineHeight*2;
+
+ @include small-only {
+ padding-top: $lineHeight*2;
+ }
+
+ li {
+ border-bottom: 1px solid $colorGrayKeyline;
+ padding-bottom: ($lineHeight*2) - 1;
+ margin-bottom: ($lineHeight*2);
+
+ @include medium {
+ border-color: transparent;
+ padding-bottom: 0;
+ }
+
+ &:last-child {
+ border-bottom: transparent;
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_media.scss b/lib/generators/webstarterkit/web/styles/components/_components/_media.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3d4e7ba18fd31ae78b4bdb1246aad00f8d30e206
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_media.scss
@@ -0,0 +1,19 @@
+/**
+*
+* Media - imgs/videos
+*
+**/
+
+img,
+video,
+object {
+ max-width: 100%;
+}
+
+img {
+
+ .content & {
+ margin-top: $lineHeight;
+ margin-bottom: $lineHeight;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_subsection-title.scss b/lib/generators/webstarterkit/web/styles/components/_components/_subsection-title.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0d0b786c6a403aa6e2940a4809fa263643c4af1c
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_subsection-title.scss
@@ -0,0 +1,16 @@
+/**
+*
+* subsection__title
+*
+**/
+
+.subsection-title {
+ color: $colorGrayDark;
+ margin-top: $lineHeight * 2;
+}
+
+.subsection-number {
+ @include type--base;
+ padding-top: 0;
+ display: block;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_table.scss b/lib/generators/webstarterkit/web/styles/components/_components/_table.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dd489747d84ac95cac22a9be6fbc6ccceabc6f93
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_table.scss
@@ -0,0 +1,158 @@
+/**
+*
+* Table
+*
+**/
+
+table {
+ margin-top: $lineHeight;
+ width: 100%;
+
+ thead {
+ background: $colorBlue;
+ color: #ffffff;
+ }
+
+ th {
+ text-align: center;
+ display: none;
+ font-family: $fontHighlight;
+ @include type--medium;
+ }
+
+ tr {
+ @include medium {
+ border-bottom: 1px solid #ffffff;
+ }
+ }
+
+ tbody {
+ background: $colorGrayBackground;
+ }
+
+ td {
+ display: block;
+ padding-top: $lineHeight/2;
+ padding-bottom: $lineHeight/2;
+
+ // This is to re-plicate the table-headers for mobile
+ &::before {
+ content: attr(data-th) " :";
+ display: inline-block;
+ color: #ffffff;
+ background: $colorBlue;
+ border-right: 2px solid #ffffff;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 100px;
+ max-height: 100%;
+ font-family: $fontHighlight;
+ font-size: 16px;
+ font-weight: 400;
+ padding-left: $lineHeight/2;
+ padding-top: $lineHeight/2;
+
+ @include medium {
+ display: none;
+ }
+ }
+ }
+
+ th,
+ td {
+ position: relative;
+ padding-left: 140px;
+
+ @include medium {
+ display: table-cell;
+ }
+ }
+
+ th {
+ @include medium {
+ padding: $lineHeight;
+ padding-top: 13px;
+ padding-bottom: $lineHeight/2 - 1;
+ }
+ }
+
+ td {
+ @include medium {
+ padding: $lineHeight;
+ padding-bottom: $lineHeight - 1;
+ }
+ }
+}
+
+td:last-child::after {
+ content: "";
+ display: block;
+ background: #ffffff;
+ height: 1px;
+ left: 0;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ @include medium {
+ display: none;
+ }
+}
+
+.table-2 {
+ col {
+ width: $mediumContainer / 2;
+ @include wide {
+ width: $wideContainer / 2;
+ }
+ }
+
+ th,
+ td {
+ @include medium {
+ &:first-child {
+ border-right: 2px solid #ffffff;
+ }
+ }
+ }
+}
+
+.table-3 {
+ col {
+ width: $mediumContainer / 3;
+ @include wide {
+ width: $wideContainer / 3;
+ }
+ }
+
+ th,
+ td {
+ @include medium {
+ &:nth-child(2) {
+ border-left: 2px solid #ffffff;
+ border-right: 2px solid #ffffff;
+ }
+ }
+ }
+}
+
+.table-4 {
+ col {
+ width: $mediumContainer / 4;
+ @include wide {
+ width: $wideContainer / 4;
+ }
+ }
+
+ th,
+ td {
+ @include medium {
+ &:nth-child(2),
+ &:nth-child(3) {
+ border-left: 2px solid #ffffff;
+ border-right: 2px solid #ffffff;
+ }
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_components/_typography.scss b/lib/generators/webstarterkit/web/styles/components/_components/_typography.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0a6c6e476ae3ef1d0bad88b7f6daefa59610677f
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_components/_typography.scss
@@ -0,0 +1,52 @@
+/**
+*
+* Typography
+*
+**/
+
+// Just normalizing text
+// Recommend using padding instead of margin
+h1, h2, h3, h4, h5, p {
+ margin: 0;
+}
+
+// Definitions
+.small,
+small {
+ @include type--small;
+}
+
+.base,
+p,
+ul,
+ol {
+ @include type--base;
+}
+
+.medium,
+h4 {
+ @include type--medium;
+}
+
+.large,
+h3 {
+ @include type--large;
+}
+.xlarge,
+h2 {
+ @include type--xlarge;
+}
+
+.xxlarge,
+h1 {
+ @include type--xxlarge;
+}
+
+.huge {
+ @include type--huge;
+}
+
+
+li > p {
+ padding-top: 0;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_global.scss b/lib/generators/webstarterkit/web/styles/components/_global.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f7bc86b9d61104444b2ee7bdb78e717dbc7d4903
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_global.scss
@@ -0,0 +1,64 @@
+/**
+*
+* Global
+*
+**/
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body,
+button {
+ -moz-osx-font-smoothing: antialiased;
+ -webkit-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+body {
+ font-family: $fontDefault;
+ font-size: $fontBase;
+ line-height: 1.6250em; /* 26px */
+ font-weight: 300; // to thicken it a bit, we need to remove font-smoothing
+ color: $colorText;
+
+ @include baseline-grid();
+}
+
+pre {
+ background: $colorGrayBackground;
+ padding: 13px;
+}
+
+.main-container {
+ @include container(true);
+}
+
+.container {
+ @include container(true);
+}
+
+.container-medium {
+ @include medium {
+ @include container(true);
+ }
+}
+
+.container-small {
+ @include small-only {
+ @include container(true);
+ }
+}
+
+.content {
+ @include wide {
+ margin-right: 25.9%; // took this from the grid output - using @extend inside media-query is deprecated, need to figure out a better way to do this.
+
+ & pre {
+ margin-right: -25.9%;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_helper.scss b/lib/generators/webstarterkit/web/styles/components/_helper.scss
new file mode 100644
index 0000000000000000000000000000000000000000..166ce380a814518360acbd01509e76604a4bd8d8
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_helper.scss
@@ -0,0 +1,122 @@
+/**
+*
+* Helper
+*
+**/
+
+
+.clear {
+ &::before,
+ &::after {
+ content: '';
+ display: table;
+ }
+ &::after {
+ clear: both;
+ }
+}
+
+
+/*========== COLORS ==========*/
+
+.color--blue { color: $colorBlue; }
+.color--red { color: $colorRed; }
+.color--green { color: $colorGreen; }
+.color--yellow { color: $colorYellow; }
+.color--blue-secondary { color: $colorBlueSecondary; }
+.color--red-secondary { color: $colorRedSecondary; }
+.color--green-secondary { color: $colorGreenSecondary; }
+.color--yellow-secondary { color: $colorYellowSecondary; }
+
+.color--gray-background { color: $colorGrayBackground; }
+.color--gray-keyline { color: $colorGrayKeyline; }
+.color--gray { color: $colorGray; }
+.color--gray-dark { color: $colorGrayDark; }
+
+.color--text { color: $colorText; }
+.color--highlight { color: $colorHighlight; }
+.color--warning { color: $colorWarning; }
+.color--danger { color: $colorDanger; }
+.color--muted { color: $colorMuted; }
+
+.color--remember { color: $colorRemember; }
+.color--learning { color: $colorLearning; }
+
+.color--layouts { color: $colorLayouts; }
+.color--user { color: $colorUser; }
+.color--media { color: $colorMedia; }
+.color--performance { color: $colorPerformance; }
+.color--layouts-secondary { color: $colorLayoutsSecondary; }
+.color--user-secondary { color: $colorUserSecondary; }
+.color--media-secondary { color: $colorMediaSecondary; }
+.color--performance-secondary { color: $colorPerformanceSecondary; }
+
+
+
+/*========== TEXT DIVIDER ==========*/
+
+.text-divider {
+ position: relative;
+ margin-bottom: $lineHeight;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 40%;
+ height: 1px;
+ box-shadow: 0 1px 0 0 $colorGrayKeyline;
+ left: 30%;
+ bottom: -$lineHeight/2;
+ }
+
+ &.xlarge {
+ margin-bottom: $lineHeight*2;
+
+ &::after {
+ bottom: -($lineHeight*2)/2;
+ }
+ }
+
+ &.xxlarge {
+ margin-bottom: $lineHeight*3;
+
+ &::after {
+ bottom: -($lineHeight*3)/2;
+ }
+ }
+
+ &.huge {
+ margin-bottom: $lineHeight*3;
+
+ &::after {
+ bottom: -($lineHeight*3)/2;
+ }
+ }
+}
+
+
+/*========== GENERIC ==========*/
+.centered {
+ text-align: center;
+}
+
+
+/*========== TAG ==========*/
+.tag {
+ @include type--small;
+ font-family: $fontHighlight;
+ text-transform: uppercase;
+ font-weight: 700;
+ display: inline-block;
+ text-decoration: none;
+
+ &:hover {
+ color: $colorGrayDark;
+ }
+
+ &::before {
+ content: '# ';
+ display: inline-block;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_article-nav.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_article-nav.scss
new file mode 100644
index 0000000000000000000000000000000000000000..80b29af65824390cb121bbc9f03517560a7cbdf9
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_article-nav.scss
@@ -0,0 +1,88 @@
+/**
+*
+* Article nav
+*
+**/
+
+.article-nav {
+ overflow: hidden;
+ position: relative;
+
+ &::before {
+ content: '';
+ border-left: 2px solid $colorGrayKeyline;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ }
+}
+
+.article-nav-link {
+ padding: $lineHeight 32px;
+ float: left;
+ width: 50%;
+ position: relative;
+
+ &::before{
+ position: absolute;
+ top: 21px;
+ font-family: $fontHighlight;
+ font-size: $fontMedium;
+ font-weight: 400;
+
+ @include medium {
+ top: 25px;
+ font-size: $fontLarge;
+ display: block;
+ padding: 13px 10px;
+ color: #ffffff;
+ background: $colorBlue;
+ }
+ }
+}
+
+.article-nav p {
+ padding: 0;
+ margin: 0;
+}
+
+.article-nav-link--prev {
+ text-align: right;
+ // border-right-width: 1px;
+
+ &::before {
+ font-family: $fontIcon;
+ @extend .icon-chevron-left::before;
+ left: 32px;
+ }
+
+ p {
+ @include medium {
+ padding-left: 52px;
+ }
+ }
+}
+
+.article-nav-link--next {
+ // border-left-width: 1px;
+
+ &::before {
+ font-family: $fontIcon;
+ @extend .icon-chevron-right::before;
+ right: 32px;
+ }
+
+ p {
+ @include medium {
+ padding-right: 52px;
+ }
+ }
+}
+
+.article-nav-count {
+ @include type--large;
+ font-weight: 700;
+ @include medium {font-weight: 400;}
+}
+
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_articles-section.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_articles-section.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c914546266f8a73d9df6775846d955b9b72778ff
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_articles-section.scss
@@ -0,0 +1,25 @@
+/**
+*
+* Articles section
+*
+**/
+
+.articles-section {
+ background: $colorGrayBackground;
+ text-align: center;
+ padding: $lineHeight 0 $lineHeight*4;
+}
+
+.articles-count {
+ color: $colorBlue;
+ font-family: $fontHighlight;
+ font-weight: 400;
+}
+
+.article-section__icon {
+ top: -($lineHeight);
+
+ @include medium {
+ top: -($lineHeight + $lineHeight/2);
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_did-you-know.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_did-you-know.scss
new file mode 100644
index 0000000000000000000000000000000000000000..17d86a0d6657bb01a73723f5449aa004e01a6866
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_did-you-know.scss
@@ -0,0 +1,56 @@
+/**
+*
+* Text module
+*
+**/
+
+.did-you-know {
+
+ ol {
+ @include medium {
+ padding-top: 0 !important;
+ }
+ }
+
+ .cta--primary {
+ margin-top: $lineHeight;
+ font-weight: 500;
+ }
+
+ &>.g--half {
+ position: relative;
+ padding-left: 0;
+ @include medium {padding-left: 32px}
+ }
+}
+
+.did-you-know__symbol {
+ padding-bottom: $lineHeight*12;
+ @include medium {padding-bottom: $lineHeight}
+
+ &::after {
+ content: $icon-question;
+ color: $colorBlue;
+ font-family: $fontIcon;
+ font-size: 300px;
+ top: 150px;
+ left: 30%;
+ position: relative;
+ display: block;
+ width: 0;
+
+ @include medium {
+ position: absolute;
+ font-size: 400px;
+ top: 200px;
+ left: 110%;
+ }
+
+ @include wide {
+ position: absolute;
+ font-size: 400px;
+ top: 200px;
+ left: 124%;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_editorial-header.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_editorial-header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e574a25aecb93921d7a95bded9d474b725c4b9ee
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_editorial-header.scss
@@ -0,0 +1,78 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.editorial-header {
+ overflow: hidden;
+
+ .breadcrumbs {
+ color: $colorBlue;
+
+ a {
+ color: $colorBlue;
+ }
+ }
+
+ .container {
+
+ @include medium {
+ position: relative;
+
+ // Pseudo elements to add the background characters
+ &::before {
+ content: $icon-chevron-large;
+ font-family: $fontIcon;
+ font-size: 1000px;
+ line-height: 0;
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 100%;
+ color: $colorGrayBackground;
+ margin: 168px -35px 0 0;
+ }
+ }
+ }
+
+}
+
+.editorial-header__excerpt {
+ @include type--medium(true);
+ font-family: $fontHighlight;
+}
+
+.editorial-header .tag{
+ padding-top: $lineHeight*2;
+}
+
+.editorial-header__subtitle {
+ @include type--xxlarge;
+ padding-top: 0;
+ @include medium {
+ padding-top: 0;
+ padding-bottom: $lineHeight;
+ }
+ color: $colorBlue;
+}
+
+.editorial-header__toc {
+ margin-top: $lineHeight;
+
+ ol {
+ padding-top: 0;
+
+ @include medium {
+ padding-top: 0;
+ }
+ }
+}
+
+.editorial-header__toc-title {
+ font-family: $fontHighlight;
+ border-bottom: 1px solid $colorGrayKeyline;
+ margin-bottom: 13px;
+ padding-bottom: 13px !important;
+ color: $colorBlue;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_featured-section.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_featured-section.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7fa09643d1690b8e5a7998078129ca42c567ffd8
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_featured-section.scss
@@ -0,0 +1,9 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.featured-section {
+ background: $colorGrayBackground;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_featured-spotlight.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_featured-spotlight.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4411e05e6e8078a5ea88acf3dd43488e8375cd3e
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_featured-spotlight.scss
@@ -0,0 +1,61 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.featured-spotlight {
+ background: $colorGrayDark;
+ color: #ffffff;
+ overflow: hidden;
+ padding-bottom: $lineHeight * 3 - 1;
+ margin-top: $lineHeight * 2;
+
+ p {
+ padding-bottom: $lineHeight;
+ }
+
+ .cta--primary {
+ color: #ffffff;
+
+ &:hover {
+ color: #ffffff;
+ }
+ }
+}
+
+.featured-spotlight__container {
+ position: relative;
+}
+
+.featured-spotlight__img {
+ @include small-only {
+ padding-top: 58.4%;
+ padding-bottom: 0;
+ height: 0;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+ }
+
+ img {
+ margin: 0 auto;
+ display: block;
+ width: 100%;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 0;
+
+ @include medium {
+ width: auto;
+ max-width: none;
+ left: 100% + $mediumGutterWidth * 2;
+ }
+
+ @include wide {
+ left: 100% + $wideGutterWidth * 2;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_guides-section.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_guides-section.scss
new file mode 100644
index 0000000000000000000000000000000000000000..013738f7270155374c456ce4cad388e300a758fc
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_guides-section.scss
@@ -0,0 +1,5 @@
+.guides-section {
+ background: $colorGrayBackground;
+ text-align: center;
+ padding: $lineHeight 0 $lineHeight * 4;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_highlight.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_highlight.scss
new file mode 100644
index 0000000000000000000000000000000000000000..47cc8ed0436cadcf38af71b6ab63912f814111f9
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_highlight.scss
@@ -0,0 +1,269 @@
+/**
+*
+* Highlight
+*
+**/
+
+.highlight-module {
+ overflow: hidden;
+ margin-top: $lineHeight * 2;
+ margin-bottom: $lineHeight;
+ position: relative;
+
+ &::after {
+ background: $colorGrayBackground;
+ content: '';
+ height: 100%;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: 0;
+ width: 100%;
+ right: 0;
+ left: 0;
+ }
+
+ ul,
+ ol {
+ padding-left: 0;
+ }
+}
+
+.highlight-module__container {
+ @include container;
+ padding-bottom: $lineHeight * 3;
+ z-index: 1;
+ @include highlight-symbol();
+
+ @include medium {
+ padding-bottom: $lineHeight * 2;
+ }
+
+ @include wide {
+ min-height: $lineHeight * 8;
+ }
+}
+
+.highlight-module__title {
+ @include type--huge;
+ padding-top: $lineHeight;
+
+ @include wide {
+ @include type--xxlarge;
+ }
+}
+
+.highlight-module__cta {
+ display: block;
+}
+
+
+/*========== LEARNING ==========*/
+.highlight-module--learning {
+ color: #ffffff;
+
+ &::after {
+ background-color: $colorLearning;
+ }
+
+ a {
+ color: #ffffff;
+ text-decoration: underline;
+ }
+}
+
+
+/*========== REMEMBER ==========*/
+.highlight-module--remember {
+ color: #ffffff;
+
+ &::after {
+ background-color: $colorRemember;
+ }
+
+ a {
+ color: #ffffff;
+ text-decoration: underline;
+ }
+}
+
+
+/*========== CODE ==========*/
+.highlight-module--code {
+ overflow: visible;
+ margin-bottom: $lineHeight * 2;
+
+ pre {
+ margin: 0;
+ padding-top: $lineHeight;
+ font-size: $fontBase - 2;
+ line-height: $lineHeight;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+
+ span {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ }
+ }
+
+ code {
+ margin: 0;
+ padding: 0;
+ word-spacing: -2px;
+ display: block;
+ }
+
+ .highlight-module__container {
+ padding-bottom: 0;
+ }
+
+ .highlight-module__cta {
+ position: absolute;
+ bottom: -$lineHeight;
+ }
+
+}
+
+
+/*========== LEFT ==========*/
+.highlight-module--left {
+ &::after {
+ @include wide {
+ width: 80%;
+ right: 20%;
+ }
+ }
+}
+
+
+/*========== RIGHT ==========*/
+.highlight-module--right {
+ &::after {
+ @include wide {
+ width: 80%;
+ left: 20%;
+ }
+ }
+
+ &.highlight-module--code {
+ &::after {
+ @include wide {
+ width: 100%;
+ left: 0;
+ }
+ }
+ }
+}
+
+/*========== INLINE ==========*/
+.highlight-module--inline {
+ color: $colorText;
+ overflow: visible;
+ margin: $lineHeight 0 0;
+
+ & .highlight-module__container {
+ padding-bottom: 0;
+
+ &::before {
+ display: none;
+ }
+ }
+
+ & .highlight-module__content {
+ border-color: $colorGrayKeyline;
+ border-style: solid;
+ border-width: 1px;
+ border-left-width: 0;
+ border-right-width: 0;
+ margin-bottom: -2px; // Offsetting 2px to considerate border top/bottom - baseline rules.
+ padding: 0 0 $lineHeight;
+ }
+
+ & .highlight-module__title {
+ @include type--large;
+ }
+
+ &.highlight-module--remember {
+ & .highlight-module__title,
+ & li::before {
+ color: $colorRemember;
+ }
+ }
+
+ &.highlight-module--learning {
+ & .highlight-module__title,
+ & li::before {
+ color: $colorLearning;
+ }
+ }
+
+ &::after {
+ display: none !important;
+ }
+}
+
+/*========== COLORS ==========*/
+
+div.highlight > pre > code, code .highlight { background: transparent; }
+div.highlight > pre > code .c, code .highlight .c { color: #999988; font-style: italic } /* Comment */
+div.highlight > pre > code .err, code .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+div.highlight > pre > code .k, code .highlight .k { } /* Keyword */
+div.highlight > pre > code .o, code .highlight .o { } /* Operator */
+div.highlight > pre > code .cm, code .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+div.highlight > pre > code .cp, code .highlight .cp { color: $colorGray; } /* Comment.Preproc */
+div.highlight > pre > code .c1, code .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+div.highlight > pre > code .cs, code .highlight .cs { color: $colorGray; font-style: italic } /* Comment.Special */
+div.highlight > pre > code .gs, code .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+div.highlight > pre > code .gd .x, code .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+div.highlight > pre > code .ge, code .highlight .ge { font-style: italic } /* Generic.Emph */
+div.highlight > pre > code .gr, code .highlight .gr { color: #aa0000 } /* Generic.Error */
+div.highlight > pre > code .gh, code .highlight .gh { color: $colorGray } /* Generic.Heading */
+div.highlight > pre > code .gi, code .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+div.highlight > pre > code .gi .x, code .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+div.highlight > pre > code .go, code .highlight .go { color: #888888 } /* Generic.Output */
+div.highlight > pre > code .gp, code .highlight .gp { color: #555555 } /* Generic.Prompt */
+div.highlight > pre > code .gs, code .highlight .gs { } /* Generic.Strong */
+div.highlight > pre > code .gu, code .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+div.highlight > pre > code .gt, code .highlight .gt { color: #aa0000 } /* Generic.Traceback */
+div.highlight > pre > code .kc, code .highlight .kc { } /* Keyword.Constant */
+div.highlight > pre > code .kd, code .highlight .kd { } /* Keyword.Declaration */
+div.highlight > pre > code .kp, code .highlight .kp { } /* Keyword.Pseudo */
+div.highlight > pre > code .kr, code .highlight .kr { } /* Keyword.Reserved */
+div.highlight > pre > code .kt, code .highlight .kt { color: #445588; } /* Keyword.Type */
+div.highlight > pre > code .m, code .highlight .m { color: #009999 } /* Literal.Number */
+div.highlight > pre > code .s, code .highlight .s { color: $colorLearning } /* Literal.String */
+div.highlight > pre > code .na, code .highlight .na { color: #008080 } /* Name.Attribute */
+div.highlight > pre > code .nb, code .highlight .nb { color: #0086B3 } /* Name.Builtin */
+div.highlight > pre > code .nc, code .highlight .nc { color: #445588; } /* Name.Class */
+div.highlight > pre > code .no, code .highlight .no { color: #008080 } /* Name.Constant */
+div.highlight > pre > code .ni, code .highlight .ni { color: #800080 } /* Name.Entity */
+div.highlight > pre > code .ne, code .highlight .ne { color: #990000; } /* Name.Exception */
+div.highlight > pre > code .nf, code .highlight .nf { color: #990000; } /* Name.Function */
+div.highlight > pre > code .nn, code .highlight .nn { color: #555555 } /* Name.Namespace */
+div.highlight > pre > code .nt, code .highlight .nt { color: $colorRemember } /* Name.Tag */
+div.highlight > pre > code .nv, code .highlight .nv { color: #008080 } /* Name.Variable */
+div.highlight > pre > code .ow, code .highlight .ow { } /* Operator.Word */
+div.highlight > pre > code .w, code .highlight .w { color: #bbbbbb } /* Text.Whitespace */
+div.highlight > pre > code .mf, code .highlight .mf { color: #009999 } /* Literal.Number.Float */
+div.highlight > pre > code .mh, code .highlight .mh { color: #009999 } /* Literal.Number.Hex */
+div.highlight > pre > code .mi, code .highlight .mi { color: #009999 } /* Literal.Number.Integer */
+div.highlight > pre > code .mo, code .highlight .mo { color: #009999 } /* Literal.Number.Oct */
+div.highlight > pre > code .sb, code .highlight .sb { color: $colorLearning } /* Literal.String.Backtick */
+div.highlight > pre > code .sc, code .highlight .sc { color: $colorLearning } /* Literal.String.Char */
+div.highlight > pre > code .sd, code .highlight .sd { color: $colorLearning } /* Literal.String.Doc */
+div.highlight > pre > code .s2, code .highlight .s2 { color: $colorLearning } /* Literal.String.Double */
+div.highlight > pre > code .se, code .highlight .se { color: $colorLearning } /* Literal.String.Escape */
+div.highlight > pre > code .sh, code .highlight .sh { color: $colorLearning } /* Literal.String.Heredoc */
+div.highlight > pre > code .si, code .highlight .si { color: $colorLearning } /* Literal.String.Interpol */
+div.highlight > pre > code .sx, code .highlight .sx { color: $colorLearning } /* Literal.String.Other */
+div.highlight > pre > code .sr, code .highlight .sr { color: #009926 } /* Literal.String.Regex */
+div.highlight > pre > code .s1, code .highlight .s1 { color: $colorLearning } /* Literal.String.Single */
+div.highlight > pre > code .ss, code .highlight .ss { color: #990073 } /* Literal.String.Symbol */
+div.highlight > pre > code .bp, code .highlight .bp { color: $colorGray } /* Name.Builtin.Pseudo */
+div.highlight > pre > code .vc, code .highlight .vc { color: #008080 } /* Name.Variable.Class */
+div.highlight > pre > code .vg, code .highlight .vg { color: #008080 } /* Name.Variable.Global */
+div.highlight > pre > code .vi, code .highlight .vi { color: #008080 } /* Name.Variable.Instance */
+div.highlight > pre > code .il, code .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_in-this-guide.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_in-this-guide.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ac4dfca0a503414d975726335ff0850566e80c6
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_in-this-guide.scss
@@ -0,0 +1,15 @@
+/**
+*
+* In this guide
+*
+**/
+
+.in-this-guide {
+ margin-top: - $lineHeight * 3;
+}
+
+.in-this-guide__title {
+ @include type--medium(true);
+ font-family: $fontHighlight;
+ margin-bottom: $lineHeight;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_next-lessons.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_next-lessons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b3299da0a07815b27095d1659acbb25081869dbc
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_next-lessons.scss
@@ -0,0 +1,79 @@
+/**
+*
+* Next Lessons
+*
+**/
+
+.next-lessons {
+ background: $colorGrayDark;
+ padding: $lineHeight $lineHeight $lineHeight * 2;
+ margin-top: $lineHeight;
+ color: #ffffff;
+ position: relative;
+
+ h3 {
+ i {
+ @include medium {
+ display: none;
+ }
+ }
+ }
+
+ &::before,
+ &::after {
+ color: rgba(255, 255, 255, 0.5);
+ position: absolute;
+ display: none;
+
+ @include medium {
+ display: inline-block;
+ }
+ }
+
+ &::before {
+ @include medium {
+ content: attr(data-current-lesson);
+
+ font-family: $fontHighlight;
+ font-size: $fontBase;
+ font-weight: 400;
+ line-height: 1;
+
+ background: $colorGrayDark;
+ display: inline-block;
+ padding: 5px 7px;
+
+ right: 127px;
+ top: 143px;
+
+ z-index: 1;
+ color: rgba(255, 255, 255, 0.5);
+ }
+
+ @include wide {
+ font-size: $fontMedium;
+ padding-left: 15px;
+ padding-right: 15px;
+ top: 126px;
+ right: 230px;
+ }
+
+ }
+
+ &::after {
+ @include medium {
+ content: $icon-lessons;
+ font-family: $fontIcon;
+ font-size: 150px;
+
+ right: 40px;
+ top: 185px;
+ }
+
+ @include wide {
+ font-size: 210px;
+ right: 120px;
+ }
+
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_page-header.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_page-header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac7e24eac468015fa2a0c4da4d1acf74355ff690
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_page-header.scss
@@ -0,0 +1,32 @@
+/**
+*
+* Page header
+*
+**/
+
+.page-header {
+ text-align: center;
+
+ .breadcrumbs {
+ text-align: left;
+ color: $colorBlue;
+
+ a {
+ color: $colorBlue;
+ }
+ }
+
+ h3 {
+ color: $colorGrayDark;
+ padding-top: $lineHeight * 2;
+ }
+}
+
+.page-header__excerpt {
+ position: relative;
+ padding-top: 0;
+
+ &:last-child {
+ padding-bottom: $lineHeight * 3;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_quote.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_quote.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01ca8cccf19169654488139f70e7de7e5ecc2a1f
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_quote.scss
@@ -0,0 +1,44 @@
+/**
+*
+* Quote
+*
+**/
+
+.quote__content {
+ position: relative;
+ font-family: $fontHighlight;
+ @include type--medium;
+ padding-top: $lineHeight * 4;
+ padding-left: $lineHeight;
+
+ @include medium {
+ padding-top: $lineHeight * 2;
+ padding-left: 0;
+ }
+
+ p {
+ border-top: 1px solid $colorGrayKeyline;
+ text-align: right;
+ font-weight: 500;
+ margin-top: $lineHeight/2 - 1;
+ padding-top: $lineHeight/2;
+ }
+
+ &::before {
+ content: open-quote;
+ display: block;
+ position: absolute;
+ font-family: $fontHighlight;
+ font-weight: 700;
+ color: $colorGrayBackground;
+ top: 90px;
+ left: $lineHeight;
+ font-size: 260px;
+
+ @include medium {
+ top: 225px;
+ left: -210px;
+ font-size: 540px;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_related-guides.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_related-guides.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c7890c1aa2ca61cbc6d8211917f682fa93dbeb4a
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_related-guides.scss
@@ -0,0 +1,41 @@
+/**
+*
+* Related items
+*
+**/
+
+.related-guides {
+ margin-top: $lineHeight*3;
+ padding-bottom: ($lineHeight*2) - 2;
+ border-top: 2px solid $colorGrayKeyline;
+ padding-top: ($lineHeight*2) - 2;
+}
+
+.related-guides__list {
+ .list-links {
+ padding-top: 0;
+ }
+
+ a {
+ display: block;
+ }
+}
+
+.related-guides__title {
+ @include type--xlarge;
+ padding-top: 0;
+
+ @include medium {
+ padding-top: 0;
+ }
+}
+
+.related-guides__main-link {
+ text-transform: uppercase;
+
+ &::before {
+ content: '#';
+ display: inline-block;
+ padding-right: 2px;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_related-items.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_related-items.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ad021b4ef0f550b5b0bbc430850d13a062bf1e4e
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_related-items.scss
@@ -0,0 +1,19 @@
+/**
+*
+* Related items
+*
+**/
+
+.related-items {
+ background-color: $colorGrayDark;
+ color: #ffffff;
+ padding-bottom: $lineHeight * 2;
+ margin-top: $lineHeight * 2;
+
+ .list-links {
+ a {
+ color: #ffffff;
+ }
+ }
+
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_summary-header.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_summary-header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8605833b1d07596c9b3508069db3fcdc8db5d617
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_summary-header.scss
@@ -0,0 +1,29 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.summary-header {
+ background-color: $colorBlue;
+ padding-bottom: $lineHeight * 3;
+ color: #ffffff;
+ margin-bottom: $lineHeight;
+ box-shadow: inset 0 2px 0 0 #fff;
+
+ .breadcrumbs__link {
+ color: #ffffff;
+ }
+
+}
+
+.summary-header__anchor-list {
+ margin-top: $lineHeight * 2;
+}
+
+
+.summary-header__anchors-item {
+ & a {
+ color: #ffffff;
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_modules/_toc.scss b/lib/generators/webstarterkit/web/styles/components/_modules/_toc.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d9235fe11878a031bebb99826f34181871f7572
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_modules/_toc.scss
@@ -0,0 +1,34 @@
+/**
+*
+* Table of contents
+*
+**/
+
+.toc__title {
+ @include type--medium;
+ font-family: $fontHighlight;
+ padding-bottom: $lineHeight/2;
+ margin-bottom: ($lineHeight/2) - 1;
+ border-bottom: 1px solid $colorGrayKeyline;
+
+ @include medium {
+ padding-bottom: $lineHeight/2;
+ margin-bottom: $lineHeight/2;
+ }
+}
+
+.toc__list {
+ padding-top: 0;
+
+ border-bottom: 1px solid $colorGrayKeyline;
+ padding-bottom: ($lineHeight/2) - 1;
+ margin-bottom: $lineHeight/2;
+
+ a {
+ display: block;
+ }
+}
+
+.toc__sublist {
+ padding-top: 0;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_normalize.scss b/lib/generators/webstarterkit/web/styles/components/_normalize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..307edc0eb9f29fab4fb4cb8b919c351ddc598f62
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_normalize.scss
@@ -0,0 +1,405 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Remove margin
+ */
+
+figure {
+ margin: 0;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
+
+
+/* Blockquote
+ ========================================================================== */
+blockquote {
+ margin: 0;
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_pages/_page-resources.scss b/lib/generators/webstarterkit/web/styles/components/_pages/_page-resources.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0ef4a8725c0a524bafdd79c8880466d55812eec0
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_pages/_page-resources.scss
@@ -0,0 +1,23 @@
+/**
+*
+* Resources page
+*
+**/
+
+.page--resources {
+ & .article-section__icon,
+ & .articles-count,
+ & .guides-list__item .secondary-content {
+ display: none;
+ }
+
+ & .primary-content {
+ padding-top: $lineHeight;
+ padding-bottom: $lineHeight*2;
+
+ p {
+ margin-top: 0;
+ }
+ }
+
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_pages/_styleguide.scss b/lib/generators/webstarterkit/web/styles/components/_pages/_styleguide.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a58550d43c708de64b99010db576b759eeaff3e5
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_pages/_styleguide.scss
@@ -0,0 +1,82 @@
+/**
+*
+* Styleguide
+*
+**/
+
+.page--styleguide {
+
+ .styleguide__module-title {
+ margin-bottom: $lineHeight;
+ }
+
+ section {
+ margin-bottom: $lineHeight*2;
+ border-bottom: 1px solid #ccc;
+ padding-bottom: $lineHeight*3 - 1;
+
+ }
+
+ .styleguide__color-list {
+ text-align: center;
+
+ li {
+ border-bottom: $lineHeight*2 solid;
+ margin-bottom: $lineHeight;
+ position: relative;
+ }
+ }
+
+ .styleguide__breadcrumb .breadcrumbs {
+ display: block;
+ }
+
+ .styleguide__lists {
+ ul,
+ ol {
+ margin-bottom: $lineHeight;
+ }
+ }
+
+ .styleguide__inverted-block {
+ background: #e8e8e8;
+ padding: 0 13px;
+ }
+
+ .styleguide__theme-block {
+ background: $colorLayouts;
+ padding: 0 13px;
+ }
+
+}
+
+.demo {
+ margin-bottom: $lineHeight;
+ margin-top: $lineHeight;
+}
+
+.demo {
+ [class*="g-"] {
+ background-color: $colorGrayLight;
+ position: relative;
+ margin-bottom: $lineHeight;
+ min-height: $lineHeight*6;
+
+ &::before,
+ &::after {
+ @include type--small;
+ display: block;
+ margin: 0 10px;
+ }
+
+ &::before {
+ content: 'HTML classes: ';
+ font-weight: 700;
+ }
+
+ &::after {
+ content: attr(class);
+ word-spacing: 15px;
+ }
+ }
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_palette.scss b/lib/generators/webstarterkit/web/styles/components/_palette.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d2bbf4aab419562b9f5cf02108303abe4fe98a38
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_palette.scss
@@ -0,0 +1,335 @@
+/**
+*
+* Material design color palettes.
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+
+/* ========== Blacks ========== */
+
+$colorBlack: #000;
+$colorGrayDark: rgba($colorBlack, .87);
+$colorGray: rgba($colorBlack, .54);
+$colorGrayLight: rgba($colorBlack, .26);
+$colorGrayLighter: rgba($colorBlack, .12);
+
+/* ========== Color Palettes ========== */
+
+$paletteRed: #fde0dc #f9bdbb #f69988 #f36c60 #e84e40 #e51c23 #dd191d
+ #d01716 #c41411 #b0120a #ff7997 #ff5177 #ff2d6f #e00032;
+
+$palettePink: #fce4ec #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60
+ #c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
+
+$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa
+ #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #aa00ff;
+
+$paletteDeepPurple: #673ab7 #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7
+ #5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff
+ #6200ea;
+
+$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab
+ #303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
+
+$paletteBlue: #e7e9fd #d0d9ff #afbfff #91a7ff #738ffe #5677fc #4e6cef
+ #455ede #3b50ce #2a36b1 #a6baff #6889ff #4d73ff #4d69ff;
+
+$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5
+ #0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
+
+$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1
+ #0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
+
+$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b
+ #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
+
+$paletteGreen: #d0f8ce #a3e9a4 #72d572 #42bd41 #2baf2b #259b24 #0a8f08
+ #0a7e07 #056f00 #0d5302 #a2f78d #5af158 #14e715 #12c700;
+
+$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342
+ #689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
+
+$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33
+ #afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
+
+$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835
+ #fbc02d #f9a825 #f57f17 #ffff8d #ffff00 #ffea00 #ffd600;
+
+$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300
+ #ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
+
+$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00
+ #f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
+
+$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e
+ #e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
+
+$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63
+ #795548 #6d4c41 #5d4037 #4e342e #3e2723;
+
+$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
+ #607d8b #546e7a #455a64 #37474f #263238;
+
+/* ========== Color definitions ========== */
+
+$colorRed50: nth($paletteRed, 1);
+$colorRed100: nth($paletteRed, 2);
+$colorRed200: nth($paletteRed, 3);
+$colorRed300: nth($paletteRed, 4);
+$colorRed400: nth($paletteRed, 5);
+$colorRed500: nth($paletteRed, 6);
+$colorRed600: nth($paletteRed, 7);
+$colorRed700: nth($paletteRed, 8);
+$colorRed800: nth($paletteRed, 9);
+$colorRed900: nth($paletteRed, 10);
+$colorRedA100: nth($paletteRed, 11);
+$colorRedA200: nth($paletteRed, 12);
+$colorRedA400: nth($paletteRed, 13);
+$colorRedA700: nth($paletteRed, 14);
+
+$colorPink50: nth($palettePink, 1);
+$colorPink100: nth($palettePink, 2);
+$colorPink200: nth($palettePink, 3);
+$colorPink300: nth($palettePink, 4);
+$colorPink400: nth($palettePink, 5);
+$colorPink500: nth($palettePink, 6);
+$colorPink600: nth($palettePink, 7);
+$colorPink700: nth($palettePink, 8);
+$colorPink800: nth($palettePink, 9);
+$colorPink900: nth($palettePink, 10);
+$colorPinkA100: nth($palettePink, 11);
+$colorPinkA200: nth($palettePink, 12);
+$colorPinkA400: nth($palettePink, 13);
+$colorPinkA700: nth($palettePink, 14);
+
+$colorPurple50: nth($palettePurple, 1);
+$colorPurple100: nth($palettePurple, 2);
+$colorPurple200: nth($palettePurple, 3);
+$colorPurple300: nth($palettePurple, 4);
+$colorPurple400: nth($palettePurple, 5);
+$colorPurple500: nth($palettePurple, 6);
+$colorPurple600: nth($palettePurple, 7);
+$colorPurple700: nth($palettePurple, 8);
+$colorPurple800: nth($palettePurple, 9);
+$colorPurple900: nth($palettePurple, 10);
+$colorPurpleA100: nth($palettePurple, 11);
+$colorPurpleA200: nth($palettePurple, 12);
+$colorPurpleA400: nth($palettePurple, 13);
+$colorPurpleA700: nth($palettePurple, 14);
+
+$colorDeepPurple50: nth($paletteDeepPurple, 1);
+$colorDeepPurple100: nth($paletteDeepPurple, 2);
+$colorDeepPurple200: nth($paletteDeepPurple, 3);
+$colorDeepPurple300: nth($paletteDeepPurple, 4);
+$colorDeepPurple400: nth($paletteDeepPurple, 5);
+$colorDeepPurple500: nth($paletteDeepPurple, 6);
+$colorDeepPurple600: nth($paletteDeepPurple, 7);
+$colorDeepPurple700: nth($paletteDeepPurple, 8);
+$colorDeepPurple800: nth($paletteDeepPurple, 9);
+$colorDeepPurple900: nth($paletteDeepPurple, 10);
+$colorDeepPurpleA100: nth($paletteDeepPurple, 11);
+$colorDeepPurpleA200: nth($paletteDeepPurple, 12);
+$colorDeepPurpleA400: nth($paletteDeepPurple, 13);
+$colorDeepPurpleA700: nth($paletteDeepPurple, 14);
+
+$colorIndigo50: nth($paletteIndigo, 1);
+$colorIndigo100: nth($paletteIndigo, 2);
+$colorIndigo200: nth($paletteIndigo, 3);
+$colorIndigo300: nth($paletteIndigo, 4);
+$colorIndigo400: nth($paletteIndigo, 5);
+$colorIndigo500: nth($paletteIndigo, 6);
+$colorIndigo600: nth($paletteIndigo, 7);
+$colorIndigo700: nth($paletteIndigo, 8);
+$colorIndigo800: nth($paletteIndigo, 9);
+$colorIndigo900: nth($paletteIndigo, 10);
+$colorIndigoA100: nth($paletteIndigo, 11);
+$colorIndigoA200: nth($paletteIndigo, 12);
+$colorIndigoA400: nth($paletteIndigo, 13);
+$colorIndigoA700: nth($paletteIndigo, 14);
+
+$colorBlue50: nth($paletteBlue, 1);
+$colorBlue100: nth($paletteBlue, 2);
+$colorBlue200: nth($paletteBlue, 3);
+$colorBlue300: nth($paletteBlue, 4);
+$colorBlue400: nth($paletteBlue, 5);
+$colorBlue500: nth($paletteBlue, 6);
+$colorBlue600: nth($paletteBlue, 7);
+$colorBlue700: nth($paletteBlue, 8);
+$colorBlue800: nth($paletteBlue, 9);
+$colorBlue900: nth($paletteBlue, 10);
+$colorBlueA100: nth($paletteBlue, 11);
+$colorBlueA200: nth($paletteBlue, 12);
+$colorBlueA400: nth($paletteBlue, 13);
+$colorBlueA700: nth($paletteBlue, 14);
+
+$colorLightBlue50: nth($paletteLightBlue, 1);
+$colorLightBlue100: nth($paletteLightBlue, 2);
+$colorLightBlue200: nth($paletteLightBlue, 3);
+$colorLightBlue300: nth($paletteLightBlue, 4);
+$colorLightBlue400: nth($paletteLightBlue, 5);
+$colorLightBlue500: nth($paletteLightBlue, 6);
+$colorLightBlue600: nth($paletteLightBlue, 7);
+$colorLightBlue700: nth($paletteLightBlue, 8);
+$colorLightBlue800: nth($paletteLightBlue, 9);
+$colorLightBlue900: nth($paletteLightBlue, 10);
+$colorLightBlueA100: nth($paletteLightBlue, 11);
+$colorLightBlueA200: nth($paletteLightBlue, 12);
+$colorLightBlueA400: nth($paletteLightBlue, 13);
+$colorLightBlueA700: nth($paletteLightBlue, 14);
+
+$colorCyan50: nth($paletteCyan, 1);
+$colorCyan100: nth($paletteCyan, 2);
+$colorCyan200: nth($paletteCyan, 3);
+$colorCyan300: nth($paletteCyan, 4);
+$colorCyan400: nth($paletteCyan, 5);
+$colorCyan500: nth($paletteCyan, 6);
+$colorCyan600: nth($paletteCyan, 7);
+$colorCyan700: nth($paletteCyan, 8);
+$colorCyan800: nth($paletteCyan, 9);
+$colorCyan900: nth($paletteCyan, 10);
+$colorCyanA100: nth($paletteCyan, 11);
+$colorCyanA200: nth($paletteCyan, 12);
+$colorCyanA400: nth($paletteCyan, 13);
+$colorCyanA700: nth($paletteCyan, 14);
+
+$colorTeal50: nth($paletteTeal, 1);
+$colorTeal100: nth($paletteTeal, 2);
+$colorTeal200: nth($paletteTeal, 3);
+$colorTeal300: nth($paletteTeal, 4);
+$colorTeal400: nth($paletteTeal, 5);
+$colorTeal500: nth($paletteTeal, 6);
+$colorTeal600: nth($paletteTeal, 7);
+$colorTeal700: nth($paletteTeal, 8);
+$colorTeal800: nth($paletteTeal, 9);
+$colorTeal900: nth($paletteTeal, 10);
+$colorTealA100: nth($paletteTeal, 11);
+$colorTealA200: nth($paletteTeal, 12);
+$colorTealA400: nth($paletteTeal, 13);
+$colorTealA700: nth($paletteTeal, 14);
+
+$colorGreen50: nth($paletteGreen, 1);
+$colorGreen100: nth($paletteGreen, 2);
+$colorGreen200: nth($paletteGreen, 3);
+$colorGreen300: nth($paletteGreen, 4);
+$colorGreen400: nth($paletteGreen, 5);
+$colorGreen500: nth($paletteGreen, 6);
+$colorGreen600: nth($paletteGreen, 7);
+$colorGreen700: nth($paletteGreen, 8);
+$colorGreen800: nth($paletteGreen, 9);
+$colorGreen900: nth($paletteGreen, 10);
+$colorGreenA100: nth($paletteGreen, 11);
+$colorGreenA200: nth($paletteGreen, 12);
+$colorGreenA400: nth($paletteGreen, 13);
+$colorGreenA700: nth($paletteGreen, 14);
+
+$colorLightGreen50: nth($paletteLightGreen, 1);
+$colorLightGreen100: nth($paletteLightGreen, 2);
+$colorLightGreen200: nth($paletteLightGreen, 3);
+$colorLightGreen300: nth($paletteLightGreen, 4);
+$colorLightGreen400: nth($paletteLightGreen, 5);
+$colorLightGreen500: nth($paletteLightGreen, 6);
+$colorLightGreen600: nth($paletteLightGreen, 7);
+$colorLightGreen700: nth($paletteLightGreen, 8);
+$colorLightGreen800: nth($paletteLightGreen, 9);
+$colorLightGreen900: nth($paletteLightGreen, 10);
+$colorLightGreenA100: nth($paletteLightGreen, 11);
+$colorLightGreenA200: nth($paletteLightGreen, 12);
+$colorLightGreenA400: nth($paletteLightGreen, 13);
+$colorLightGreenA700: nth($paletteLightGreen, 14);
+
+$colorLime50: nth($paletteLime, 1);
+$colorLime100: nth($paletteLime, 2);
+$colorLime200: nth($paletteLime, 3);
+$colorLime300: nth($paletteLime, 4);
+$colorLime400: nth($paletteLime, 5);
+$colorLime500: nth($paletteLime, 6);
+$colorLime600: nth($paletteLime, 7);
+$colorLime700: nth($paletteLime, 8);
+$colorLime800: nth($paletteLime, 9);
+$colorLime900: nth($paletteLime, 10);
+$colorLimeA100: nth($paletteLime, 11);
+$colorLimeA200: nth($paletteLime, 12);
+$colorLimeA400: nth($paletteLime, 13);
+$colorLimeA700: nth($paletteLime, 14);
+
+$colorYellow50: nth($paletteYellow, 1);
+$colorYellow100: nth($paletteYellow, 2);
+$colorYellow200: nth($paletteYellow, 3);
+$colorYellow300: nth($paletteYellow, 4);
+$colorYellow400: nth($paletteYellow, 5);
+$colorYellow500: nth($paletteYellow, 6);
+$colorYellow600: nth($paletteYellow, 7);
+$colorYellow700: nth($paletteYellow, 8);
+$colorYellow800: nth($paletteYellow, 9);
+$colorYellow900: nth($paletteYellow, 10);
+$colorYellowA100: nth($paletteYellow, 11);
+$colorYellowA200: nth($paletteYellow, 12);
+$colorYellowA400: nth($paletteYellow, 13);
+$colorYellowA700: nth($paletteYellow, 14);
+
+$colorAmber50: nth($paletteAmber, 1);
+$colorAmber100: nth($paletteAmber, 2);
+$colorAmber200: nth($paletteAmber, 3);
+$colorAmber300: nth($paletteAmber, 4);
+$colorAmber400: nth($paletteAmber, 5);
+$colorAmber500: nth($paletteAmber, 6);
+$colorAmber600: nth($paletteAmber, 7);
+$colorAmber700: nth($paletteAmber, 8);
+$colorAmber800: nth($paletteAmber, 9);
+$colorAmber900: nth($paletteAmber, 10);
+$colorAmberA100: nth($paletteAmber, 11);
+$colorAmberA200: nth($paletteAmber, 12);
+$colorAmberA400: nth($paletteAmber, 13);
+$colorAmberA700: nth($paletteAmber, 14);
+
+$colorOrange50: nth($paletteOrange, 1);
+$colorOrange100: nth($paletteOrange, 2);
+$colorOrange200: nth($paletteOrange, 3);
+$colorOrange300: nth($paletteOrange, 4);
+$colorOrange400: nth($paletteOrange, 5);
+$colorOrange500: nth($paletteOrange, 6);
+$colorOrange600: nth($paletteOrange, 7);
+$colorOrange700: nth($paletteOrange, 8);
+$colorOrange800: nth($paletteOrange, 9);
+$colorOrange900: nth($paletteOrange, 10);
+$colorOrangeA100: nth($paletteOrange, 11);
+$colorOrangeA200: nth($paletteOrange, 12);
+$colorOrangeA400: nth($paletteOrange, 13);
+$colorOrangeA700: nth($paletteOrange, 14);
+
+$colorDeepOrange50: nth($paletteDeepOrange, 1);
+$colorDeepOrange100: nth($paletteDeepOrange, 2);
+$colorDeepOrange200: nth($paletteDeepOrange, 3);
+$colorDeepOrange300: nth($paletteDeepOrange, 4);
+$colorDeepOrange400: nth($paletteDeepOrange, 5);
+$colorDeepOrange500: nth($paletteDeepOrange, 6);
+$colorDeepOrange600: nth($paletteDeepOrange, 7);
+$colorDeepOrange700: nth($paletteDeepOrange, 8);
+$colorDeepOrange800: nth($paletteDeepOrange, 9);
+$colorDeepOrange900: nth($paletteDeepOrange, 10);
+$colorDeepOrangeA100: nth($paletteDeepOrange, 11);
+$colorDeepOrangeA200: nth($paletteDeepOrange, 12);
+$colorDeepOrangeA400: nth($paletteDeepOrange, 13);
+$colorDeepOrangeA700: nth($paletteDeepOrange, 14);
+
+$colorBrown50: nth($paletteBrown, 1);
+$colorBrown100: nth($paletteBrown, 2);
+$colorBrown200: nth($paletteBrown, 3);
+$colorBrown300: nth($paletteBrown, 4);
+$colorBrown400: nth($paletteBrown, 5);
+$colorBrown500: nth($paletteBrown, 6);
+$colorBrown600: nth($paletteBrown, 7);
+$colorBrown700: nth($paletteBrown, 8);
+$colorBrown800: nth($paletteBrown, 9);
+$colorBrown900: nth($paletteBrown, 10);
+
+$colorBlueGrey50: nth($paletteBlueGrey, 1);
+$colorBlueGrey100: nth($paletteBlueGrey, 2);
+$colorBlueGrey200: nth($paletteBlueGrey, 3);
+$colorBlueGrey300: nth($paletteBlueGrey, 4);
+$colorBlueGrey400: nth($paletteBlueGrey, 5);
+$colorBlueGrey500: nth($paletteBlueGrey, 6);
+$colorBlueGrey600: nth($paletteBlueGrey, 7);
+$colorBlueGrey700: nth($paletteBlueGrey, 8);
+$colorBlueGrey800: nth($paletteBlueGrey, 9);
+$colorBlueGrey900: nth($paletteBlueGrey, 10);
diff --git a/lib/generators/webstarterkit/web/styles/components/_themed.scss b/lib/generators/webstarterkit/web/styles/components/_themed.scss
new file mode 100644
index 0000000000000000000000000000000000000000..48647c6e16abe257e5ef653fce8c53c4c75b6eb3
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_themed.scss
@@ -0,0 +1,112 @@
+/**
+*
+* Themed styles
+*
+**/
+
+.themed {
+
+ .theme--multi-device-layouts & { color: $colorLayouts; }
+
+ .theme--introduction-to-media & { color: $colorMedia; }
+
+ .theme--user-input & { color: $colorUser; }
+
+ .theme--performance & { color: $colorPerformance; }
+
+}
+
+.themed--background {
+
+ .theme--multi-device-layouts &,
+ .theme--multi-device-layouts &.next-lessons::before { background-color: $colorLayouts; }
+
+ .theme--introduction-to-media &,
+ .theme--introduction-to-media &.next-lessons::before { background-color: $colorMedia; }
+
+ .theme--user-input &,
+ .theme--user-input &.next-lessons::before { background-color: $colorUser; }
+
+ .theme--performance &,
+ .theme--performance &.next-lessons::before { background-color: $colorPerformance; }
+
+}
+
+.themed--hover {
+
+ .theme--multi-device-layouts &:hover { color: $colorLayouts; }
+
+ .theme--introduction-to-media &:hover { color: $colorMedia; }
+
+ .theme--user-input &:hover { color: $colorUser; }
+
+ .theme--performance &:hover { color: $colorPerformance; }
+
+}
+
+.themed--hover-secondary {
+
+ .theme--multi-device-layouts &:hover { color: $colorLayoutsSecondary; }
+
+ .theme--introduction-to-media &:hover { color: $colorMediaSecondary; }
+
+ .theme--user-input &:hover { color: $colorUserSecondary; }
+
+ .theme--performance &:hover { color: $colorPerformanceSecondary; }
+
+}
+
+
+// Wrapped content in .article-container so we can
+// encapsulate what needs to be themed without overriding
+// anything outside of this container.
+.article-container h1,
+.article-container h2 {
+
+ .article--multi-device-layouts & { color: $colorLayouts; }
+
+ .article--introduction-to-media & { color: $colorMedia; }
+
+ .article--user-input & { color: $colorUser; }
+
+ .article--performance & { color: $colorPerformance; }
+}
+
+
+// Let's make sure this is at the end so we can override
+// previous rules. Specicifity rules.
+.themed--hover {
+
+ .nav-theme--multi-device-layouts &:hover { color: $colorLayouts; }
+
+ .nav-theme--introduction-to-media &:hover { color: $colorMedia; }
+
+ .nav-theme--user-input &:hover { color: $colorUser; }
+
+ .nav-theme--performance &:hover { color: $colorPerformance; }
+
+}
+
+.themed {
+
+ .nav-theme--multi-device-layouts & { color: $colorLayouts; }
+
+ .nav-theme--introduction-to-media & { color: $colorMedia; }
+
+ .nav-theme--user-input & { color: $colorUser; }
+
+ .nav-theme--performance & { color: $colorPerformance; }
+
+}
+
+.themed--background {
+
+ .nav-theme--multi-device-layouts & { background-color: $colorLayouts; }
+
+ .nav-theme--introduction-to-media & { background-color: $colorMedia; }
+
+ .nav-theme--user-input & { background-color: $colorUser; }
+
+ .nav-theme--performance & { background-color: $colorPerformance; }
+
+}
diff --git a/lib/generators/webstarterkit/web/styles/components/_utils.scss b/lib/generators/webstarterkit/web/styles/components/_utils.scss
new file mode 100644
index 0000000000000000000000000000000000000000..35e6630e6f76d40506e127d857bdefc5af7ed30e
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/_utils.scss
@@ -0,0 +1,417 @@
+/**
+*
+* Utils
+*
+**/
+
+/*========== VARIABLES ==========*/
+
+ // Defining breakpoints
+ $medium: 620px !default;
+ $wide: 800px !default;
+ $huge: 1600px !default;
+ $mediumContainer: 688px !default;
+ $wideContainer: 864px !default;
+
+ // Defining grid sizes
+ $mediumColCount: 3 !default;
+ $mediumColWidth: 30.3% !default;
+ $mediumGutterWidth: 4.5% !default;
+ $wideColCount: 4 !default;
+ $wideColWidth: 22.2% !default;
+ $wideGutterWidth: 3.7% !default;
+
+ // Defining colors
+ $colorBlue: #3372df !default;
+ $colorBlueSecondary: lighten($colorBlue, 30%) !default;
+ $colorGreen: #0f9d58 !default;
+ $colorGreenSecondary: lighten($colorGreen, 30%) !default;
+ $colorRed: #cb4437 !default;
+ $colorRedSecondary: lighten($colorRed, 30%) !default;
+ $colorYellow: #f4b400 !default;
+ $colorYellowSecondary: lighten($colorYellow, 20%) !default;
+
+ $colorRemember: #09829a !default;
+ $colorLearning: #da2e75 !default;
+
+ $colorGrayBackground: #f0f0f0 !default;
+ $colorGrayKeyline: #e0e0e0 !default;
+ $colorGray: #737373 !default;
+ $colorGrayLight: #eeeeee !default;
+ $colorGrayDark: #404040 !default;
+
+ $colorText: $colorGrayDark !default;
+ $colorHighlight: $colorBlue !default;
+ $colorWarning: $colorYellowSecondary !default;
+ $colorMuted: $colorGray !default;
+ $colorDanger: $colorRed !default;
+
+ $colorLayouts: #297ea9 !default;
+ $colorLayoutsSecondary: lighten($colorLayouts, 30%) !default;
+ $colorUser: #2c8566 !default;
+ $colorUserSecondary: lighten($colorUser, 30%) !default;
+ $colorMedia: #cf423a !default;
+ $colorMediaSecondary: lighten($colorMedia, 30%) !default;
+ $colorPerformance: #7b5294 !default;
+ $colorPerformanceSecondary: lighten($colorPerformance, 30%) !default;
+
+ // Defining font family
+ $fontDefault: Helvetica, Arial, sans-serif !default;
+ $fontHighlight: 'Roboto Condensed', Helvetica, sans-serif !default;
+ $fontIcon: 'icons' !default;
+
+ // Defining font sizes
+ $fontSmall: 13px !default;
+ $fontBase: 16px !default;
+ $fontMedium: 20px !default;
+ $fontLarge: 26px !default;
+ $fontXLarge: 42px !default;
+ $fontXXLarge: 68px !default;
+ $fontHuge: 110px !default;
+
+ // Defining baseline line height
+ $lineHeight: 26px !default;
+
+ // Defining animation easings
+ $animationEasing: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
+
+ // Defining sidebar stuff
+ $sidebarWidth: 280px !default;
+
+
+/*========== FUNCTIONS ==========*/
+
+ @function leading($size, $context: $lineHeight) {
+ @return $context / $size + em;
+ }
+
+
+/*========== MIXINS ==========*/
+
+ @mixin media-query($media-query) {
+ @if $media-query == small {
+ @media only screen and (max-width: $medium - 1) { @content; }
+ }
+
+ @if $media-query == medium {
+ @media only screen and (min-width: $medium) { @content; }
+ }
+
+ @if $media-query == medium-only {
+ @media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
+ }
+
+ @if $media-query == wide {
+ @media only screen and (min-width: $wide) { @content; }
+ }
+
+ @if $media-query == huge {
+ @media only screen and (min-width: $huge) { @content; }
+ }
+ }
+
+ // Just some helpers...
+ @mixin small-only { @include media-query(small) { @content }; }
+ @mixin medium { @include media-query(medium) { @content }; }
+ @mixin medium-only { @include media-query(medium-only) { @content }; }
+ @mixin wide { @include media-query(wide) { @content }; }
+ @mixin huge { @include media-query(huge) { @content }; }
+
+ // Mixin to constrain elements
+ @mixin container($isRelative: false) {
+ box-sizing: content-box;
+
+ @if $isRelative {
+ position: relative;
+ }
+
+ padding-left: 5%;
+ padding-right: 5%;
+ margin-left: auto;
+ margin-right: auto;
+
+
+ @include medium {
+ padding-left: 4.8%;
+ padding-right: 4.8%;
+ max-width: $mediumContainer;
+ }
+
+ @include wide {
+ padding-left: 4.4%;
+ padding-right: 4.4%;
+ max-width: $wideContainer;
+ }
+ }
+
+
+
+ // Mixin to show a baseline grid
+ // only visible when body has 'debug' class
+ @mixin baseline-grid() {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ z-index: 9;
+
+ display: none;
+ background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.15) 100%);
+
+ background-size: 100% 26px;
+ }
+
+ &.debug::after {
+ display: block;
+ pointer-events: none;
+ }
+ }
+
+ // Mixins simply to store CSS rules
+ @mixin rule--small {
+ font-size: $fontSmall;
+ line-height: 2.0000em; /* 26px */
+ padding-top: 2.0000em;
+ padding-bottom: 0;
+ }
+
+ @mixin rule--base {
+ font-size: $fontBase;
+ line-height: 1.6250em; /* 26px */
+ padding-top: 1.6250em;
+ padding-bottom: 0;
+ }
+
+ @mixin rule--medium {
+ font-size: $fontMedium;
+ font-weight: 300;
+ line-height: 1.3000em; /* 26px */
+ padding-top: 1.3000em;
+ padding-bottom: 0;
+ }
+
+ @mixin rule--large {
+ font-family: $fontHighlight;
+ font-size: $fontLarge;
+ font-weight: 300;
+ line-height: 1.0000em; /* 26px */
+ padding-top: 1.0000em;
+ padding-bottom: 0;
+ }
+
+ @mixin rule--xlarge {
+ font-family: $fontHighlight;
+ font-size: $fontXLarge;
+ font-weight: 300;
+ line-height: 1.2381em; /* 52px */
+ padding-top: 0.6190em;
+ padding-bottom: 0;
+ }
+
+ @mixin rule--xxlarge {
+ font-family: $fontHighlight;
+ font-size: $fontXXLarge;
+ font-weight: 300;
+ line-height: 1.1471em; /* 78px */
+ padding-top: 0.3824em;
+ padding-bottom: 0;
+ }
+
+ @mixin rule--huge {
+ font-family: $fontHighlight;
+ font-size: $fontHuge;
+ font-weight: 300;
+ line-height: 1.19em; /* 130px */
+ padding-top: 0.2364em;
+ padding-bottom: 0;
+ }
+
+
+
+ // Mixins to determine which rule to use at which breakpoint
+ @mixin type--small($isFromMixin: false) {
+ @include rule--small;
+ }
+
+ @mixin type--base($isFromMixin: false) {
+ @include rule--base;
+ }
+
+ @mixin type--medium($isFromMixin: false) {
+ @if $isFromMixin == false {
+ @include type--base(true);
+ @include wide {
+ @include rule--medium;
+ }
+ }
+ @else {
+ @include rule--medium;
+ }
+ }
+
+ @mixin type--large($isFromMixin: false) {
+ @if $isFromMixin == false {
+ @include type--medium(true);
+ @include wide {
+ @include rule--large;
+ }
+ }
+ @else {
+ @include rule--large;
+ }
+ }
+
+ @mixin type--xlarge($isFromMixin: false) {
+ @if $isFromMixin == false {
+ @include type--large(true);
+ @include wide {
+ @include rule--xlarge;
+ }
+ }
+ @else {
+ @include rule--xlarge;
+ }
+ }
+
+ @mixin type--xxlarge($isFromMixin: false) {
+ @if $isFromMixin == false {
+ @include type--xlarge(true);
+ @include wide {
+ @include rule--xxlarge;
+ }
+ }
+ @else {
+ @include rule--xxlarge;
+ }
+ }
+
+ @mixin type--huge($isFromMixin: false) {
+ @if $isFromMixin == false {
+ @include type--xxlarge(true);
+ @include wide {
+ @include rule--huge;
+ }
+ }
+ @else {
+ @include rule--huge;
+ }
+ }
+
+
+ // LISTS
+ @mixin bullet-type($bullet, $icon: false) {
+ &::before {
+ @if $icon {
+ font-family: $fontIcon;
+ @extend .#{$icon}::before;
+ font-size: $fontSmall;
+ }
+ @else {
+ content: $bullet;
+ font-family: $fontHighlight;
+ }
+
+ display: block;
+ font-weight: 400;
+ position: absolute;
+ top: 0;
+ left: 0;
+ line-height: $lineHeight;
+
+ }
+ }
+
+ @mixin numbered-list() {
+ &::before {
+ counter-increment: list;
+ content: '0' counter(list);
+ color: inherit;
+ font-weight: 400;
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ }
+ }
+
+ // Mixin to create links
+ @mixin style-cta($textColor, $linkIcon: false) {
+ font-family: $fontHighlight;
+ color: $textColor;
+ font-weight: 400;
+ display: inline-block;
+ line-height: 1;
+
+ &:hover {
+ color: $colorGrayDark;
+ }
+
+ @if $linkIcon {
+ text-decoration: none;
+ &::before {
+ display: inline-block;
+ padding-right: 10px;
+ font-family: $fontIcon;
+ line-height: ($lineHeight) - 1; // remove 1px from line-height to fix baseline alignment
+ font-size: $fontSmall;
+ content: $linkIcon;
+ }
+ }
+ }
+
+ // Mixin to create highlight modules
+ @mixin highlight-symbol($verticalOffset: 0, $horizontalOffset: 45px, $fontSize: 130px) {
+ position: relative;
+
+ &::before {
+ display: none;
+
+ @include medium {
+ display: block;
+ position: absolute;
+ top: 106px;
+ right: $horizontalOffset;
+
+ font-family: $fontIcon;
+ font-size: $fontSize;
+ line-height: 1px;
+ text-align: center;
+ height: 100%;
+ width: $mediumColWidth;
+ color: #ffffff;
+ }
+
+ .highlight-module--left & {
+ right: auto;
+ left: $horizontalOffset;
+ }
+
+ @include wide {
+ top: 134px;
+ width: $wideColWidth;
+ font-size: $fontSize + 50;
+
+ .highlight-module--large & {
+ font-size: $fontSize + 300;
+ }
+ }
+ }
+ }
+
+ // Grid CSS rules
+ @mixin rule--col($mediaQuery) {
+ @if $mediaQuery == medium {
+ float: left;
+ margin-right: $mediumGutterWidth;
+ }
+
+ @if $mediaQuery == wide {
+ float: left;
+ margin-right: $wideGutterWidth;
+ }
+ }
diff --git a/lib/generators/webstarterkit/web/styles/components/components.scss b/lib/generators/webstarterkit/web/styles/components/components.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8c68f8aa2ca2b60146dd7e40affa6816f12098dc
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/components/components.scss
@@ -0,0 +1,56 @@
+/**
+*
+* Main Stylesheet For Visual Style Guide
+*
+**/
+
+@import '_utils';
+@import '_normalize';
+@import '_global';
+
+// Icons - Leave it here to otherfiles can extend if needed
+@import '_components/_icons';
+
+// Color Palette
+@import '_palette';
+
+// Modules
+@import '_modules/_highlight';
+@import '_modules/_editorial-header';
+@import '_modules/_summary-header';
+@import '_modules/_related-guides';
+@import '_modules/_in-this-guide';
+@import '_modules/_articles-section';
+@import '_modules/_guides-section';
+@import '_modules/_page-header';
+@import '_modules/_featured-section';
+@import '_modules/_featured-spotlight';
+@import '_modules/_quote';
+@import '_modules/_article-nav';
+@import '_modules/_did-you-know';
+@import '_modules/_toc';
+@import '_modules/_next-lessons';
+
+// Components
+@import '_components/_grid';
+@import '_components/_typography';
+@import '_components/_button';
+@import '_components/_list';
+@import '_components/_link';
+@import '_components/_table';
+@import '_components/_media';
+@import '_components/_breadcrumb';
+@import '_components/_subsection-title';
+@import '_components/_articles-list';
+@import '_components/_guides-list';
+@import '_components/_icon-circle';
+
+// Themed styles
+@import '_themed';
+
+// Pages
+@import '_pages/_styleguide';
+@import '_pages/_page-resources';
+
+// Make sure this is last to override anything else :)
+@import '_helper';
diff --git a/lib/generators/webstarterkit/web/styles/main.scss b/lib/generators/webstarterkit/web/styles/main.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f452b0cd178d7c13e317886e84185ceb8fdfe486
--- /dev/null
+++ b/lib/generators/webstarterkit/web/styles/main.scss
@@ -0,0 +1,366 @@
+/*
+ * Web Starter Kit
+ *
+ * Multi-screen layout styles for your page. Brought to you by the
+ * Web Starter Kit team.
+ *
+ */
+@import '_h5bp';
+
+/*
+ * Visual Style Guide styles
+ * Remove if you prefer to use a CSS library, like Bootstrap
+ */
+@import 'components/components';
+
+html,
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ position: relative;
+ font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
+ font-weight: 300;
+ background-color: #fff;
+ box-sizing: border-box;
+ min-height: 100%;
+}
+
+body.open {
+ overflow: hidden;
+}
+
+.app-bar {
+ display: block;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: #4285f4;
+ overflow: hidden;
+ z-index: 1;
+}
+
+.app-bar-container {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ height: 60px;
+ position: relative;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ margin: 0 auto;
+}
+
+.app-bar.open,
+.app-bar.open ~ main {
+ -webkit-transform: translate(250px, 0);
+ transform: translate(250px, 0);
+}
+
+.app-bar .logo {
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ font-size: 2em;
+ line-height: 60px;
+ margin: 0 16px;
+ padding: 0;
+ color: #fefefe;
+ float: none;
+ max-width: none;
+ font-weight: 300;
+ display: initial;
+}
+
+.app-bar .logo a {
+ text-decoration: none;
+ color: inherit;
+ font-weight: normal;
+}
+
+.app-bar-actions {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ z-index: 2;
+}
+
+.app-bar button {
+ width: 60px;
+ height: 60px;
+ background-image: none;
+ background-color: transparent;
+ border: none;
+ padding: 0;
+ display: inline-block;
+ -webkit-transition: background-color 0.2s ease-out;
+ transition: background-color 0.2s ease-out;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.app-bar button img {
+ height: 24px;
+ width: 24px;
+}
+
+.app-bar button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.app-bar button:focus {
+ background-color: rgba(255, 255, 255, 0.2);
+ outline: 0;
+}
+
+.app-bar button:active {
+ background-color: rgba(255, 255, 255, 0.4);
+}
+
+.promote-layer {
+ /*
+ This may promote the layer to a composited
+ layer.
+
+ Replace with will-change when available
+
+ #perfmatters
+ */
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.base,
+p,
+ul,
+ol {
+ font-size: 19px;
+}
+
+.navdrawer-container {
+ z-index: 1;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 250px;
+ height: 100%;
+ background-color: #3367D6;
+ color: #fefefe;
+ -webkit-transform: translate(-250px, 0);
+ transform: translate(-250px, 0);
+ overflow-y: auto;
+}
+
+.navdrawer-container.open {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+
+.app-bar,
+.navdrawer-container.opened,
+main {
+ -webkit-transition: -webkit-transform 0.3s ease-out;
+ transition: transform 0.3s ease-out;
+}
+
+.navdrawer-container h4,
+.navdrawer-container ul li a {
+ height: 60px;
+ padding: 17px 20px;
+ line-height: 1.4;
+}
+
+.navdrawer-container h4 {
+ background-color: white;
+ color: #3367D6;
+}
+
+.navdrawer-container ul {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+
+.navdrawer-container ul li a {
+ display: block;
+ text-decoration: none;
+ color: white;
+ -webkit-transition: background-color 0.2s ease-out;
+ transition: background-color 0.2s ease-out;
+ white-space: nowrap;
+}
+
+.navdrawer-container ul li {
+ border-bottom-style: solid;
+ border-width: 1px;
+ border-color: white;
+ padding: 0;
+}
+
+.navdrawer-container ul li::before {
+ content: none;
+}
+
+.navdrawer-container ul li a:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+.navdrawer-container ul li a:focus {
+ background-color: rgba(255, 255, 255, 0.3);
+ outline: 0;
+}
+
+.navdrawer-container ul li a:active {
+ background-color: rgba(255, 255, 255, 0.4);
+}
+
+main {
+ margin: 0 auto;
+ /* Height of the header */
+ padding: 60px 16px 16px 16px;
+ min-height: 100%;
+}
+
+/** Larger Screens - desktops and tablets **/
+@media all and (min-width: 990px) {
+ .app-bar {
+ position: relative;
+ }
+
+ .app-bar.open,
+ .app-bar.open ~ main {
+ -webkit-transform: translate(0px, 0);
+ transform: translate(0px, 0);
+ }
+
+ .app-bar-container {
+ display: block;
+ height: 130px;
+ max-width: 864px;
+ padding: 0 16px;
+ box-sizing: border-box;
+ background-color: #4285f4;
+ }
+
+ .app-bar .logo {
+ float: left;
+ margin: 0;
+ padding: 0;
+ line-height: 130px;
+ font-size: 46px;
+ }
+
+ .app-bar-actions {
+ float: right;
+ }
+
+ .app-bar::after {
+ content: ' ';
+ display: block;
+ height: 0;
+ overflow: hidden;
+ clear: both;
+ }
+
+ button.menu {
+ display: none;
+ }
+
+ .navdrawer-container {
+ position: relative;
+ width: 100%;
+ height: auto;
+ margin-top: 0;
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+ -webkit-transition: none;
+ transition: none;
+ overflow-y: auto;
+ }
+
+ .navdrawer-container h4 {
+ display: none;
+ }
+
+ .navdrawer-container ul {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ max-width: 864px;
+ margin: 0 auto;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+
+ .navdrawer-container ul li {
+ border: none;
+ }
+
+ main {
+ max-width: 864px;
+ padding-top: 0;
+ min-height: initial;
+ }
+
+ body {
+ overflow-y: scroll;
+ }
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ font-style: normal;
+ font-weight: 300;
+ src: url(/fonts/RobotoCondensed-Light.eot);
+ src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(/fonts/RobotoCondensed-Light.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Light.woff) format('woff');
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ font-style: normal;
+ font-weight: 400;
+ src: url(/fonts/RobotoCondensed-Regular.eot);
+ src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(/fonts/RobotoCondensed-Regular.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Regular.woff) format('woff');
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ font-style: normal;
+ font-weight: 700;
+ src: url(/fonts/RobotoCondensed-Bold.eot);
+ src: local('Roboto Condensed Regular'), local('RobotoCondensed-Bold'), url(/fonts/RobotoCondensed-Bold.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Bold.woff) format('woff');
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ font-style: italic;
+ font-weight: 300;
+ src: url(/fonts/RobotoCondensed-LightItalic.eot);
+ src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'), url(/fonts/RobotoCondensed-LightItalic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-LightItalic.woff) format('woff');
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ font-style: italic;
+ font-weight: 400;
+ src: url(/fonts/RobotoCondensed-Italic.eot);
+ src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url(/fonts/RobotoCondensed-Italic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Italic.woff) format('woff');
+}
+
+@font-face {
+ font-family: 'Roboto Condensed';
+ font-style: italic;
+ font-weight: 700;
+ src: url(/fonts/RobotoCondensed-BoldItalic.eot);
+ src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'), url(/fonts/RobotoCondensed-BoldItalic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-BoldItalic.woff) format('woff');
+}