Compile component and layout CSS as protocol-extra.css (Fixes #90) (#120

)
mozilla · May 25, 2018 · 518eee1 · 518eee1
1 parent 890d80e
commit 518eee1
Show file tree

Hide file tree

Showing 15 changed files with 124 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,25 +1,41 @@
-# 0.1.3
+# HEAD
+
+## Features
+* **css:** Compile protocol-extra.css bundle (#120)
+* **css:** Add modal organism (#118)
+* **css:** Add newsletter form and basic button (#112)
+* **docs:** Update home page (#113)
+* **css:** Add mozilla-protocol/assets package (#111)
+* **css:** Add billboard component (#105)
+* **css:** Add basic form elements (#104)
+* **css:** Add card molecule (#103)
+* **css:** Revise type scale, rename sizes (#102)
+* **css:** Add article and sidebar menu organisms and main/sidebar template (#86)
+* **css:** Clean up stubs, placeholders and Pebbles legacy bits (#81)
+* **css:** Add general link styles (#47)
+* **css:** Import the Color design tokens npm package (#48)
+* **css:** Add design tokens scss files to the protocol package (#48)
 
 ## Bug Fixes
 
-* **css:** Import the Color design tokens npm package
-* **css:** Add design tokens scss files to the protocol package
+* **gulp:** Stop concatenating Protocol JS modules (#115)
+* **gulp:** Remove dependency on gulp-util and cloudfour/gulp-tasks (#100)
 
 # 0.1.2
 
 ## Bug Fixes
 
-* **css:** Use relative paths in pre-compiled CSS.
+* **css:** Use relative paths in pre-compiled CSS (#66)
 
 # 0.1.1
 
 ## Bug Fixes
 
-* **css:** Images and fonts are 404 when imported via NPM.
+* **css:** Images and fonts are 404 when imported via NPM (#49, #50)
 
 ## Features
 
-* **scss:** Allow for custom media paths in SCSS.
+* **scss:** Allow for custom media paths in SCSS (#53)
 
 # 0.1.0
 

diff --git a/README.md b/README.md
@@ -14,6 +14,14 @@ npm install @mozilla-protocol/core --save
 
 Alternatively, you can also [download the latest release](https://github.com/mozilla/protocol/releases/latest) from GitHub.
 
+## Usage
+
+Once installed, the relevant CSS and JS files will be available in your project under `./mode_modules/@mozilla-protocol/core/`
+
+The core CSS is bundled as `protocol.css`. This contains styling for things such as basic elements and typography. Component and layout CSS is bundled as `protocol-extra.scss` for convenience.
+
+**Note**: The original source (scss) files are also included in the published package. You may want to consider compiling your own CSS to include only what you need for each page of your website, in order to further optimize for performance.
+
 ### Building from source
 
 To build Protocol from source including the documentatiion site, you can clone the repo from GitHub:

diff --git a/docs/README.md b/docs/README.md
@@ -21,6 +21,7 @@
 
 - [Getting Started](#getting-started)
   - [Installation](#installation)
+  - [Usage](#usage)
   - [Building from source](#building-from-source)
   - [Tasks](#tasks)
 - [Project Structure](#project-structure)
@@ -54,9 +55,15 @@ To use Protocol in your website you can install the core package directly from N
 npm install @mozilla-protocol/core --save
 ```
 
+Alternatively, you can also [download the latest release][releases] from GitHub.
+
+## Usage
+
 Once installed, the relevant CSS and JS files will be available in your project under `./mode_modules/@mozilla-protocol/core/`
 
-Alternatively, you can also [download the latest release][releases] from GitHub.
+The core CSS is bundled as `protocol.css`. This contains styling for things such as basic elements and typography. Component and layout CSS is bundled as `protocol-extra.scss` for convenience.
+
+**Note**: The original source (scss) files are also included in the published package. You may want to consider compiling your own CSS to include only what you need for each page of your website, in order to further optimize for performance.
 
 ## Building from source
 

diff --git a/gulp/config.js b/gulp/config.js
@@ -68,7 +68,10 @@ module.exports = {
     },
     sassCompile: {
         protocol: {
-            src: `${src}/sass/protocol/protocol.scss`,
+            src: [
+                `${src}/sass/protocol/protocol.scss`,
+                `${src}/sass/protocol/protocol-extra.scss`
+            ],
             dest: `${dest}/protocol/protocol/css/`
         },
         docs: {

diff --git a/src/assets/sass/demos/article.scss b/src/assets/sass/demos/article.scss
@@ -1,8 +1,10 @@
-// Protocol core
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Article demo
+
 @import '../protocol/includes/lib';
 @import '../docs/protocol';
-
-// Protocol components
-@import '../protocol/templates/main-with-sidebar';
-@import '../protocol/components/article';
-@import '../protocol/components/sidebar-menu';
+@import '../docs/protocol-extra';
diff --git a/src/assets/sass/demos/billboard.scss b/src/assets/sass/demos/billboard.scss
@@ -1,3 +1,10 @@
-// Protocol core
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Billboard demo
+
 @import '../protocol/includes/lib';
 @import '../docs/protocol';
+@import '../docs/protocol-extra';
diff --git a/src/assets/sass/demos/card.scss b/src/assets/sass/demos/card.scss
@@ -1,3 +1,10 @@
-// Protocol core
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Card layout demo
+
 @import '../protocol/includes/lib';
 @import '../docs/protocol';
+@import '../docs/protocol-extra';
diff --git a/src/assets/sass/demos/link-styles.scss b/src/assets/sass/demos/link-styles.scss
@@ -1,6 +1,13 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
 // Link styles demo
 
 @import '../protocol/includes/lib';
+@import '../docs/protocol';
+@import '../docs/protocol-extra';
 
 
 span[class^='link'],

diff --git a/src/assets/sass/demos/main-with-sidebar.scss b/src/assets/sass/demos/main-with-sidebar.scss
@@ -1,9 +1,13 @@
-// Protocol core
-@import '../protocol/includes/lib';
-@import '../protocol/protocol';
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Main with sidebar demo
 
-// Protocol components
-@import '../protocol/templates/main-with-sidebar';
+@import '../protocol/includes/lib';
+@import '../docs/protocol';
+@import '../docs/protocol-extra';
 
 
 .mzp-l-main,

diff --git a/src/assets/sass/demos/newsletter.scss b/src/assets/sass/demos/newsletter.scss
@@ -1,6 +1,13 @@
-// Protocol core
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Newsletter demo
+
 @import '../protocol/includes/lib';
 @import '../docs/protocol';
+@import '../docs/protocol-extra';
 
 .mzp-qa-newsletter-errors {
     .mzp-c-form-errors,

diff --git a/src/assets/sass/demos/type-scale.scss b/src/assets/sass/demos/type-scale.scss
@@ -1,7 +1,13 @@
-// Type scale demo
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Typescale demo
 
 @import '../protocol/includes/lib';
 @import '../docs/protocol';
+@import '../docs/protocol-extra';
 
 body {
     background: repeating-linear-gradient(transparent, transparent 3px, rgba(0, 255, 255, .2) 4px, transparent 4px, transparent 7px, rgba(0, 255, 255, .4) 8px);

diff --git a/src/assets/sass/docs/protocol-extra.scss b/src/assets/sass/docs/protocol-extra.scss
@@ -0,0 +1,8 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+$font-path:  '/assets/protocol/protocol/fonts';
+$image-path: '/assets/protocol/protocol/img';
+
+@import '../protocol/protocol-extra.scss';
diff --git a/src/assets/sass/docs/protocol.scss b/src/assets/sass/docs/protocol.scss
@@ -6,15 +6,3 @@ $font-path:  '/assets/protocol/protocol/fonts';
 $image-path: '/assets/protocol/protocol/img';
 
 @import '../protocol/protocol.scss';
-
-// Import all the templates and components.
-// We need the full monolith for the doc site; you wouldn't import everything here in practice.
-@import '../protocol/templates/card-layout';
-@import '../protocol/templates/main-with-sidebar';
-@import '../protocol/components/article';
-@import '../protocol/components/billboard';
-@import '../protocol/components/sidebar-menu';
-@import '../protocol/components/card';
-@import '../protocol/components/button';
-@import '../protocol/components/newsletter-form';
-@import '../protocol/components/modal';
diff --git a/src/assets/sass/protocol/protocol-extra.scss b/src/assets/sass/protocol/protocol-extra.scss
@@ -0,0 +1,18 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+
+// Default media paths can be overwritten globally.
+$font-path: '../fonts' !default;
+$image-path: '../img' !default;
+
+@import '../protocol/templates/card-layout';
+@import '../protocol/templates/main-with-sidebar';
+@import '../protocol/components/article';
+@import '../protocol/components/billboard';
+@import '../protocol/components/sidebar-menu';
+@import '../protocol/components/card';
+@import '../protocol/components/button';
+@import '../protocol/components/newsletter-form';
+@import '../protocol/components/modal';
diff --git a/src/templates/default.hbs b/src/templates/default.hbs
@@ -1,6 +1,7 @@
 {{#extend "blank" bodyclass=""}}
   {{#content "head" mode="append"}}
       <link rel="stylesheet" href="{{@root.baseurl}}/assets/docs/css/protocol.css">
+      <link rel="stylesheet" href="{{@root.baseurl}}/assets/docs/css/protocol-extra.css">
       <link rel="stylesheet" href="{{@root.baseurl}}/assets/docs/css/site.css">
       <link rel="stylesheet" href="{{@root.baseurl}}/assets/docs/css/prism.css">
   {{/content}}