diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..4ed6a7d --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,16 @@ + +# Scope + +- [] Documentation +- [] Proposed design change + +# Steps Completed + +- [] Exported new compiled design change +- [] Reviewed documentation for changes + +# Previewed Pages + +Please update this list if you add new pages and please fill in the tokens in the URL(s) below. + +- [] [Homepage with Sidebar](http://htmlpreview.github.io/?https://github.com/[YOUR USER ID]/nerdstein-design-library/blob/[YOUR BRANCH]/html/patterns/04-pages-01-sidebar-sidebar/04-pages-01-sidebar-sidebar.html) \ No newline at end of file diff --git a/design-library/config/config.yml b/design-library/config/config.yml index ded3d41..42035ff 100644 --- a/design-library/config/config.yml +++ b/design-library/config/config.yml @@ -15,7 +15,7 @@ patternStates: - complete styleGuideExcludes: '' cacheBusterOn: 'true' -exportDir: export +exportDir: ../html publicDir: public sourceDir: source defaultPattern: all diff --git a/design-library/gulpfile.js b/design-library/gulpfile.js index 6fd5875..7ece9be 100644 --- a/design-library/gulpfile.js +++ b/design-library/gulpfile.js @@ -71,6 +71,14 @@ gulp.task('patternlab', function () { ])); }); +// Start the pattern lab server and watch for changes +gulp.task('export-patternlab', function () { + return gulp.src('', {read: false}) + .pipe(shell([ + 'php core/console --export' + ])); +}); + // Keep an eye on Sass files for changes and only lint changed files // This prevents Sass error reporting from contributes Sass files from other projects // Also speeds things up. @@ -90,4 +98,4 @@ function lintFile(file) { .pipe(sassLint.format()); } -gulp.task('default', ['patternlab', 'sass', 'watch']); +gulp.task('default', ['export-patternlab', 'patternlab', 'sass', 'watch']); diff --git a/html/.gitkeep b/html/.gitkeep new file mode 100644 index 0000000..41d91b6 --- /dev/null +++ b/html/.gitkeep @@ -0,0 +1 @@ +Holding file for public/ directory \ No newline at end of file diff --git a/html/css/pattern-scaffolding.css b/html/css/pattern-scaffolding.css new file mode 100644 index 0000000..2a69457 --- /dev/null +++ b/html/css/pattern-scaffolding.css @@ -0,0 +1,54 @@ +/** + * This stylesheet is for styles you want to include only when displaying demo + * styles for grids, animations, color swatches, etc. + * These styles will not be your production CSS. + */ +#sg-patterns { + -webkit-box-sizing: border-box !important; + box-sizing: border-box !important; + max-width: 100%; + padding: 0 0.5em; +} + +.demo-animate { + background: #ddd; + padding: 1em; + margin-bottom: 1em; + text-align: center; + border-radius: 8px; + cursor: pointer; +} + +.sg-colors { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + list-style: none !important; + padding: 0 !important; + margin: 0 !important; +} +.sg-colors li { + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + padding: 0.3em; + margin: 0 0.5em 0.5em 0; + min-width: 5em; + max-width: 14em; + border: 1px solid #ddd; + border-radius: 8px; +} + +.sg-swatch { + display: block; + height: 4em; + margin-bottom: 0.3em; + border-radius: 5px; +} + +.sg-label { + font-size: 90%; + line-height: 1; +} diff --git a/html/css/style.css b/html/css/style.css new file mode 100644 index 0000000..ec16332 --- /dev/null +++ b/html/css/style.css @@ -0,0 +1 @@ +div.list-body a,h3.list-title a{font-weight:700}.highlight-title,.section-heading{font-family:Pavanam;background-color:#ED6300;padding:8px}div.list-body{font-size:18px;margin-bottom:40px}h3.list-title a{font-size:32px;color:#000;margin-bottom:20px}h3.list-title a:hover{color:#0CB022;text-decoration:none}img.list-image{max-width:300px}.highlight-title{color:#fff}.posted-on{color:#969696}.section-heading{color:#fff}.section-content{background-color:#fff;border:2px solid #EDEDED;margin-bottom:30px;font-size:16px}.section-content .ul .li{border-bottom:1px solid #ccc}.section-content .ul .li:last-child{border-bottom:none}.blog-tags{border-bottom:1px solid #ccc;margin-bottom:30px}.list-element{margin-top:15px;margin-bottom:15px}.list-element .list-element-body .list-element-image{float:left;clear:left;margin:0 15px 15px 0}.section p{margin:20px}.blog-list{padding-top:40px;padding-bottom:40px}.sidebar{clear:right;float:right;display:block;margin-left:50px;width:25%}.content{display:block;width:72%}body{overflow-x:hidden;font-family:'PT Sans';font-size:18px;background-color:#f8f8f8;color:#4c4c4c}body a{color:#0C0D0D}body a :hover{color:#424242}body a :visited{text-decoration:none} \ No newline at end of file diff --git a/html/favicon.ico b/html/favicon.ico new file mode 100644 index 0000000..eee4aa7 Binary files /dev/null and b/html/favicon.ico differ diff --git a/html/images/favicon_16x16.jpg b/html/images/favicon_16x16.jpg new file mode 100644 index 0000000..05e7449 Binary files /dev/null and b/html/images/favicon_16x16.jpg differ diff --git a/html/images/favicon_32x32.jpg b/html/images/favicon_32x32.jpg new file mode 100644 index 0000000..0970980 Binary files /dev/null and b/html/images/favicon_32x32.jpg differ diff --git a/html/images/fpo_16x9.png b/html/images/fpo_16x9.png new file mode 100644 index 0000000..013949d Binary files /dev/null and b/html/images/fpo_16x9.png differ diff --git a/html/images/fpo_4x3.png b/html/images/fpo_4x3.png new file mode 100644 index 0000000..7ff84b8 Binary files /dev/null and b/html/images/fpo_4x3.png differ diff --git a/html/images/fpo_avatar.png b/html/images/fpo_avatar.png new file mode 100644 index 0000000..e666a40 Binary files /dev/null and b/html/images/fpo_avatar.png differ diff --git a/html/images/fpo_square.png b/html/images/fpo_square.png new file mode 100644 index 0000000..ce8a1e4 Binary files /dev/null and b/html/images/fpo_square.png differ diff --git a/html/images/logo.png b/html/images/logo.png new file mode 100644 index 0000000..93db733 Binary files /dev/null and b/html/images/logo.png differ diff --git a/html/images/sample/landscape-16x9-mountains.jpg b/html/images/sample/landscape-16x9-mountains.jpg new file mode 100644 index 0000000..3c0d92b Binary files /dev/null and b/html/images/sample/landscape-16x9-mountains.jpg differ diff --git a/html/images/sample/thumb-square-fire.jpg b/html/images/sample/thumb-square-fire.jpg new file mode 100644 index 0000000..20a5c5e Binary files /dev/null and b/html/images/sample/thumb-square-fire.jpg differ diff --git a/html/images/sample/thumb-square-gear.jpg b/html/images/sample/thumb-square-gear.jpg new file mode 100644 index 0000000..052a52a Binary files /dev/null and b/html/images/sample/thumb-square-gear.jpg differ diff --git a/html/images/sample/thumb-square-ivy.jpg b/html/images/sample/thumb-square-ivy.jpg new file mode 100644 index 0000000..64183a7 Binary files /dev/null and b/html/images/sample/thumb-square-ivy.jpg differ diff --git a/html/images/sample/thumb-square-river.jpg b/html/images/sample/thumb-square-river.jpg new file mode 100644 index 0000000..f190186 Binary files /dev/null and b/html/images/sample/thumb-square-river.jpg differ diff --git a/html/images/sample/thumb-square-yosemite.jpg b/html/images/sample/thumb-square-yosemite.jpg new file mode 100644 index 0000000..8f388d7 Binary files /dev/null and b/html/images/sample/thumb-square-yosemite.jpg differ diff --git a/html/images/sample/tout-4x3-climber.jpg b/html/images/sample/tout-4x3-climber.jpg new file mode 100644 index 0000000..1348cd7 Binary files /dev/null and b/html/images/sample/tout-4x3-climber.jpg differ diff --git a/html/images/sample/tout-4x3-climbers.jpg b/html/images/sample/tout-4x3-climbers.jpg new file mode 100644 index 0000000..d8461a1 Binary files /dev/null and b/html/images/sample/tout-4x3-climbers.jpg differ diff --git a/html/images/sample/tout-4x3-stream.jpg b/html/images/sample/tout-4x3-stream.jpg new file mode 100644 index 0000000..8e091d1 Binary files /dev/null and b/html/images/sample/tout-4x3-stream.jpg differ diff --git a/html/js/.gitkeep b/html/js/.gitkeep new file mode 100644 index 0000000..67291bb --- /dev/null +++ b/html/js/.gitkeep @@ -0,0 +1 @@ +keeping this dir around \ No newline at end of file diff --git a/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html b/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html new file mode 100644 index 0000000..92f1f46 --- /dev/null +++ b/html/patterns/01-atoms-01-list-title-list-title/01-atoms-01-list-title-list-title.html @@ -0,0 +1,25 @@ + + + + Cloud Responsive Elastic Agile + + + + + + + + + + + + + + + +

Cloud Responsive Elastic Agile

+ + + + + diff --git a/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html b/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html new file mode 100644 index 0000000..f276f28 --- /dev/null +++ b/html/patterns/01-atoms-02-list-body-list-body/01-atoms-02-list-body-list-body.html @@ -0,0 +1,25 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
Models extensible e-services empower clicks-and-mortar, relationships scale B2B weblogs; content envisioneer, A-list: wireless. IntegrateAJAX-enabled: cultivate.
+ + + + + diff --git a/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html b/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html new file mode 100644 index 0000000..23698fd --- /dev/null +++ b/html/patterns/01-atoms-03-list-image-list-image/01-atoms-03-list-image-list-image.html @@ -0,0 +1,25 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + + + + + + + diff --git a/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html b/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html new file mode 100644 index 0000000..cf77025 --- /dev/null +++ b/html/patterns/01-atoms-04-blog-tag-blog-tag/01-atoms-04-blog-tag-blog-tag.html @@ -0,0 +1,25 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +CATEGORY 1 + + + + + diff --git a/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html b/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html new file mode 100644 index 0000000..f10b119 --- /dev/null +++ b/html/patterns/01-atoms-05-list-posted-on-list-posted-on/01-atoms-05-list-posted-on-list-posted-on.html @@ -0,0 +1,27 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+ Posted on January 5, 2017 +
+ + + + + diff --git a/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html b/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html new file mode 100644 index 0000000..f163907 --- /dev/null +++ b/html/patterns/01-atoms-06-section-heading-section-heading/01-atoms-06-section-heading-section-heading.html @@ -0,0 +1,27 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+ Categories +
+ + + + + diff --git a/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html b/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html new file mode 100644 index 0000000..2907093 --- /dev/null +++ b/html/patterns/01-atoms-07-section-content-section-content/01-atoms-07-section-content-section-content.html @@ -0,0 +1,27 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+
+ + + + + diff --git a/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html b/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html new file mode 100644 index 0000000..46a11b7 --- /dev/null +++ b/html/patterns/02-molecules-01-blog-tags-blog-tags/02-molecules-01-blog-tags-blog-tags.html @@ -0,0 +1,26 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+ Category 1 Category 2
+ + + + + diff --git a/html/patterns/02-molecules-02-list-element-list-element-1/02-molecules-02-list-element-list-element-1.html b/html/patterns/02-molecules-02-list-element-list-element-1/02-molecules-02-list-element-list-element-1.html new file mode 100644 index 0000000..3bfc4eb --- /dev/null +++ b/html/patterns/02-molecules-02-list-element-list-element-1/02-molecules-02-list-element-list-element-1.html @@ -0,0 +1,33 @@ + + + + The category manager enforces our risk appetites. + + + + + + + + + + + + + + + +
+
+ Cloud Drupal
+
+
+

The category manager enforces our risk appetites.

+ Posted on February 10, 2017 +
The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.
+
+ + + + + diff --git a/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html b/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html new file mode 100644 index 0000000..a635c91 --- /dev/null +++ b/html/patterns/02-molecules-02-list-element-list-element/02-molecules-02-list-element-list-element.html @@ -0,0 +1,31 @@ + + + + The category manager enforces our risk appetites. + + + + + + + + + + + + + + + +
+
+ Cloud Drupal
+

The category manager enforces our risk appetites.

+ Posted on January 5, 2017 +
The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.
+
+ + + + + diff --git a/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html b/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html new file mode 100644 index 0000000..61f372a --- /dev/null +++ b/html/patterns/02-molecules-03-section-section/02-molecules-03-section-section.html @@ -0,0 +1,30 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+
+ Categories +
+
+ + + + + diff --git a/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html b/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html new file mode 100644 index 0000000..a1ebdd9 --- /dev/null +++ b/html/patterns/03-organisms-01-blog-list-blog-list/03-organisms-01-blog-list-blog-list.html @@ -0,0 +1,46 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+
+
+ Cloud Drupal
+

The category manager enforces our risk appetites.

+ Posted on January 5, 2017 +
The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.
+
+
+ Security DevOps
+
+
+

Our improved focus on speed facilitates our next step.

+ Posted on March 19, 2017 +
Our dashboards conservatively strengthen the Chief IT Operations Catalyst. The senior support staff whiteboards our enterprise risk management.
+
+
+ Responsive Agile
+

The policy makers consistently showcase a stellar measurement.

+ Posted on June 25, 2017 +
Predictability, best practice and responsive design empower a bandwidth. The Chief Business Operations Officer learns a big-bang approach by leveraging value creations. The attackers re-content our consistencies; nevertheless the Global Chief Technical Futurist re-imagines the vital, cross-industry, pre-plans. The game changers incentivize our coordinated sales targets; nevertheless the profit-maximizing markets aggressively empower the team players. To continue our growth, we must table go-to-market consistencies. In the same time, the human resources deliver a ROE.
+
+ + + + + diff --git a/html/patterns/04-pages-01-sidebar-sidebar/04-pages-01-sidebar-sidebar.html b/html/patterns/04-pages-01-sidebar-sidebar/04-pages-01-sidebar-sidebar.html new file mode 100644 index 0000000..58d7a13 --- /dev/null +++ b/html/patterns/04-pages-01-sidebar-sidebar/04-pages-01-sidebar-sidebar.html @@ -0,0 +1,59 @@ + + + + Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu. + + + + + + + + + + + + + + + +
+
+
+ Categories +
+
+
+ Sign Up +
+

Subscribe to our RSS feed today and be the first to get new updates

+
+
+
+
+
+ Cloud Drupal
+

The category manager enforces our risk appetites.

+ Posted on January 5, 2017 +
The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.
+
+
+ Security DevOps
+
+
+

Our improved focus on speed facilitates our next step.

+ Posted on March 19, 2017 +
Our dashboards conservatively strengthen the Chief IT Operations Catalyst. The senior support staff whiteboards our enterprise risk management.
+
+
+ Responsive Agile
+

The policy makers consistently showcase a stellar measurement.

+ Posted on June 25, 2017 +
Predictability, best practice and responsive design empower a bandwidth. The Chief Business Operations Officer learns a big-bang approach by leveraging value creations. The attackers re-content our consistencies; nevertheless the Global Chief Technical Futurist re-imagines the vital, cross-industry, pre-plans. The game changers incentivize our coordinated sales targets; nevertheless the profit-maximizing markets aggressively empower the team players. To continue our growth, we must table go-to-market consistencies. In the same time, the human resources deliver a ROE.
+
+ + + + + diff --git a/readme.md b/readme.md index 2ff5c83..4fb445e 100644 --- a/readme.md +++ b/readme.md @@ -89,8 +89,12 @@ TODO - Capture any best practices learned about Twig usage Steps are run from the `design-library` directory on your local machine. * `gulp sass` - compiles all SCSS into CSS +* `php core/console --generate` - compiles Pattern Lab assets (please run Gulp separately) +* `php core/console --server` - loads built-in Pattern Lab server * `php core/console --server --with-watch` - loads built-in Pattern Lab server, compiles Pattern Lab assets as needed +* `php core/console --export` - generates an updated HTML prototype from your changes Alternatively, all of these tasks can be run automatically using the default gulp task. -* `gulp` - Start Pattern Lab server and watch for changes. Watch assets and recompile on changes. \ No newline at end of file +* `gulp` - Start Pattern Lab server and watch for changes. Watch assets and recompile on changes. +