diff --git a/.gitignore b/.gitignore
index 813c068..dff76e5 100755
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ _site/
node_modules/*
*.DS_Store
package-lock.json
+.jekyll-cache
\ No newline at end of file
diff --git a/README.md b/README.md
index d83e639..b4c116b 100755
--- a/README.md
+++ b/README.md
@@ -3,3 +3,85 @@
This is where we catalogue our design work at DreamHost, using the latest release of DreamHost.css.
Our documentation is built on Jekyll, and is viewable at http://dreamhost.design
+
+
+## New .design Eclipse
+Uses node ver 8.9.1
+Build on Jekyll x Liquid Templating + Gulp
+
+## Running Locally
+1. Ensure your using node ver 8.9.1
+2. Install Ruby and Jekyll if you don't have it yet
+3. (Windows Only) Be sure to add a .bat extension on gulp.js line 88 should be
+`const jekyll = child.spawn('jekyll.bat', ['build',`
+
+4. `npm install`
+5. (Windows Only) Comment out line 109 in node_modules\engine.io\build\socket.js
+`// this.pingIntervalTimer.refresh();`
+6. `npm run dev`
+7. open [http://localhost:7676] with your browser.
+
+
+## Structure
+New .design site has detached dreamhost-css located in `assets\dreamhost-css` it doesn't read from node_modules import. In this way we can edit the styles in dreamhost-css to adapt the new look of feel of Eclipse Style Guide. Instead of being overriden in every npm install with the old one.
+
+### Stylesheet
+can be found in `assets\_scss_new` and `assets\css_new`
+I've added command in gulp.js to just compile both the new and old per `npm run dev` execution
+Please use .scss file to alter the styling not the css file.
+
+Feel free to alter the included detached dreamhost-css .scss `assets\dreamhost-css\src\scss` if you see it fit to do so.
+
+Some values needs to been modified to fit the new design look and feel.
+
+### New Pages in development
+can be found in locally in `new` live link is [http://dreamhost.design/new/]
+
+### Includes (navigation, footer, head,)
+can be found in `_includes`
+the in-development ones are labeled with `_new` suffix before the file extension .html
+Example:
+```
+_nav.html < this is the old one
+_nav_new.html < this is the new one, alter this one to change the footer in /new/
+```
+Please add a new navigation if the page is ready for review or being worked on.
+This is one of the ways to check if a page is being coded.
+
+
+### Layouts
+can be found in `_layouts`
+the in-development ones are labeled with `_new` suffix before the file extension .html
+Example:
+```
+app.html < this is the old one
+app_new.html < this is the new one, alter this one to change the app html in /new/
+```
+
+### Lading page
+Is build as a layout and can be found also in `_layouts/landing_new`
+It's styling is in `assets/_scss_new/style.css`
+
+## Images and Downloads (for Illustrations, Icons, Logo, Mascot etc..)
+New images and downloads folders are labeled with _new suffix.
+
+Example:
+```
+Path: assets\images\
+---
+mascot < this is the old one
+mascot_new < this is the new one
+```
+
+Same method applies for downloads folder.
+
+Example:
+```
+Path: assets\downloads\
+---
+mascot < this is the old one
+mascot_new < this is the new one
+```
+
+### Additional Memes
+added _data folder for json storage.
diff --git a/_data/colors.json b/_data/colors.json
new file mode 100644
index 0000000..999262e
--- /dev/null
+++ b/_data/colors.json
@@ -0,0 +1,104 @@
+[{
+ "primary":[
+ {
+ "name": "Abyss",
+ "hex": "#000000",
+ "text-color": "white",
+ "bg": "bg-black"
+ },
+ {
+ "name": "Oblivion",
+ "hex": "#111111",
+ "text-color": "white",
+ "bg": "bg-c-b900"
+ },
+ {
+ "name": "Midnight",
+ "hex": "#071C26",
+ "text-color": "white",
+ "bg": "bg-c-b700"
+ },
+ {
+ "name": "White",
+ "hex": "#ffffff",
+ "text-color": "black",
+ "bg": "bg-c-w100"
+ },
+ {
+ "name": "Azure",
+ "hex": "#0073EC",
+ "text-color": "white",
+ "bg": "bg-c-b300"
+ },
+ {
+ "name": "Prince",
+ "hex": "#A644E5",
+ "text-color": "white",
+ "bg": "bg-c-p300"
+ }
+ ],
+ "secondary": [
+ {
+ "name": "Turtle",
+ "hex": "#00CAAA",
+ "text-color": "black",
+ "bg": "bg-c-t300"
+
+ },
+ {
+ "name": "Coral",
+ "hex": "#FF4A48",
+ "text-color": "black",
+ "bg": "bg-c-r300"
+
+ },
+ {
+ "name": "Tangerine",
+ "hex": "#F59D00",
+ "text-color": "black",
+ "bg": "bg-c-o300"
+ },
+ {
+ "name": "Sunflower",
+ "hex": "#FFDA00",
+ "text-color": "black",
+ "bg": "bg-c-y300"
+ }
+ ],
+ "grayscale": [
+ {
+ "name": "Off White",
+ "hex": "#F4F6F9",
+ "text-color": "black",
+ "bg": "bg-c-g100"
+ },
+ {
+ "name": "Smoke",
+ "hex": "#E0E4E8",
+ "text-color": "black",
+ "bg": "bg-c-g200"
+ },
+ {
+
+ "name": "Cloudy",
+ "hex": "#AFBFC9",
+ "text-color": "black",
+ "bg": "bg-c-g300"
+ },
+ {
+
+ "name": "Galactic",
+ "hex": "#677983",
+ "text-color": "white",
+ "bg": "bg-c-g400"
+ },
+ {
+
+ "name": "Metal",
+ "hex": "#434F58",
+ "text-color": "white",
+ "bg": "bg-c-g500"
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/_data/colors_paring.json b/_data/colors_paring.json
new file mode 100644
index 0000000..005af19
--- /dev/null
+++ b/_data/colors_paring.json
@@ -0,0 +1,109 @@
+[
+ {
+ "bg_name": "White Background",
+ "bg_color": "bg-c-w300",
+ "treatment": "Neutral",
+ "base_color": "Abyss",
+ "font_color": "t-black",
+ "emphasis": [
+ {
+ "color_name": "Azure",
+ "font_color": "t-c-b300"
+ },
+ {
+ "color_name": "Prince",
+ "font_color": "t-c-p300"
+ },
+ {
+ "color_name": "Turtle",
+ "font_color": "t-c-t300"
+ }
+ ],
+ "error": [
+ {
+ "heading":"Error",
+ "color_name": "Coral",
+ "font_color": "t-c-r300"
+ }
+ ]
+ },
+
+ {
+ "bg_name": "Off-White Background",
+ "bg_color": "bg-c-g100",
+ "treatment": "Neutral",
+ "base_color": "Abyss",
+ "font_color": "t-black",
+ "emphasis": [
+ {
+ "color_name": "Azure",
+ "font_color": "t-c-b300"
+ },
+ {
+ "color_name": "Prince",
+ "font_color": "t-c-p300"
+ },
+ {
+ "color_name": "Turtle",
+ "font_color": "t-c-t300"
+ }
+ ],
+ "error": [
+ {
+ "heading":"Error",
+ "color_name": "Coral",
+ "font_color": "t-c-r300"
+ }
+ ]
+ },
+
+ {
+ "bg_name": "Blue Background",
+ "bg_color": "bg-c-b300",
+ "treatment": "Neutral",
+ "base_color": "Abyss",
+ "font_color": "t-c-w100",
+ "emphasis": [
+ {
+ "color_name": "White",
+ "font_color": "t-c-w100"
+ }
+ ],
+ "error": [
+ {
+ "heading":"Do not use this background for error text",
+ "color_name": null,
+ "font_color": "t-c-w100"
+ }
+ ]
+ },
+
+ {
+ "bg_name": "Black Background",
+ "bg_color": "bg-black",
+ "treatment": "Neutral",
+ "base_color": "Abyss",
+ "font_color": "t-c-w100",
+ "emphasis": [
+ {
+ "color_name": "Azure",
+ "font_color": "t-c-b300"
+ },
+ {
+ "color_name": "Prince",
+ "font_color": "t-c-p300"
+ },
+ {
+ "color_name": "Turtle",
+ "font_color": "t-c-t300"
+ }
+ ],
+ "error": [
+ {
+ "heading":"Error",
+ "color_name": "Coral",
+ "font_color": "t-c-r300"
+ }
+ ]
+ }
+]
diff --git a/_data/icons.json b/_data/icons.json
new file mode 100644
index 0000000..80165bd
--- /dev/null
+++ b/_data/icons.json
@@ -0,0 +1,115 @@
+[
+{
+
+"name": "Academy",
+"url": "academy.svg"
+},
+{
+"name": "Build",
+"url": "build.svg"
+},
+{
+"name": "Business",
+"url": "business.svg"
+},
+{
+"name": "Cloud Hosting",
+"url": "cloud-hosting.svg"
+},
+{
+"name": "Custom Web Design",
+"url": "custom-web-design.svg"
+},
+{
+"name": "Dedicate Hosting",
+"url": "dedicated-hosting.svg"
+},
+{
+"name": "Development",
+"url": "development.svg"
+},
+{
+"name": "",
+"url": "dream-shop.svg"
+},
+{
+"name": "Email Hosting",
+"url": "email-hosting.svg"
+},
+{
+"name": "Enterprise",
+"url": "enterprise.svg"
+},
+{
+"name": "Grow",
+"url": "grow.svg"
+},
+{
+"name": "Managed Wordpress",
+"url": "managed-wordpress.svg"
+},
+{
+"name": "Management",
+"url": "management-category.svg"
+},
+{
+"name": "Marketing",
+"url": "marketing-category.svg"
+},
+{
+"name": "On Demand",
+"url": "on-demand.svg"
+},
+{
+"name": "Promote",
+"url": "promote.svg"
+},
+{
+"name": "Retainer",
+"url": "retainer.svg"
+},
+{
+"name": "SEO",
+"url": "seo.svg"
+},
+{
+"name": "Shared Hosting",
+"url": "shared-hosting.svg"
+},
+{
+"name": "Shared Wordpress",
+"url": "shared-wordpress.svg"
+},
+{
+"name": "Social Marketing",
+"url": "social-marketing.svg"
+},
+{
+"name": "Start Up",
+"url": "start-up.svg"
+},
+{
+"name": "VPS Hosting",
+"url": "vps-hosting.svg"
+},
+{
+"name": "VPS Wordpress",
+"url": "vps-wordpress.svg"
+},
+{
+"name": "VPS",
+"url": "vps.svg"
+},
+{
+"name": "Wbsite Builder",
+"url": "website-builder.svg"
+},
+{
+"name": "Woo Commerce Hosting",
+"url": "woocommerce-hosting.svg"
+},
+{
+"name": "WP Builder",
+"url": "wp-builder.svg"
+}
+]
\ No newline at end of file
diff --git a/_data/principles.json b/_data/principles.json
new file mode 100644
index 0000000..3ac34de
--- /dev/null
+++ b/_data/principles.json
@@ -0,0 +1,60 @@
+[
+ {
+ "heading": "Empower People",
+ "description": "Because we don’t need any stuffy-white-shirted-tie-wearing boss micro-managing our every move, we have the autonomy to complete the projects that matter and make a difference for customers. We do all of that because we believe in giving customers the right tools they need to achieve their dreams online. By empowering our employees to be truly helpful, we also empower our customers with products and services they need to do their business, their way... and that’s what it’s all about!",
+ "name": "Empower People",
+ "url": "ep.svg",
+ "url-typ": "ep-typ.svg"
+ },
+
+ {
+ "heading": "Practice Shameless Honesty",
+ "description": "Anyone can say that they’re open and honest, but at DreamHost we take it to extremes. We’re a gaping hole from which truth oozes, white hot, and which ultimately brings us closer together. Being transparent with each other and with our customers is a surefire way to build trust, mutual respect, and, if we’ve had enough wine, love.",
+ "name": "Practice Shameless Honesty",
+ "url": "psh.svg",
+ "url-typ": "psh-typ.svg"
+ },
+ {
+ "heading": "Give Everyone a Voice",
+ "description": "Everyone at every level of the organization has a voice at DreamHost! We all bring our own unique perspective and experience to every conversation, and having those diverse inputs leads to better problem solving and more productive teams. Being able to influence and inform key decisions is an important part of feeling valued at work!",
+ "name": "Give Everyone a Voice",
+ "url": "ev.svg",
+ "url-typ": "ev-typ.svg"
+ },
+
+ {
+ "heading": "Speak Hacker",
+ "description": "At DreamHost we like to ask questions and then figure out the answers because we enjoy finding creative solutions through a combination of free thinking, free speech,and, of course, free software. Simply put, we speak hacker.",
+ "name": "Speak Hacker",
+ "url": "sh.svg",
+ "url-typ": "sh-typ.svg"
+ }, {
+ "heading": "Embrace Open Source",
+ "description": "DreamHost understands the world is embracing open source technology. From our infrastructure, to our software stack, to our product management tools, we believe that open source products enable us to do great things for ourselves and, more importantly, our customers. Open source gives opportunities for growth, criticism and accountability. We not only leverage the work of others but contribute code back to larger projects that benefit all users - not just ourselves and our customers. That’s the beauty of the open source world.",
+ "name": "Embrace Open Source",
+ "url": "eos.svg",
+ "url-typ": "eos-typ.svg"
+ },
+
+ {
+ "heading": "Practice Flexibility",
+ "description": "With a full spectrum of hosting services, our flexibility extends beyond our customer offerings and is deeply ingrained in our culture as well. We’ve been known to bend into all sorts of uncomfortable positions to serve customers and our employees better!",
+ "name": "Practice Flexibility",
+ "url": "pf.svg",
+ "url-typ": "pf-typ.svg"
+ }, {
+ "heading": "Provide Superhero Service",
+ "description": "Because we don’t need any stuffy-white-shirted-tie-wearing boss micro-managing our every move, we have the autonomy to complete the projects that matter and make a difference for customers. We do all of that because we believe in giving customers the right tools they need to achieve their dreams online. By empowering our employees to be truly helpful, we also empower our customers with products and services they need to do their business, their way... and that’s what it’s all about!",
+ "name": "Provide Superhero Service",
+ "url": "shs.svg",
+ "url-typ": "shs-typ.svg"
+ },
+
+ {
+ "heading": "Be Irreverent & Fun",
+ "description": "While we take our customers and the services we provide very seriously, we don’t take OURSELVES so seriously that dealing with us becomes an exercise in being PC. Life has “edges.” We tend to hangout around those edges in the way we do business, and that’s evident in the way we communicate. You are far more likely to encounter an off-the-wall, irreverent comment from us than you are to be subjected to corporate double-speak.",
+ "name": "Be Irreverent & Fun",
+ "url": "if.svg",
+ "url-typ": "if-typ.svg"
+ }
+]
diff --git a/_data/typography_marketing.json b/_data/typography_marketing.json
new file mode 100644
index 0000000..d673e2a
--- /dev/null
+++ b/_data/typography_marketing.json
@@ -0,0 +1,66 @@
+[
+ {
+ "style": "h1",
+ "weight": "Bold",
+ "size": "122",
+ "line_height": "128",
+ "font_size":"t-8",
+ "font_weight":"t-bold"
+ },
+ {
+ "style": "h2",
+ "weight": "Bold",
+ "size": "88",
+ "line_height": "96",
+ "font_size":"t-7",
+ "font_weight":"t-bold"
+ },
+ {
+ "style": "h3",
+ "weight": "Bold",
+ "size": "72",
+ "line_height": "88",
+ "font_size":"t-6",
+ "font_weight":"t-bold"
+ },
+ {
+ "style": "h4",
+ "weight": "Bold",
+ "size": "48",
+ "line_height": "60",
+ "font_size":"t-5",
+ "font_weight":"t-bold"
+ },
+ {
+ "style": "h5",
+ "weight": "Bold",
+ "size": "32",
+ "line_height": "40",
+ "font_size":"t-4",
+ "font_weight":"t-bold"
+ },
+ {
+ "style": "X-Large Body",
+ "weight": "Medium",
+ "size": "24",
+ "line_height": "40",
+ "font_size":"t-3",
+ "font_weight":"t-medium"
+ },
+ {
+ "style": "Large Body",
+ "weight": "Medium",
+ "size": "20",
+ "line_height": "32",
+ "font_size":"t-2",
+ "font_weight":"t-medium"
+ },
+ {
+ "style": "Medium",
+ "weight": "Medium",
+ "size": "16",
+ "line_height": "32",
+ "font_size":"t-1",
+ "font_weight":"t-medium"
+ }
+ ]
\ No newline at end of file
diff --git a/_data/typography_product.json b/_data/typography_product.json
new file mode 100644
index 0000000..a2d317b
--- /dev/null
+++ b/_data/typography_product.json
@@ -0,0 +1,50 @@
+[
+ {
+ "style": "h1",
+ "weight": "Bold",
+ "size": "40",
+ "line_height": "48",
+ "font_family":"Ubuntu",
+ "font_weight":"bold"
+ },
+ {
+ "style": "h2",
+ "weight": "Medium",
+ "size": "32",
+ "line_height": "40",
+ "font_family":"Ubuntu",
+ "font_weight":"500"
+ },
+ {
+ "style": "h3",
+ "weight": "Medium",
+ "size": "24",
+ "line_height": "32",
+ "font_family":"Ubuntu",
+ "font_weight":"500"
+ },
+ {
+ "style": "h4",
+ "weight": "Regular",
+ "size": "20",
+ "line_height": "32",
+ "font_family":"Ubuntu",
+ "font_weight":"regular"
+ },
+ {
+ "style": "Larger Body",
+ "weight": "Regular",
+ "size": "16",
+ "line_height": "25",
+ "font_family":"Proxima Nova",
+ "font_weight":"regular"
+ },
+ {
+ "style": "Regular Body",
+ "weight": "Regular",
+ "size": "15",
+ "line_height": "25",
+ "font_family":"Proxima Nova",
+ "font_weight":"regular"
+ }
+ ]
\ No newline at end of file
diff --git a/_includes/_brand-nav.html b/_includes/_brand-nav.html
deleted file mode 100644
index 37d0288..0000000
--- a/_includes/_brand-nav.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
*/
+.List--icon-right > li { position: relative; }
+
+.List--icon-right > li > * { padding-right: 3.5em; }
+
+.List--icon-right .icon { position: absolute; top: 50%; margin-top: -.725em; margin-right: 0; right: 1.5em; }
+
+.Modal { padding: 1.5rem; border-radius: 3px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
+
+.Modal__button-group { margin-top: 2rem; }
+
+@media screen and (min-width: 750px) { .Modal { padding: 4.5rem; }
+ .Modal__heading { font-size: 2.5rem; line-height: calc(1em + 8px); } }
+
+.remodal-overlay { background: rgba(224, 228, 232, 0.9) !important; }
+
+.Pagination { display: inline-block; margin: 0; }
+
+.Pagination .Pagination__button { display: inline-block; background: #F4F6F9; border: solid 1px #F4F6F9; text-align: center; border-radius: 3px; text-indent: -5000em; padding: 0.375rem; vertical-align: middle; transition: all 0.1s ease-in-out; }
+
+.Pagination .Pagination__button:hover { background: #ffffff; }
+
+.Pagination .Pagination__button:hover .Pagination__icon { color: #0073EC; transform: scale(0.99); }
+
+.Pagination .Pagination__button:first-child { transform: rotate(180deg); }
+
+.Pagination .Pagination__status { display: inline-block; margin: 0; padding: 0 1rem; }
+
+.Pagination .Pagination__icon { margin: 0; padding: 0; height: 0.75rem; width: 0.75rem; color: #E0E4E8; display: block; }
+
+/*
+
+Popover Component
+
+ Popovers are used for any contextual content that shouldn't block
+ the user. Some common uses are dropdown menus, hovercards, tooltips.
+
+ Basic guidelines:
+ - The default theme is light.
+ - The default width is medium.
+ - Popover content can vary, there are no strict dos and don'ts.
+ - The max-height class is optional. It enforces a 60vh max-height.
+ - It is possible to nest hover popovers inside of click popovers.
+ - popovers with max-height cannot contain nested popovers.
+ - Padding size can vary.
+ - The caret is optional.
+ - Replace .on-click with .on-hover for hover popovers.
+
+ Usage:
+
+
+
+
+ This is a dark themed popover with small padding. It appears
+ below the clicked element, is flushed left, has max-height
+ enforced, and has a caret. Note, popovers must live within
+ .Popover-container. To enable popovers on hover, the
+ .on-hover class must be included on the
+ container.
+
+*/
+.List--icon-right > li {
+ position: relative; }
+
+.List--icon-right > li > * {
+ padding-right: 3.5em; }
+
+.List--icon-right .icon {
+ position: absolute;
+ top: 50%;
+ margin-top: -.725em;
+ margin-right: 0;
+ right: 1.5em; }
+
+.Modal {
+ padding: 1.5rem;
+ border-radius: 3px;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
+
+.Modal__button-group {
+ margin-top: 2rem; }
+
+@media screen and (min-width: 750px) {
+ .Modal {
+ padding: 4.5rem; }
+ .Modal__heading {
+ font-size: 3rem;
+ line-height: calc(1em + 8px); } }
+
+.remodal-overlay {
+ background: rgba(224, 228, 232, 0.9) !important; }
+
+.Pagination {
+ display: inline-block;
+ margin: 0; }
+ .Pagination .Pagination__button {
+ display: inline-block;
+ background: #F4F6F9;
+ border: solid 1px #F4F6F9;
+ text-align: center;
+ border-radius: 3px;
+ text-indent: -5000em;
+ padding: 0.375rem;
+ vertical-align: middle;
+ transition: all 0.1s ease-in-out; }
+ .Pagination .Pagination__button:hover {
+ background: #ffffff; }
+ .Pagination .Pagination__button:hover .Pagination__icon {
+ color: #0073EC;
+ transform: scale(0.99); }
+ .Pagination .Pagination__button:first-child {
+ transform: rotate(180deg); }
+ .Pagination .Pagination__status {
+ display: inline-block;
+ margin: 0;
+ padding: 0 1rem; }
+ .Pagination .Pagination__icon {
+ margin: 0;
+ padding: 0;
+ height: 0.75rem;
+ width: 0.75rem;
+ color: #E0E4E8;
+ display: block; }
+
+/*
+
+Popover Component
+
+ Popovers are used for any contextual content that shouldn't block
+ the user. Some common uses are dropdown menus, hovercards, tooltips.
+
+ Basic guidelines:
+ - The default theme is light.
+ - The default width is medium.
+ - Popover content can vary, there are no strict dos and don'ts.
+ - The max-height class is optional. It enforces a 60vh max-height.
+ - It is possible to nest hover popovers inside of click popovers.
+ - popovers with max-height cannot contain nested popovers.
+ - Padding size can vary.
+ - The caret is optional.
+ - Replace .on-click with .on-hover for hover popovers.
+
+ Usage:
+
+
+
+
+ This is a dark themed popover with small padding. It appears
+ below the clicked element, is flushed left, has max-height
+ enforced, and has a caret. Note, popovers must live within
+ .Popover-container. To enable popovers on hover, the
+ .on-hover class must be included on the
+ container.
+
*/
+.List--icon-right > li { position: relative; }
+
+.List--icon-right > li > * { padding-right: 3.5em; }
+
+.List--icon-right .icon { position: absolute; top: 50%; margin-top: -.725em; margin-right: 0; right: 1.5em; }
+
+.Modal { padding: 1.5rem; border-radius: 3px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
+
+.Modal__button-group { margin-top: 2rem; }
+
+@media screen and (min-width: 750px) { .Modal { padding: 4.5rem; }
+ .Modal__heading { font-size: 2.5rem; line-height: calc(1em + 8px); } }
+
+.remodal-overlay { background: rgba(224, 228, 232, 0.9) !important; }
+
+.Pagination { display: inline-block; margin: 0; }
+
+.Pagination .Pagination__button { display: inline-block; background: #F4F6F9; border: solid 1px #F4F6F9; text-align: center; border-radius: 3px; text-indent: -5000em; padding: 0.375rem; vertical-align: middle; transition: all 0.1s ease-in-out; }
+
+.Pagination .Pagination__button:hover { background: #ffffff; }
+
+.Pagination .Pagination__button:hover .Pagination__icon { color: #0073EC; -ms-transform: scale(0.99); transform: scale(0.99); }
+
+.Pagination .Pagination__button:first-child { -ms-transform: rotate(180deg); transform: rotate(180deg); }
+
+.Pagination .Pagination__status { display: inline-block; margin: 0; padding: 0 1rem; }
+
+.Pagination .Pagination__icon { margin: 0; padding: 0; height: 0.75rem; width: 0.75rem; color: #E0E4E8; display: block; }
+
+/*
+
+Popover Component
+
+ Popovers are used for any contextual content that shouldn't block
+ the user. Some common uses are dropdown menus, hovercards, tooltips.
+
+ Basic guidelines:
+ - The default theme is light.
+ - The default width is medium.
+ - Popover content can vary, there are no strict dos and don'ts.
+ - The max-height class is optional. It enforces a 60vh max-height.
+ - It is possible to nest hover popovers inside of click popovers.
+ - popovers with max-height cannot contain nested popovers.
+ - Padding size can vary.
+ - The caret is optional.
+ - Replace .on-click with .on-hover for hover popovers.
+
+ Usage:
+
+
+
+
+ This is a dark themed popover with small padding. It appears
+ below the clicked element, is flushed left, has max-height
+ enforced, and has a caret. Note, popovers must live within
+ .Popover-container. To enable popovers on hover, the
+ .on-hover class must be included on the
+ container.
+
").addClass(o.options.dotsClass),i=0;i<=o.getDotCount();i+=1)t.append(e("").append(o.options.customPaging.call(this,o,i)));o.$dots=t.appendTo(o.options.appendDots),o.$dots.find("li").first().addClass("slick-active")}},i.prototype.buildOut=function(){var i=this;i.$slides=i.$slider.children(i.options.slide+":not(.slick-cloned)").addClass("slick-slide"),i.slideCount=i.$slides.length,i.$slides.each(function(i,t){e(t).attr("data-slick-index",i).data("originalStyling",e(t).attr("style")||"")}),i.$slider.addClass("slick-slider"),i.$slideTrack=0===i.slideCount?e('').appendTo(i.$slider):i.$slides.wrapAll('').parent(),i.$list=i.$slideTrack.wrap('').parent(),i.$slideTrack.css("opacity",0),!0!==i.options.centerMode&&!0!==i.options.swipeToSlide||(i.options.slidesToScroll=1),e("img[data-lazy]",i.$slider).not("[src]").addClass("slick-loading"),i.setupInfinite(),i.buildArrows(),i.buildDots(),i.updateDots(),i.setSlideClasses("number"==typeof i.currentSlide?i.currentSlide:0),!0===i.options.draggable&&i.$list.addClass("draggable")},i.prototype.buildRows=function(){var e,i,t,o,s,n,r,l=this;if(o=document.createDocumentFragment(),n=l.$slider.children(),l.options.rows>0){for(r=l.options.slidesPerRow*l.options.rows,s=Math.ceil(n.length/r),e=0;er.breakpoints[o]&&(s=r.breakpoints[o]));null!==s?null!==r.activeBreakpoint?(s!==r.activeBreakpoint||t)&&(r.activeBreakpoint=s,"unslick"===r.breakpointSettings[s]?r.unslick(s):(r.options=e.extend({},r.originalSettings,r.breakpointSettings[s]),!0===i&&(r.currentSlide=r.options.initialSlide),r.refresh(i)),l=s):(r.activeBreakpoint=s,"unslick"===r.breakpointSettings[s]?r.unslick(s):(r.options=e.extend({},r.originalSettings,r.breakpointSettings[s]),!0===i&&(r.currentSlide=r.options.initialSlide),r.refresh(i)),l=s):null!==r.activeBreakpoint&&(r.activeBreakpoint=null,r.options=r.originalSettings,!0===i&&(r.currentSlide=r.options.initialSlide),r.refresh(i),l=s),i||!1===l||r.$slider.trigger("breakpoint",[r,l])}},i.prototype.changeSlide=function(i,t){var o,s,n,r=this,l=e(i.currentTarget);switch(l.is("a")&&i.preventDefault(),l.is("li")||(l=l.closest("li")),n=r.slideCount%r.options.slidesToScroll!=0,o=n?0:(r.slideCount-r.currentSlide)%r.options.slidesToScroll,i.data.message){case"previous":s=0===o?r.options.slidesToScroll:r.options.slidesToShow-o,r.slideCount>r.options.slidesToShow&&r.slideHandler(r.currentSlide-s,!1,t);break;case"next":s=0===o?r.options.slidesToScroll:o,r.slideCount>r.options.slidesToShow&&r.slideHandler(r.currentSlide+s,!1,t);break;case"index":var a=0===i.data.index?0:i.data.index||l.index()*r.options.slidesToScroll;r.slideHandler(r.checkNavigable(a),!1,t),l.children().trigger("focus");break;default:return}},i.prototype.checkNavigable=function(e){var i,t;if(i=this.getNavigableIndexes(),t=0,e>i[i.length-1])e=i[i.length-1];else for(var o in i){if(ei.options.slidesToShow&&(i.$prevArrow&&i.$prevArrow.off("click.slick",i.changeSlide),i.$nextArrow&&i.$nextArrow.off("click.slick",i.changeSlide),!0===i.options.accessibility&&(i.$prevArrow&&i.$prevArrow.off("keydown.slick",i.keyHandler),i.$nextArrow&&i.$nextArrow.off("keydown.slick",i.keyHandler))),i.$list.off("touchstart.slick mousedown.slick",i.swipeHandler),i.$list.off("touchmove.slick mousemove.slick",i.swipeHandler),i.$list.off("touchend.slick mouseup.slick",i.swipeHandler),i.$list.off("touchcancel.slick mouseleave.slick",i.swipeHandler),i.$list.off("click.slick",i.clickHandler),e(document).off(i.visibilityChange,i.visibility),i.cleanUpSlideEvents(),!0===i.options.accessibility&&i.$list.off("keydown.slick",i.keyHandler),!0===i.options.focusOnSelect&&e(i.$slideTrack).children().off("click.slick",i.selectHandler),e(window).off("orientationchange.slick.slick-"+i.instanceUid,i.orientationChange),e(window).off("resize.slick.slick-"+i.instanceUid,i.resize),e("[draggable!=true]",i.$slideTrack).off("dragstart",i.preventDefault),e(window).off("load.slick.slick-"+i.instanceUid,i.setPosition)},i.prototype.cleanUpSlideEvents=function(){var i=this;i.$list.off("mouseenter.slick",e.proxy(i.interrupt,i,!0)),i.$list.off("mouseleave.slick",e.proxy(i.interrupt,i,!1))},i.prototype.cleanUpRows=function(){var e,i=this;i.options.rows>0&&(e=i.$slides.children().children(),e.removeAttr("style"),i.$slider.empty().append(e))},i.prototype.clickHandler=function(e){!1===this.shouldClick&&(e.stopImmediatePropagation(),e.stopPropagation(),e.preventDefault())},i.prototype.destroy=function(i){var t=this;t.autoPlayClear(),t.touchObject={},t.cleanUpEvents(),e(".slick-cloned",t.$slider).detach(),t.$dots&&t.$dots.remove(),t.$prevArrow&&t.$prevArrow.length&&(t.$prevArrow.removeClass("slick-disabled slick-arrow slick-hidden").removeAttr("aria-hidden aria-disabled tabindex").css("display",""),t.htmlExpr.test(t.options.prevArrow)&&t.$prevArrow.remove()),t.$nextArrow&&t.$nextArrow.length&&(t.$nextArrow.removeClass("slick-disabled slick-arrow slick-hidden").removeAttr("aria-hidden aria-disabled tabindex").css("display",""),t.htmlExpr.test(t.options.nextArrow)&&t.$nextArrow.remove()),t.$slides&&(t.$slides.removeClass("slick-slide slick-active slick-center slick-visible slick-current").removeAttr("aria-hidden").removeAttr("data-slick-index").each(function(){e(this).attr("style",e(this).data("originalStyling"))}),t.$slideTrack.children(this.options.slide).detach(),t.$slideTrack.detach(),t.$list.detach(),t.$slider.append(t.$slides)),t.cleanUpRows(),t.$slider.removeClass("slick-slider"),t.$slider.removeClass("slick-initialized"),t.$slider.removeClass("slick-dotted"),t.unslicked=!0,i||t.$slider.trigger("destroy",[t])},i.prototype.disableTransition=function(e){var i=this,t={};t[i.transitionType]="",!1===i.options.fade?i.$slideTrack.css(t):i.$slides.eq(e).css(t)},i.prototype.fadeSlide=function(e,i){var t=this;!1===t.cssTransitions?(t.$slides.eq(e).css({zIndex:t.options.zIndex}),t.$slides.eq(e).animate({opacity:1},t.options.speed,t.options.easing,i)):(t.applyTransition(e),t.$slides.eq(e).css({opacity:1,zIndex:t.options.zIndex}),i&&setTimeout(function(){t.disableTransition(e),i.call()},t.options.speed))},i.prototype.fadeSlideOut=function(e){var i=this;!1===i.cssTransitions?i.$slides.eq(e).animate({opacity:0,zIndex:i.options.zIndex-2},i.options.speed,i.options.easing):(i.applyTransition(e),i.$slides.eq(e).css({opacity:0,zIndex:i.options.zIndex-2}))},i.prototype.filterSlides=i.prototype.slickFilter=function(e){var i=this;null!==e&&(i.$slidesCache=i.$slides,i.unload(),i.$slideTrack.children(this.options.slide).detach(),i.$slidesCache.filter(e).appendTo(i.$slideTrack),i.reinit())},i.prototype.focusHandler=function(){var i=this;i.$slider.off("focus.slick blur.slick").on("focus.slick","*",function(t){var o=e(this);setTimeout(function(){i.options.pauseOnFocus&&o.is(":focus")&&(i.focussed=!0,i.autoPlay())},0)}).on("blur.slick","*",function(t){e(this),i.options.pauseOnFocus&&(i.focussed=!1,i.autoPlay())})},i.prototype.getCurrent=i.prototype.slickCurrentSlide=function(){return this.currentSlide},i.prototype.getDotCount=function(){var e=this,i=0,t=0,o=0;if(!0===e.options.infinite)if(e.slideCount<=e.options.slidesToShow)++o;else for(;in.options.slidesToShow&&(n.slideOffset=n.slideWidth*n.options.slidesToShow*-1,s=-1,!0===n.options.vertical&&!0===n.options.centerMode&&(2===n.options.slidesToShow?s=-1.5:1===n.options.slidesToShow&&(s=-2)),r=t*n.options.slidesToShow*s),n.slideCount%n.options.slidesToScroll!=0&&e+n.options.slidesToScroll>n.slideCount&&n.slideCount>n.options.slidesToShow&&(e>n.slideCount?(n.slideOffset=(n.options.slidesToShow-(e-n.slideCount))*n.slideWidth*-1,r=(n.options.slidesToShow-(e-n.slideCount))*t*-1):(n.slideOffset=n.slideCount%n.options.slidesToScroll*n.slideWidth*-1,r=n.slideCount%n.options.slidesToScroll*t*-1))):e+n.options.slidesToShow>n.slideCount&&(n.slideOffset=(e+n.options.slidesToShow-n.slideCount)*n.slideWidth,r=(e+n.options.slidesToShow-n.slideCount)*t),n.slideCount<=n.options.slidesToShow&&(n.slideOffset=0,r=0),!0===n.options.centerMode&&n.slideCount<=n.options.slidesToShow?n.slideOffset=n.slideWidth*Math.floor(n.options.slidesToShow)/2-n.slideWidth*n.slideCount/2:!0===n.options.centerMode&&!0===n.options.infinite?n.slideOffset+=n.slideWidth*Math.floor(n.options.slidesToShow/2)-n.slideWidth:!0===n.options.centerMode&&(n.slideOffset=0,n.slideOffset+=n.slideWidth*Math.floor(n.options.slidesToShow/2)),i=!1===n.options.vertical?e*n.slideWidth*-1+n.slideOffset:e*t*-1+r,!0===n.options.variableWidth&&(o=n.slideCount<=n.options.slidesToShow||!1===n.options.infinite?n.$slideTrack.children(".slick-slide").eq(e):n.$slideTrack.children(".slick-slide").eq(e+n.options.slidesToShow),i=!0===n.options.rtl?o[0]?-1*(n.$slideTrack.width()-o[0].offsetLeft-o.width()):0:o[0]?-1*o[0].offsetLeft:0,!0===n.options.centerMode&&(o=n.slideCount<=n.options.slidesToShow||!1===n.options.infinite?n.$slideTrack.children(".slick-slide").eq(e):n.$slideTrack.children(".slick-slide").eq(e+n.options.slidesToShow+1),i=!0===n.options.rtl?o[0]?-1*(n.$slideTrack.width()-o[0].offsetLeft-o.width()):0:o[0]?-1*o[0].offsetLeft:0,i+=(n.$list.width()-o.outerWidth())/2)),i},i.prototype.getOption=i.prototype.slickGetOption=function(e){return this.options[e]},i.prototype.getNavigableIndexes=function(){var e,i=this,t=0,o=0,s=[];for(!1===i.options.infinite?e=i.slideCount:(t=-1*i.options.slidesToScroll,o=-1*i.options.slidesToScroll,e=2*i.slideCount);t=0&&ee.options.slidesToShow&&(e.$prevArrow.off("click.slick").on("click.slick",{message:"previous"},e.changeSlide),e.$nextArrow.off("click.slick").on("click.slick",{message:"next"},e.changeSlide),!0===e.options.accessibility&&(e.$prevArrow.on("keydown.slick",e.keyHandler),e.$nextArrow.on("keydown.slick",e.keyHandler)))},i.prototype.initDotEvents=function(){var i=this;!0===i.options.dots&&i.slideCount>i.options.slidesToShow&&(e("li",i.$dots).on("click.slick",{message:"index"},i.changeSlide),!0===i.options.accessibility&&i.$dots.on("keydown.slick",i.keyHandler)),!0===i.options.dots&&!0===i.options.pauseOnDotsHover&&i.slideCount>i.options.slidesToShow&&e("li",i.$dots).on("mouseenter.slick",e.proxy(i.interrupt,i,!0)).on("mouseleave.slick",e.proxy(i.interrupt,i,!1))},i.prototype.initSlideEvents=function(){var i=this;i.options.pauseOnHover&&(i.$list.on("mouseenter.slick",e.proxy(i.interrupt,i,!0)),i.$list.on("mouseleave.slick",e.proxy(i.interrupt,i,!1)))},i.prototype.initializeEvents=function(){var i=this;i.initArrowEvents(),i.initDotEvents(),i.initSlideEvents(),i.$list.on("touchstart.slick mousedown.slick",{action:"start"},i.swipeHandler),i.$list.on("touchmove.slick mousemove.slick",{action:"move"},i.swipeHandler),i.$list.on("touchend.slick mouseup.slick",{action:"end"},i.swipeHandler),i.$list.on("touchcancel.slick mouseleave.slick",{action:"end"},i.swipeHandler),i.$list.on("click.slick",i.clickHandler),e(document).on(i.visibilityChange,e.proxy(i.visibility,i)),!0===i.options.accessibility&&i.$list.on("keydown.slick",i.keyHandler),!0===i.options.focusOnSelect&&e(i.$slideTrack).children().on("click.slick",i.selectHandler),e(window).on("orientationchange.slick.slick-"+i.instanceUid,e.proxy(i.orientationChange,i)),e(window).on("resize.slick.slick-"+i.instanceUid,e.proxy(i.resize,i)),e("[draggable!=true]",i.$slideTrack).on("dragstart",i.preventDefault),e(window).on("load.slick.slick-"+i.instanceUid,i.setPosition),e(i.setPosition)},i.prototype.initUI=function(){var e=this;!0===e.options.arrows&&e.slideCount>e.options.slidesToShow&&(e.$prevArrow.show(),e.$nextArrow.show()),!0===e.options.dots&&e.slideCount>e.options.slidesToShow&&e.$dots.show()},i.prototype.keyHandler=function(e){var i=this;e.target.tagName.match("TEXTAREA|INPUT|SELECT")||(37===e.keyCode&&!0===i.options.accessibility?i.changeSlide({data:{message:!0===i.options.rtl?"next":"previous"}}):39===e.keyCode&&!0===i.options.accessibility&&i.changeSlide({data:{message:!0===i.options.rtl?"previous":"next"}}))},i.prototype.lazyLoad=function(){function i(i){e("img[data-lazy]",i).each(function(){var i=e(this),t=e(this).attr("data-lazy"),o=e(this).attr("data-srcset"),s=e(this).attr("data-sizes")||r.$slider.attr("data-sizes"),n=document.createElement("img");n.onload=function(){i.animate({opacity:0},100,function(){o&&(i.attr("srcset",o),s&&i.attr("sizes",s)),i.attr("src",t).animate({opacity:1},200,function(){i.removeAttr("data-lazy data-srcset data-sizes").removeClass("slick-loading")}),r.$slider.trigger("lazyLoaded",[r,i,t])})},n.onerror=function(){i.removeAttr("data-lazy").removeClass("slick-loading").addClass("slick-lazyload-error"),r.$slider.trigger("lazyLoadError",[r,i,t])},n.src=t})}var t,o,s,n,r=this;if(!0===r.options.centerMode?!0===r.options.infinite?(s=r.currentSlide+(r.options.slidesToShow/2+1),n=s+r.options.slidesToShow+2):(s=Math.max(0,r.currentSlide-(r.options.slidesToShow/2+1)),n=r.options.slidesToShow/2+1+2+r.currentSlide):(s=r.options.infinite?r.options.slidesToShow+r.currentSlide:r.currentSlide,n=Math.ceil(s+r.options.slidesToShow),!0===r.options.fade&&(s>0&&s--,n<=r.slideCount&&n++)),t=r.$slider.find(".slick-slide").slice(s,n),"anticipated"===r.options.lazyLoad)for(var l=s-1,a=n,d=r.$slider.find(".slick-slide"),c=0;c=r.slideCount-r.options.slidesToShow?(o=r.$slider.find(".slick-cloned").slice(0,r.options.slidesToShow),i(o)):0===r.currentSlide&&(o=r.$slider.find(".slick-cloned").slice(-1*r.options.slidesToShow),i(o))},i.prototype.loadSlider=function(){var e=this;e.setPosition(),e.$slideTrack.css({opacity:1}),e.$slider.removeClass("slick-loading"),e.initUI(),"progressive"===e.options.lazyLoad&&e.progressiveLazyLoad()},i.prototype.next=i.prototype.slickNext=function(){this.changeSlide({data:{message:"next"}})},i.prototype.orientationChange=function(){var e=this;e.checkResponsive(),e.setPosition()},i.prototype.pause=i.prototype.slickPause=function(){var e=this;e.autoPlayClear(),e.paused=!0},i.prototype.play=i.prototype.slickPlay=function(){var e=this;e.autoPlay(),e.options.autoplay=!0,e.paused=!1,e.focussed=!1,e.interrupted=!1},i.prototype.postSlide=function(i){var t=this;if(!t.unslicked&&(t.$slider.trigger("afterChange",[t,i]),t.animating=!1,t.slideCount>t.options.slidesToShow&&t.setPosition(),t.swipeLeft=null,t.options.autoplay&&t.autoPlay(),!0===t.options.accessibility&&(t.initADA(),t.options.focusOnChange))){e(t.$slides.get(t.currentSlide)).attr("tabindex",0).focus()}},i.prototype.prev=i.prototype.slickPrev=function(){this.changeSlide({data:{message:"previous"}})},i.prototype.preventDefault=function(e){e.preventDefault()},i.prototype.progressiveLazyLoad=function(i){i=i||1;var t,o,s,n,r,l=this,a=e("img[data-lazy]",l.$slider);a.length?(t=a.first(),o=t.attr("data-lazy"),s=t.attr("data-srcset"),n=t.attr("data-sizes")||l.$slider.attr("data-sizes"),r=document.createElement("img"),r.onload=function(){s&&(t.attr("srcset",s),n&&t.attr("sizes",n)),t.attr("src",o).removeAttr("data-lazy data-srcset data-sizes").removeClass("slick-loading"),!0===l.options.adaptiveHeight&&l.setPosition(),l.$slider.trigger("lazyLoaded",[l,t,o]),l.progressiveLazyLoad()},r.onerror=function(){i<3?setTimeout(function(){l.progressiveLazyLoad(i+1)},500):(t.removeAttr("data-lazy").removeClass("slick-loading").addClass("slick-lazyload-error"),l.$slider.trigger("lazyLoadError",[l,t,o]),l.progressiveLazyLoad())},r.src=o):l.$slider.trigger("allImagesLoaded",[l])},i.prototype.refresh=function(i){var t,o,s=this;o=s.slideCount-s.options.slidesToShow,!s.options.infinite&&s.currentSlide>o&&(s.currentSlide=o),s.slideCount<=s.options.slidesToShow&&(s.currentSlide=0),t=s.currentSlide,s.destroy(!0),e.extend(s,s.initials,{currentSlide:t}),s.init(),i||s.changeSlide({data:{message:"index",index:t}},!1)},i.prototype.registerBreakpoints=function(){var i,t,o,s=this,n=s.options.responsive||null;if("array"===e.type(n)&&n.length){s.respondTo=s.options.respondTo||"window";for(i in n)if(o=s.breakpoints.length-1,n.hasOwnProperty(i)){for(t=n[i].breakpoint;o>=0;)s.breakpoints[o]&&s.breakpoints[o]===t&&s.breakpoints.splice(o,1),o--;s.breakpoints.push(t),s.breakpointSettings[t]=n[i].settings}s.breakpoints.sort(function(e,i){return s.options.mobileFirst?e-i:i-e})}},i.prototype.reinit=function(){var i=this;i.$slides=i.$slideTrack.children(i.options.slide).addClass("slick-slide"),i.slideCount=i.$slides.length,i.currentSlide>=i.slideCount&&0!==i.currentSlide&&(i.currentSlide=i.currentSlide-i.options.slidesToScroll),i.slideCount<=i.options.slidesToShow&&(i.currentSlide=0),i.registerBreakpoints(),i.setProps(),i.setupInfinite(),i.buildArrows(),i.updateArrows(),i.initArrowEvents(),i.buildDots(),i.updateDots(),i.initDotEvents(),i.cleanUpSlideEvents(),i.initSlideEvents(),i.checkResponsive(!1,!0),!0===i.options.focusOnSelect&&e(i.$slideTrack).children().on("click.slick",i.selectHandler),i.setSlideClasses("number"==typeof i.currentSlide?i.currentSlide:0),i.setPosition(),i.focusHandler(),i.paused=!i.options.autoplay,i.autoPlay(),i.$slider.trigger("reInit",[i])},i.prototype.resize=function(){var i=this;e(window).width()!==i.windowWidth&&(clearTimeout(i.windowDelay),i.windowDelay=window.setTimeout(function(){i.windowWidth=e(window).width(),i.checkResponsive(),i.unslicked||i.setPosition()},50))},i.prototype.removeSlide=i.prototype.slickRemove=function(e,i,t){var o=this;return"boolean"==typeof e?(i=e,e=!0===i?0:o.slideCount-1):e=!0===i?--e:e,!(o.slideCount<1||e<0||e>o.slideCount-1)&&(o.unload(),!0===t?o.$slideTrack.children().remove():o.$slideTrack.children(this.options.slide).eq(e).remove(),o.$slides=o.$slideTrack.children(this.options.slide),o.$slideTrack.children(this.options.slide).detach(),o.$slideTrack.append(o.$slides),o.$slidesCache=o.$slides,void o.reinit())},i.prototype.setCSS=function(e){var i,t,o=this,s={};!0===o.options.rtl&&(e=-e),i="left"==o.positionProp?Math.ceil(e)+"px":"0px",t="top"==o.positionProp?Math.ceil(e)+"px":"0px",s[o.positionProp]=e,!1===o.transformsEnabled?o.$slideTrack.css(s):(s={},!1===o.cssTransitions?(s[o.animType]="translate("+i+", "+t+")",o.$slideTrack.css(s)):(s[o.animType]="translate3d("+i+", "+t+", 0px)",o.$slideTrack.css(s)))},i.prototype.setDimensions=function(){var e=this;!1===e.options.vertical?!0===e.options.centerMode&&e.$list.css({padding:"0px "+e.options.centerPadding}):(e.$list.height(e.$slides.first().outerHeight(!0)*e.options.slidesToShow),!0===e.options.centerMode&&e.$list.css({padding:e.options.centerPadding+" 0px"})),e.listWidth=e.$list.width(),e.listHeight=e.$list.height(),!1===e.options.vertical&&!1===e.options.variableWidth?(e.slideWidth=Math.ceil(e.listWidth/e.options.slidesToShow),e.$slideTrack.width(Math.ceil(e.slideWidth*e.$slideTrack.children(".slick-slide").length))):!0===e.options.variableWidth?e.$slideTrack.width(5e3*e.slideCount):(e.slideWidth=Math.ceil(e.listWidth),e.$slideTrack.height(Math.ceil(e.$slides.first().outerHeight(!0)*e.$slideTrack.children(".slick-slide").length)));var i=e.$slides.first().outerWidth(!0)-e.$slides.first().width();!1===e.options.variableWidth&&e.$slideTrack.children(".slick-slide").width(e.slideWidth-i)},i.prototype.setFade=function(){var i,t=this;t.$slides.each(function(o,s){i=t.slideWidth*o*-1,!0===t.options.rtl?e(s).css({position:"relative",right:i,top:0,zIndex:t.options.zIndex-2,opacity:0}):e(s).css({position:"relative",left:i,top:0,zIndex:t.options.zIndex-2,opacity:0})}),t.$slides.eq(t.currentSlide).css({zIndex:t.options.zIndex-1,opacity:1})},i.prototype.setHeight=function(){var e=this;if(1===e.options.slidesToShow&&!0===e.options.adaptiveHeight&&!1===e.options.vertical){var i=e.$slides.eq(e.currentSlide).outerHeight(!0);e.$list.css("height",i)}},i.prototype.setOption=i.prototype.slickSetOption=function(){var i,t,o,s,n,r=this,l=!1;if("object"===e.type(arguments[0])?(o=arguments[0],l=arguments[1],n="multiple"):"string"===e.type(arguments[0])&&(o=arguments[0],s=arguments[1],l=arguments[2],"responsive"===arguments[0]&&"array"===e.type(arguments[1])?n="responsive":void 0!==arguments[1]&&(n="single")),"single"===n)r.options[o]=s;else if("multiple"===n)e.each(o,function(e,i){r.options[e]=i});else if("responsive"===n)for(t in s)if("array"!==e.type(r.options.responsive))r.options.responsive=[s[t]];else{for(i=r.options.responsive.length-1;i>=0;)r.options.responsive[i].breakpoint===s[t].breakpoint&&r.options.responsive.splice(i,1),i--;r.options.responsive.push(s[t])}l&&(r.unload(),r.reinit())},i.prototype.setPosition=function(){var e=this;e.setDimensions(),e.setHeight(),!1===e.options.fade?e.setCSS(e.getLeft(e.currentSlide)):e.setFade(),e.$slider.trigger("setPosition",[e])},i.prototype.setProps=function(){var e=this,i=document.body.style;e.positionProp=!0===e.options.vertical?"top":"left","top"===e.positionProp?e.$slider.addClass("slick-vertical"):e.$slider.removeClass("slick-vertical"),void 0===i.WebkitTransition&&void 0===i.MozTransition&&void 0===i.msTransition||!0===e.options.useCSS&&(e.cssTransitions=!0),e.options.fade&&("number"==typeof e.options.zIndex?e.options.zIndex<3&&(e.options.zIndex=3):e.options.zIndex=e.defaults.zIndex),void 0!==i.OTransform&&(e.animType="OTransform",e.transformType="-o-transform",e.transitionType="OTransition",void 0===i.perspectiveProperty&&void 0===i.webkitPerspective&&(e.animType=!1)),void 0!==i.MozTransform&&(e.animType="MozTransform",e.transformType="-moz-transform",e.transitionType="MozTransition",void 0===i.perspectiveProperty&&void 0===i.MozPerspective&&(e.animType=!1)),void 0!==i.webkitTransform&&(e.animType="webkitTransform",e.transformType="-webkit-transform",e.transitionType="webkitTransition",void 0===i.perspectiveProperty&&void 0===i.webkitPerspective&&(e.animType=!1)),void 0!==i.msTransform&&(e.animType="msTransform",e.transformType="-ms-transform",e.transitionType="msTransition",void 0===i.msTransform&&(e.animType=!1)),void 0!==i.transform&&!1!==e.animType&&(e.animType="transform",e.transformType="transform",e.transitionType="transition"),e.transformsEnabled=e.options.useTransform&&null!==e.animType&&!1!==e.animType},i.prototype.setSlideClasses=function(e){var i,t,o,s,n=this;if(t=n.$slider.find(".slick-slide").removeClass("slick-active slick-center slick-current").attr("aria-hidden","true"),n.$slides.eq(e).addClass("slick-current"),!0===n.options.centerMode){var r=n.options.slidesToShow%2==0?1:0;i=Math.floor(n.options.slidesToShow/2),!0===n.options.infinite&&(e>=i&&e<=n.slideCount-1-i?n.$slides.slice(e-i+r,e+i+1).addClass("slick-active").attr("aria-hidden","false"):(o=n.options.slidesToShow+e,t.slice(o-i+1+r,o+i+2).addClass("slick-active").attr("aria-hidden","false")),0===e?t.eq(t.length-1-n.options.slidesToShow).addClass("slick-center"):e===n.slideCount-1&&t.eq(n.options.slidesToShow).addClass("slick-center")),n.$slides.eq(e).addClass("slick-center")}else e>=0&&e<=n.slideCount-n.options.slidesToShow?n.$slides.slice(e,e+n.options.slidesToShow).addClass("slick-active").attr("aria-hidden","false"):t.length<=n.options.slidesToShow?t.addClass("slick-active").attr("aria-hidden","false"):(s=n.slideCount%n.options.slidesToShow,o=!0===n.options.infinite?n.options.slidesToShow+e:e,n.options.slidesToShow==n.options.slidesToScroll&&n.slideCount-es.options.slidesToShow)){for(o=!0===s.options.centerMode?s.options.slidesToShow+1:s.options.slidesToShow,i=s.slideCount;i>s.slideCount-o;i-=1)t=i-1,e(s.$slides[t]).clone(!0).attr("id","").attr("data-slick-index",t-s.slideCount).prependTo(s.$slideTrack).addClass("slick-cloned");for(i=0;id.getDotCount()*d.options.slidesToScroll)?void(!1===d.options.fade&&(o=d.currentSlide,!0!==t&&d.slideCount>d.options.slidesToShow?d.animateSlide(r,function(){d.postSlide(o)}):d.postSlide(o))):!1===d.options.infinite&&!0===d.options.centerMode&&(e<0||e>d.slideCount-d.options.slidesToScroll)?void(!1===d.options.fade&&(o=d.currentSlide,!0!==t&&d.slideCount>d.options.slidesToShow?d.animateSlide(r,function(){d.postSlide(o)}):d.postSlide(o))):(d.options.autoplay&&clearInterval(d.autoPlayTimer),s=o<0?d.slideCount%d.options.slidesToScroll!=0?d.slideCount-d.slideCount%d.options.slidesToScroll:d.slideCount+o:o>=d.slideCount?d.slideCount%d.options.slidesToScroll!=0?0:o-d.slideCount:o,d.animating=!0,d.$slider.trigger("beforeChange",[d,d.currentSlide,s]),n=d.currentSlide,d.currentSlide=s,d.setSlideClasses(d.currentSlide),d.options.asNavFor&&(l=d.getNavTarget(),l=l.slick("getSlick"),l.slideCount<=l.options.slidesToShow&&l.setSlideClasses(d.currentSlide)),d.updateDots(),d.updateArrows(),!0===d.options.fade?(!0!==t?(d.fadeSlideOut(n),d.fadeSlide(s,function(){d.postSlide(s)})):d.postSlide(s),void d.animateHeight()):void(!0!==t&&d.slideCount>d.options.slidesToShow?d.animateSlide(a,function(){d.postSlide(s)}):d.postSlide(s)))},i.prototype.startLoad=function(){var e=this;!0===e.options.arrows&&e.slideCount>e.options.slidesToShow&&(e.$prevArrow.hide(),e.$nextArrow.hide()),!0===e.options.dots&&e.slideCount>e.options.slidesToShow&&e.$dots.hide(),e.$slider.addClass("slick-loading")},i.prototype.swipeDirection=function(){var e,i,t,o,s=this;return e=s.touchObject.startX-s.touchObject.curX,i=s.touchObject.startY-s.touchObject.curY,t=Math.atan2(i,e),o=Math.round(180*t/Math.PI),o<0&&(o=360-Math.abs(o)),o<=45&&o>=0?!1===s.options.rtl?"left":"right":o<=360&&o>=315?!1===s.options.rtl?"left":"right":o>=135&&o<=225?!1===s.options.rtl?"right":"left":!0===s.options.verticalSwiping?o>=35&&o<=135?"down":"up":"vertical"},i.prototype.swipeEnd=function(e){var i,t,o=this;if(o.dragging=!1,o.swiping=!1,o.scrolling)return o.scrolling=!1,!1;if(o.interrupted=!1,o.shouldClick=!(o.touchObject.swipeLength>10),void 0===o.touchObject.curX)return!1;if(!0===o.touchObject.edgeHit&&o.$slider.trigger("edge",[o,o.swipeDirection()]),o.touchObject.swipeLength>=o.touchObject.minSwipe){switch(t=o.swipeDirection()){case"left":case"down":i=o.options.swipeToSlide?o.checkNavigable(o.currentSlide+o.getSlideCount()):o.currentSlide+o.getSlideCount(),o.currentDirection=0;break;case"right":case"up":i=o.options.swipeToSlide?o.checkNavigable(o.currentSlide-o.getSlideCount()):o.currentSlide-o.getSlideCount(),o.currentDirection=1}"vertical"!=t&&(o.slideHandler(i),o.touchObject={},o.$slider.trigger("swipe",[o,t]))}else o.touchObject.startX!==o.touchObject.curX&&(o.slideHandler(o.currentSlide),o.touchObject={})},i.prototype.swipeHandler=function(e){var i=this;if(!(!1===i.options.swipe||"ontouchend"in document&&!1===i.options.swipe||!1===i.options.draggable&&-1!==e.type.indexOf("mouse")))switch(i.touchObject.fingerCount=e.originalEvent&&void 0!==e.originalEvent.touches?e.originalEvent.touches.length:1,i.touchObject.minSwipe=i.listWidth/i.options.touchThreshold,!0===i.options.verticalSwiping&&(i.touchObject.minSwipe=i.listHeight/i.options.touchThreshold),e.data.action){case"start":i.swipeStart(e);break;case"move":i.swipeMove(e);break;case"end":i.swipeEnd(e)}},i.prototype.swipeMove=function(e){var i,t,o,s,n,r,l=this;return n=void 0!==e.originalEvent?e.originalEvent.touches:null,!(!l.dragging||l.scrolling||n&&1!==n.length)&&(i=l.getLeft(l.currentSlide),l.touchObject.curX=void 0!==n?n[0].pageX:e.clientX,l.touchObject.curY=void 0!==n?n[0].pageY:e.clientY,l.touchObject.swipeLength=Math.round(Math.sqrt(Math.pow(l.touchObject.curX-l.touchObject.startX,2))),r=Math.round(Math.sqrt(Math.pow(l.touchObject.curY-l.touchObject.startY,2))),!l.options.verticalSwiping&&!l.swiping&&r>4?(l.scrolling=!0,!1):(!0===l.options.verticalSwiping&&(l.touchObject.swipeLength=r),t=l.swipeDirection(),void 0!==e.originalEvent&&l.touchObject.swipeLength>4&&(l.swiping=!0,e.preventDefault()),s=(!1===l.options.rtl?1:-1)*(l.touchObject.curX>l.touchObject.startX?1:-1),!0===l.options.verticalSwiping&&(s=l.touchObject.curY>l.touchObject.startY?1:-1),o=l.touchObject.swipeLength,l.touchObject.edgeHit=!1,!1===l.options.infinite&&(0===l.currentSlide&&"right"===t||l.currentSlide>=l.getDotCount()&&"left"===t)&&(o=l.touchObject.swipeLength*l.options.edgeFriction,l.touchObject.edgeHit=!0),!1===l.options.vertical?l.swipeLeft=i+o*s:l.swipeLeft=i+o*(l.$list.height()/l.listWidth)*s,!0===l.options.verticalSwiping&&(l.swipeLeft=i+o*s),!0!==l.options.fade&&!1!==l.options.touchMove&&(!0===l.animating?(l.swipeLeft=null,!1):void l.setCSS(l.swipeLeft))))},i.prototype.swipeStart=function(e){var i,t=this;return t.interrupted=!0,1!==t.touchObject.fingerCount||t.slideCount<=t.options.slidesToShow?(t.touchObject={},!1):(void 0!==e.originalEvent&&void 0!==e.originalEvent.touches&&(i=e.originalEvent.touches[0]),t.touchObject.startX=t.touchObject.curX=void 0!==i?i.pageX:e.clientX,t.touchObject.startY=t.touchObject.curY=void 0!==i?i.pageY:e.clientY,void(t.dragging=!0))},i.prototype.unfilterSlides=i.prototype.slickUnfilter=function(){var e=this;null!==e.$slidesCache&&(e.unload(),e.$slideTrack.children(this.options.slide).detach(),e.$slidesCache.appendTo(e.$slideTrack),e.reinit())},i.prototype.unload=function(){var i=this;e(".slick-cloned",i.$slider).remove(),i.$dots&&i.$dots.remove(),i.$prevArrow&&i.htmlExpr.test(i.options.prevArrow)&&i.$prevArrow.remove(),i.$nextArrow&&i.htmlExpr.test(i.options.nextArrow)&&i.$nextArrow.remove(),i.$slides.removeClass("slick-slide slick-active slick-visible slick-current").attr("aria-hidden","true").css("width","")},i.prototype.unslick=function(e){var i=this;i.$slider.trigger("unslick",[i,e]),i.destroy()},i.prototype.updateArrows=function(){var e=this;Math.floor(e.options.slidesToShow/2),!0===e.options.arrows&&e.slideCount>e.options.slidesToShow&&!e.options.infinite&&(e.$prevArrow.removeClass("slick-disabled").attr("aria-disabled","false"),e.$nextArrow.removeClass("slick-disabled").attr("aria-disabled","false"),0===e.currentSlide?(e.$prevArrow.addClass("slick-disabled").attr("aria-disabled","true"),e.$nextArrow.removeClass("slick-disabled").attr("aria-disabled","false")):e.currentSlide>=e.slideCount-e.options.slidesToShow&&!1===e.options.centerMode?(e.$nextArrow.addClass("slick-disabled").attr("aria-disabled","true"),e.$prevArrow.removeClass("slick-disabled").attr("aria-disabled","false")):e.currentSlide>=e.slideCount-1&&!0===e.options.centerMode&&(e.$nextArrow.addClass("slick-disabled").attr("aria-disabled","true"),e.$prevArrow.removeClass("slick-disabled").attr("aria-disabled","false")))},i.prototype.updateDots=function(){var e=this;null!==e.$dots&&(e.$dots.find("li").removeClass("slick-active").end(),e.$dots.find("li").eq(Math.floor(e.currentSlide/e.options.slidesToScroll)).addClass("slick-active"))},i.prototype.visibility=function(){var e=this;e.options.autoplay&&(document[e.hidden]?e.interrupted=!0:e.interrupted=!1)},e.fn.slick=function(){var e,t,o=this,s=arguments[0],n=Array.prototype.slice.call(arguments,1),r=o.length;for(e=0;e` where `newversion = major | minor | patch`
+
+See [Semantic Versioning](http://semver.org) for what major, minor, and patch mean.
+
+For instance, for a version that only contains bug fixes, we run `npm version patch` to bump the version, and commit the changed and new files.
+
+Create a Pull Request of our new version for review.
+
+### Publish new version
+Now that we have a new version of the framework merged, we want to publish that version for all the world to use. Or really just us. `npm publish` will do the trick. If you don't have access to publish, ask a [collaborator on the NPM package](https://www.npmjs.com/package/dreamhost-css/access) to get you access
+
+## Updating each app
+Each DreamHost app uses the framework either as a dependency, or as a devDependency in its `package.json`.
+
+For dreamhost.com, to update the framework to the latest version, simply run `npm install dreamhost-css@latest --save-dev` and commit the changes. `package.json` should update and we're committing some of the framework files to the repo until our build process is updated.
+
+For all other repositories, to update the `package.json` to the current latest version of the framework that has been published to NPM:
+`npm install dreamhost-css@latest --save` if dependency
+`npm install dreamhost-css@latest --save-dev` if devDependency
+
+Until the framework is stable, once the package has been installed and updated, we need to compile CSS and check the app to see if anything has changed and should be fixed. Once we get to a stable version, we should only need to take this safety precaution on major releases.
diff --git a/assets/dreamhost-css/index.html b/assets/dreamhost-css/index.html
new file mode 100644
index 0000000..6e7f45f
--- /dev/null
+++ b/assets/dreamhost-css/index.html
@@ -0,0 +1,930 @@
+
+
+
+
+ dreamhost.css
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor felis eu volutpat gravida. Suspendisse et elementum eros. In id nisl euismod, vestibulum risus sit amet, dictum magna. Aenean at ullamcorper diam, et vehicula urna. Phasellus feugiat purus in felis faucibus, nec efficitur tortor imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget pharetra odio. Vivamus sagittis fringilla felis, eu accumsan ipsum suscipit eget. Phasellus tincidunt dui lectus, eu fermentum lacus euismod ut. Fusce in urna a nulla dictum cursus. Vivamus accumsan eu magna sit amet posuere. Donec vel leo a dui pretium scelerisque. Maecenas ultricies justo non ipsum tristique, eget tempor justo aliquet. Duis pellentesque venenatis quam eu efficitur.
+
+
+
+
+
Carousel
+
+
+
+
+
“DreamHost is one of the few WordPress hosting companies that actually knows WordPress. Their team is top-notch, and they are always ahead of the curve when it comes to their technology stack. We have referred hundreds of customers their way and they have never let us down.”
+
Han Solo WPBeginner.com
+
+
+
+
+
“DreamHost is one of the few WordPress hosting companies that actually knows WordPress. Their team is top-notch, and they are always ahead of the curve when it comes to their technology stack. We have referred hundreds of customers their way and they have never let us down.”
+
Han Solo WPBeginner.com
+
+
+
+
+
+
+
Alerts
+
+
+
Scary Alert
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quia recusandae dolorum sunt quisquam perspiciatis ipsam delectus voluptas laborum autem quae placeat atque officia a officiis fugiat repellendus, ab. Ducimus.
+
+
+
Neutral Alert
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quia recusandae dolorum sunt quisquam perspiciatis ipsam delectus voluptas laborum autem quae placeat atque officia a officiis fugiat repellendus, ab. Ducimus.
+
+
+
Happy Alert
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quia recusandae dolorum sunt quisquam perspiciatis ipsam delectus voluptas laborum autem quae placeat atque officia a officiis fugiat repellendus, ab. Ducimus.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quia recusandae dolorum sunt quisquam perspiciatis ipsam delectus voluptas laborum autem quae placeat atque officia a officiis fugiat repellendus, ab. Ducimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
+
+
Amet voluptate et quibusdam debitis saepe ab, ratione molestias!
+
+
+
Error rem quos iure deserunt assumenda magni, veritatis tenetur, impedit repellat soluta numquam.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptate et quibusdam debitis saepe ab, ratione molestias! Error rem quos iure deserunt assumenda magni, veritatis tenetur, impedit repellat soluta numquam.
+
+
+
+
+
+
Craig
+
Dave
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptate et quibusdam debitis saepe ab, ratione molestias!
+
+
+
Error rem quos iure deserunt assumenda magni, veritatis tenetur, impedit repellat soluta numquam.
+
+
+
+
+
+
Caching
+
Staging
+
Backup
+
Domain
+
Advanced
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptate et quibusdam debitis saepe ab, ratione molestias! Error rem quos iure deserunt assumenda magni, veritatis tenetur, impedit repellat soluta numquam.
+
+
+
+
+
Typography
+
+
Heading one
+
Heading two
+
Heading three
+
Heading four
+
+
+
Sizes
+
+
+ .t-6
+ .t-5
+ .t-4
+ .t-3
+ .t-2
+ .t-1
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quidem mollitia optio temporibus cum eius deserunt, eum tenetur minima nulla hic inventore quo tempore reprehenderit. Laboriosam maiores odio debitis, in?
+ I am small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam purus, finibus id varius at, tempor et quam. Integer rutrum lorem nulla, vel pulvinar ex semper id. Nunc consectetur lectus eu leo condimentum ornare. Vestibulum viverra dolor nunc, ac eleifend risus porttitor sit amet. Ut porttitor sit amet quam eget rhoncus. Ut ac facilisis nisi. Quisque pharetra eu est vel efficitur. Vestibulum laoreet metus et tellus viverra, vitae viverra mauris suscipit. Nullam ut aliquam dolor. Phasellus tincidunt fermentum quam, eu varius arcu pulvinar quis. Phasellus sed odio mauris. Phasellus sed urna nec justo vulputate imperdiet sit amet at mi. Vivamus consectetur tincidunt ipsum, vitae pulvinar dolor molestie id. Integer eu auctor diam, ut accumsan turpis.
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a mauris in mauris maximus rhoncus vitae sed erat. Maecenas tristique purus nisl, ac ornare odio ultrices sit amet. Suspendisse iaculis sem et nibh condimentum, nec sollicitudin ipsum vehicula. Duis porta vitae tortor vel consequat. Phasellus posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a mauris in mauris maximus rhoncus vitae sed erat. Maecenas tristique purus nisl, ac ornare odio ultrices sit amet. Suspendisse iaculis sem et nibh condimentum, nec sollicitudin ipsum vehicula. Duis porta vitae tortor vel consequat. Phasellus posuere.
+*/
+.List--icon-right > li {position: relative;}
+.List--icon-right > li > * {padding-right: 3.5em;}
+
+.List--icon-right .icon {
+ position: absolute;
+ top: 50%;
+ margin-top: -.725em;
+ margin-right: 0;
+ right: 1.5em;
+}
diff --git a/assets/dreamhost-css/src/scss/components/_modal.scss b/assets/dreamhost-css/src/scss/components/_modal.scss
new file mode 100644
index 0000000..6664835
--- /dev/null
+++ b/assets/dreamhost-css/src/scss/components/_modal.scss
@@ -0,0 +1,24 @@
+// use remodal.js
+// https://github.com/vodkabears/Remodal
+
+.Modal {
+ padding: 1.5rem;
+ border-radius: $border-radius;
+ @extend .remodal;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+}
+
+.Modal__button-group {
+ margin-top: 2rem;
+}
+
+@media screen and (min-width: $medium-breakpoint) {
+ .Modal { padding: 4.5rem }
+ .Modal__heading {
+ @include fontsize($t-5);
+ }
+}
+
+.remodal-overlay {
+ background: rgba($light-grey, .9) !important;
+}
diff --git a/assets/dreamhost-css/src/scss/components/_pagination.scss b/assets/dreamhost-css/src/scss/components/_pagination.scss
new file mode 100644
index 0000000..3932fd3
--- /dev/null
+++ b/assets/dreamhost-css/src/scss/components/_pagination.scss
@@ -0,0 +1,47 @@
+.Pagination{
+ display: inline-block;
+ margin: 0;
+
+ .Pagination__button{
+ display: inline-block;
+ background: $c-g100;
+ border:solid 1px $c-g100;
+ text-align: center;
+ border-radius: $border-radius;
+ text-indent: -5000em;
+ padding: 0.375rem;
+ vertical-align: middle;
+
+ transition: all 0.1s ease-in-out;
+
+ &:hover{
+ background: $c-w100;
+
+ .Pagination__icon{
+ color: $c-b300;
+ transform: scale(.99);
+ }
+ }
+
+ &:first-child{
+ transform: rotate(180deg);
+ }
+ }
+
+ .Pagination__status{
+ display: inline-block;
+ margin: 0;
+ padding: 0 1rem;
+ }
+
+ .Pagination__icon{
+ @extend .Icon;
+ margin: 0;
+ padding: 0;
+ height: 0.75rem;
+ width: 0.75rem;
+ color: $c-g200;
+ display: block;
+ }
+
+}
diff --git a/assets/dreamhost-css/src/scss/components/_popovers.scss b/assets/dreamhost-css/src/scss/components/_popovers.scss
new file mode 100644
index 0000000..e0b33b8
--- /dev/null
+++ b/assets/dreamhost-css/src/scss/components/_popovers.scss
@@ -0,0 +1,405 @@
+/*
+
+Popover Component
+
+ Popovers are used for any contextual content that shouldn't block
+ the user. Some common uses are dropdown menus, hovercards, tooltips.
+
+ Basic guidelines:
+ - The default theme is light.
+ - The default width is medium.
+ - Popover content can vary, there are no strict dos and don'ts.
+ - The max-height class is optional. It enforces a 60vh max-height.
+ - It is possible to nest hover popovers inside of click popovers.
+ - popovers with max-height cannot contain nested popovers.
+ - Padding size can vary.
+ - The caret is optional.
+ - Replace .on-click with .on-hover for hover popovers.
+
+ Usage:
+
+
+
+
+ This is a dark themed popover with small padding. It appears
+ below the clicked element, is flushed left, has max-height
+ enforced, and has a caret. Note, popovers must live within
+ .Popover-container. To enable popovers on hover, the
+ .on-hover class must be included on the
+ container.
+
Approachable. We’re here to help. We take complicated technical concepts and distill them down into plain english, without judgment or condescension. We speak to our customer’s experience level because we value them.
-
Conversational. We aren’t overly-formal, contrived or corporate. We’re people first, marketers second. We never sound scripted or phony.
-
Fun & irreverent. We are playful and don’t mind a little humor. We try to keep it PG-13, but no promises.
-
Authentic. We get straight to the point. We’re candid, don’t dance around touchy subjects, and are always real with people.
-
-
-
-
Style
-
-
People-Centric. There are real people working at DreamHost. There’s real people using DreamHost. We’ll never lose sight of that.
-
Playful. We’re fun! We feel positive, upbeat, and alive.
-
Relevant. We aren’t dated. We use modern best practices and aesthetics.
-
Simple. We’re clean, not cluttered. Function over form. A goal is always clear and effortless to achieve.
-
-
-
-
Personality
-
-
Educators. You can do what you want with us. We’ll tell you how.
-
Engaged. We’re not just here to take our users’ money. We’re their partner.
-
Proactive. When we see something needing improvement, we improve it.
-
Creative. We’re built by dreamers, for dreamers. The sky’s the limit, bitches!
-
Enthusiastic. People, you can do it. Our passion is infectious.
-
Inclusive. We’re all just people, tryin’ to make it in this world. Love and respect is key.
-
Welcoming. We are your host on the web. Come over and we’ll take care of you.
\ No newline at end of file
diff --git a/brand/color/index.md b/brand/color/index.md
deleted file mode 100644
index c6acbe6..0000000
--- a/brand/color/index.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Color
-layout: app
----
-
-
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers.
-
-
-
-
-
Why is color a big deal?
-
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.
The DreamHost logo plays the role of our company’s handshake. It’s typically the first thing a potential customer sees, and allows them to distinguish our products and services from our competitors’. Keeping the logo’s usage clean and consistent throughout all of our materials is an important step to building strong brand recognition.
-
-
-
-
Logo Guidelines
-
-
Establishing logo guidelines helps keep our brand consistent, allowing us to look professional and as trustworthy as possible.
-
-
Our logo should be used as demonstrated below. If for any reason these logos don’t fit your requirements, contact the brand team to discuss alternative solutions.
Our logomark is the moon shaped icon, or symbol that does not contain our company name. Popular third party examples include Apple’s apple, and Nike’s swoosh.
Our logomark should be used sparingly. Recommended usage should be limited to message board avatars, social site pro le images, or any other approved space that requires a squared image to represent the DreamHost brand.
-
-
What is clearspace?
-
-
The area that surrounds the logo is as important as the logo itself. The minimum area of ‘clear space’ provides breathing room to the logo, and eliminates visual clutter from surrounding text and graphics that may compete with our logo.
-
-
-
-
Implementation
-
The logo should be used as provided by DreamHost. No changes, including but not limited to changes in color, proportion or design. The logo may not be animated, or otherwise distorted in perspective or appearance.
-
-
-
-
-
-
Do not use the old logos
-
-
-
-
Do not change the logo colors
-
-
-
-
Do not change the logo type
-
-
-
-
-
-
-
-
Do not rotate the logo
-
-
-
-
Do not distort the logo
-
-
-
-
Do not add effects to the logo
-
-
-
-
-
-
-
Typography
-
Typography is the visual component of our written communications. It's what makes reading easier, establishing content hierarchy and making the text easier to digest. Consistent use of type makes for a successful customer experience.
-
-
-
-
-
Ubuntu
-
Ubuntu is a versatile display font that we use for headlines on our website, blog and printed collateral.
-
Note that we only use the ‘Medium’ weight of the Ubuntu font family. If you feel the need to use a thinner or heavier weight, please contact the brand team before doing so.
Proxima Nova is a light, easy to read font that we use for written content on our website, blog and printed collateral.
-
Note that we only use the ‘Regular’ weight of the Ubuntu font family. If you feel the need to use a thinner or heavier weight, please contact the brand team before doing so.
Big and bold, or small and italicized, everyone relies on the hierarchy of text.
-
Hierarchy is the organization of text. It’s how we establish an order of importance within our communications, allowing the reader to easily nd what they are looking for and navigate the content.
-
-
-
-
-
Colors
-
-
-
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers.
-
-
-
-
-
Why is color a big deal?
-
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.
We support an open web, empowering people with the tools they need to own their digital presence and succeed online.
-
-
-
-
Brand Promise
-
DreamHost is a team of experienced web experts. We understand the importance of getting your content online and in front of your audience quickly. We promise to support your efforts using the latest open source tech and award-winning support.
-
-
-
-
Vision Statement
-
People have the freedom to choose how their digital content is shared.
-
-
-
-
Noble Cause
-
We help people own their digital presence.
-
-
-
-
-
Brand Values
-
-
-
-
-
-
-
Empower People Because we don’t need any stuffy-white-shirted-tie-wearing boss micro-managing our every move, we have the autonomy to complete the projects that matter and make a difference for customers. We do all of that because we believe in giving customers the right tools they need to achieve their dreams online. By empowering our employees to be truly helpful, we also empower our customers with products and services they need to do their business, their way... and that’s what it’s all about!
Practice Shameless Honesty Anyone can say that they’re open and honest, but at DreamHost we take it to extremes. We’re a gaping hole from which truth oozes, white hot, and which ultimately brings us closer together. Being transparent with each other and with our customers is a surefire way to build trust, mutual respect, and, if we’ve had enough wine, love.
Give Everyone a Voice Everyone at every level of the organization has a voice at DreamHost! We all bring our own unique perspective and experience to every conversation, and having those diverse inputs leads to better problem solving and more productive teams. Being able to influence and inform key decisions is an important part of feeling valued at work!
Speak Hacker At DreamHost we like to ask questions and then figure out the answers because we enjoy finding creative solutions through a combination of free thinking, free speech,and, of course, free software. Simply put, we speak hacker.
Embrace Open Source DreamHost understands the world is embracing open source technology. From our infrastructure, to our software stack, to our product management tools, we believe that open source products enable us to do great things for ourselves and, more importantly, our customers. Open source gives opportunities for growth, criticism and accountability. We not only leverage the work of others but contribute code back to larger projects that benefit all users - not just ourselves and our customers. That’s the beauty of the open source world.
Practice Flexibility With a full spectrum of hosting services, our flexibility extends beyond our customer offerings and is deeply ingrained in our culture as well. We’ve been known to bend into all sorts of uncomfortable positions to serve customers and our employees better!
Provide Superhero Service DreamHost strives to max out the value and customer service we put into everything we do (see Superhero Service). We hire authentically super people, not those faceless detached robots you get at other places, because we believe that empowered employees can make better decisions and deliver top shelf service. We cultivate employee development with significant investment to grow the knowledge base and skillset of our employees.
Be Irreverent & Fun While we take our customers and the services we provide very seriously, we don’t take OURSELVES so seriously that dealing with us becomes an exercise in being PC. Life has “edges.” We tend to hangout around those edges in the way we do business, and that’s evident in the way we communicate. You are far more likely to encounter an off-the-wall, irreverent comment from us than you are to be subjected to corporate double-speak.
Approachable. We’re here to help. We take complicated technical concepts and distill them down into plain english, without judgment or condescension. We speak to our customer’s experience level because we value them.
-
Conversational. We aren’t overly-formal, contrived or corporate. We’re people first, marketers second. We never sound scripted or phony.
-
Fun & irreverent. We are playful and don’t mind a little humor. We try to keep it PG-13, but no promises.
-
Authentic. We get straight to the point. We’re candid, don’t dance around touchy subjects, and are always real with people.
-
-
-
-
Style
-
-
People-Centric. There are real people working at DreamHost. There’s real people using DreamHost. We’ll never lose sight of that.
-
Playful. We’re fun! We feel positive, upbeat, and alive.
-
Relevant. We aren’t dated. We use modern best practices and aesthetics.
-
Simple. We’re clean, not cluttered. Function over form. A goal is always clear and effortless to achieve.
-
-
-
-
Personality
-
-
Educators. You can do what you want with us. We’ll tell you how.
-
Engaged. We’re not just here to take our users’ money. We’re their partner.
-
Proactive. When we see something needing improvement, we improve it.
-
Creative. We’re built by dreamers, for dreamers. The sky’s the limit, bitches!
-
Enthusiastic. People, you can do it. Our passion is infectious.
-
Inclusive. We’re all just people, tryin’ to make it in this world. Love and respect is key.
-
Welcoming. We are your host on the web. Come over and we’ll take care of you.
-
-
\ No newline at end of file
diff --git a/brand/logo/index.md b/brand/logo/index.md
deleted file mode 100644
index 900452b..0000000
--- a/brand/logo/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Logo
-layout: app
----
-
-
The DreamHost logo plays the role of our company’s handshake. It’s typically the first thing a potential customer sees, and allows them to distinguish our products and services from our competitors’. Keeping the logo’s usage clean and consistent throughout all of our materials is an important step to building strong brand recognition.
-
-
-
-
Logo usage
-
Our logo should be used as demonstrated below. If for any reason these logos don’t fit your requirements, contact the brand team to discuss alternative solutions.
Our logomark is the moon shaped icon, or symbol that does not contain our company name. Popular third party examples include Apple’s apple, and Nike’s swoosh.
Our logomark should be used sparingly. Recommended usage should be limited to message board avatars, social site pro le images, or any other approved space that requires a squared image to represent the DreamHost brand.
-
-
What is clearspace?
-
-
The area that surrounds the logo is as important as the logo itself. The minimum area of ‘clear space’ provides breathing room to the logo, and eliminates visual clutter from surrounding text and graphics that may compete with our logo.
-
-
-
-
Guidelines
-
-
Establishing logo guidelines helps keep our brand consistent, allowing us to look professional and as trustworthy as possible.
-
-
Implementation
-
The logo should be used as provided by DreamHost. No changes, including but not limited to changes in color, proportion or design. The logo may not be animated, or otherwise distorted in perspective or appearance.
Independent We control our own destiny, and we’re still run by the same team that founded the company all those years ago. We’re not beholden to the whims of investors or some corner-cutting conglomerate.
-
-
Established We’ve been doing this for 20+ years. Over 400,000 customers worldwide call DreamHost home.
-
-
Private & Secure We actively work to protect and defend our users’ right to privacy and online security.
-
-
The best WordPress experience We’re committed to supporting WordPress and its vibrant community. Our experts know it better than anyone and our offerings make for one of the easiest and most power WordPress experiences on the web.
-
-
High-quality We pour a lot of effort into continually improving our product, and we do so to ensure a top-shelf user experience. You get what you pay for.
-
-
Comprehensive Solution With a full spectrum of hosting services at your disposal, we provide a flexible, full set of offerings to match users’ needs. DreamHost can scale with you.
-
-
In-House Experts None of us would be here if we didn’t have a passion for the web. We’re committed to innovating and helping you harness the power of an open web.
-
-
Web pioneers We’re committed to defending the open web through a combination of public advocacy, support of open source software, and the free flow of ideas and expression to the farthest corners of the internet.
\ No newline at end of file
diff --git a/brand/typography/index.md b/brand/typography/index.md
deleted file mode 100644
index 3866fa4..0000000
--- a/brand/typography/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Typography
-layout: app
----
-
-
Typography is the visual component of our written communications. It's what makes reading easier, establishing content hierarchy and making the text easier to digest. Consistent use of type makes for a successful customer experience.
-
-
-
-
-
-
Ubuntu
-
Ubuntu is a versatile display font that we use for headlines on our website, blog and printed collateral.
-
Note that we only use the ‘Medium’ weight of the Ubuntu font family. If you feel the need to use a thinner or heavier weight, please contact the brand team before doing so.
Proxima Nova is a light, easy to read font that we use for written content on our website, blog and printed collateral.
-
Note that we only use the ‘Regular’ weight of the Ubuntu font family. If you feel the need to use a thinner or heavier weight, please contact the brand team before doing so.
Big and bold, or small and italicized, everyone relies on the hierarchy of text.
-
Hierarchy is the organization of text. It’s how we establish an order of importance within our communications, allowing the reader to easily nd what they are looking for and navigate the content.
-
-
\ No newline at end of file
diff --git a/brand/values/index.md b/brand/values/index.md
deleted file mode 100644
index 6ca77d2..0000000
--- a/brand/values/index.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: Core Values
-layout: app
-toc: false
----
-
-
-
-
-
-
-
Empower People Because we don’t need any stuffy-white-shirted-tie-wearing boss micro-managing our every move, we have the autonomy to complete the projects that matter and make a difference for customers. We do all of that because we believe in giving customers the right tools they need to achieve their dreams online. By empowering our employees to be truly helpful, we also empower our customers with products and services they need to do their business, their way... and that’s what it’s all about!
Practice Shameless Honesty Anyone can say that they’re open and honest, but at DreamHost we take it to extremes. We’re a gaping hole from which truth oozes, white hot, and which ultimately brings us closer together. Being transparent with each other and with our customers is a surefire way to build trust, mutual respect, and, if we’ve had enough wine, love.
Give Everyone a Voice Everyone at every level of the organization has a voice at DreamHost! We all bring our own unique perspective and experience to every conversation, and having those diverse inputs leads to better problem solving and more productive teams. Being able to influence and inform key decisions is an important part of feeling valued at work!
Speak Hacker At DreamHost we like to ask questions and then figure out the answers because we enjoy finding creative solutions through a combination of free thinking, free speech,and, of course, free software. Simply put, we speak hacker.
Embrace Open Source DreamHost understands the world is embracing open source technology. From our infrastructure, to our software stack, to our product management tools, we believe that open source products enable us to do great things for ourselves and, more importantly, our customers. Open source gives opportunities for growth, criticism and accountability. We not only leverage the work of others but contribute code back to larger projects that benefit all users - not just ourselves and our customers. That’s the beauty of the open source world.
Practice Flexibility With a full spectrum of hosting services, our flexibility extends beyond our customer offerings and is deeply ingrained in our culture as well. We’ve been known to bend into all sorts of uncomfortable positions to serve customers and our employees better!
Provide Superhero Service DreamHost strives to max out the value and customer service we put into everything we do (see Superhero Service). We hire authentically super people, not those faceless detached robots you get at other places, because we believe that empowered employees can make better decisions and deliver top shelf service. We cultivate employee development with significant investment to grow the knowledge base and skillset of our employees.
Be Irreverent & Fun While we take our customers and the services we provide very seriously, we don’t take OURSELVES so seriously that dealing with us becomes an exercise in being PC. Life has “edges.” We tend to hangout around those edges in the way we do business, and that’s evident in the way we communicate. You are far more likely to encounter an off-the-wall, irreverent comment from us than you are to be subjected to corporate double-speak.
Color distinguishes our brand and helps us create consistent experiences across products.
+
Primary Colors
+
Colors that represent our brand, used as primary color and accents. Our primary palette is comprised of purple, white, and blue to bring boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits.
+
+
+{% for colors in site.data.colors %}
+{% for color in colors.primary %}
+
+ {% include components/swatch.html class="w-100 m-bottom-4" color=color %}
+
+{% endfor %}
+{% endfor %}
+
+
+
+
Secondary Color
+
Our secondary palette contains a variety of colors to keep things fresh and interesting. The secondary palette consists of red, green, orange, and yellow. These colors are used across
+all web apps at DreamHost.
+
+
+{% for colors in site.data.colors %}
+{% for color in colors.secondary %}
+
+ {% include components/swatch.html class="w-100 m-bottom-4" color=color %}
+
+{% endfor %}
+{% endfor %}
+
+
+
+
Gray Scale
+
Our neutral palette is a set of warm grays. Use these to enhance information especially in the UI, but also ask if gray is even necessary for larger areas. The grayscales also are used for the backgrounds and text color.
+
+
+{% for colors in site.data.colors %}
+{% for color in colors.grayscale %}
+
+ {% include components/swatch.html class="w-100 m-bottom-4" color=color %}
+
+{% endfor %}
+{% endfor %}
+
+
+
+
Example
+
In this example, we break down the usage of primary colors, secondary colors, and gray scale colors.
+
+
+
Color Usage
+
+
Contrast
+
Color contrast between text and background is important because it affects people’s ability to percieve information and is neccessary for user accessibility. Color combonations should have a color contrast ratio of above 3.0.
+
+
+
+
+
+
Why DreamHost
+
Own your virtual presence with the power of DreamHost. With 1.5 million websites already under our care, we’re ready to help you and your sites find success online.
+
+
+
Pass
+
+White on Abyss
+
+
+
+
+
+
+
Why DreamHost
+
Own your virtual presence with the power of DreamHost. With 1.5 million websites already under our care, we’re ready to help you and your sites find success online.
+
+
+
Pass
+
+White on Azure
+
+
+
+
+
+
+
Why DreamHost
+
Own your virtual presence with the power of DreamHost. With 1.5 million websites already under our care, we’re ready to help you and your sites find success online.
+
+
+
Pass
+
+Abyss on White
+
+
+
+
+
+
+
+
+
+
Why DreamHost
+
Own your virtual presence with the power of DreamHost. With 1.5 million websites already under our care, we’re ready to help you and your sites find success online.
+
+
+
Fail
+
+Smoke on White
+
+
+
+
+
+
+
Why DreamHost
+
Own your virtual presence with the power of DreamHost. With 1.5 million websites already under our care, we’re ready to help you and your sites find success online.
+
+
+
Fail
+
+Galactic on Metal
+
+
+
+
+
+
+
Why DreamHost
+
Own your virtual presence with the power of DreamHost. With 1.5 million websites already under our care, we’re ready to help you and your sites find success online.
+
+
+
Fail
+
+Coral on Sunflower
+
+
+
+
+
+
Create Emphasis
+
When used sparingly, color can be used to bring attention to important messaging
+
+
+
+
+
+
+
+
+
Do
+
+Use color to emphaize main points and attract attention.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Don’t use overly distracting color combinations.
+
+
+
+
+
+
+
Evoke Feelings
+
Colors have meanings and connotations. Below are feelings associated with different colors.
+
+
Blues & Purples - Calm, loyalty, trust
+
Greens - Nature, renewal, growth
+
Yellows & Oranges - Happiness, creative, cheerful
+
Reds - Danger, warning, passion
+
+
+
+
+
+
+
+
+
Do
+
+Do use color combinations such as blues and yellow to communicate a pleasant tone.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Don’t overuse aggressive colors such as red because it can be perceived negatively.
Make no assumptions. Only through research and analysis can we truly understand our users. Talk to them. We need to appreciate their needs in order to effectively design for our users.
-
-
-
Design with purpose
-
Every design element, from the largest to the smallest, must have a purpose, and contribute to the purpose of a larger element that it is a part of. If you can’t explain what an element is for, most likely it shouldn’t be there. Use motion to provide meaning, rather than just for aesthetic value. Why does a thing move the way that it does?
-
-
-
Effortless Usability
-
Users should be presented with a singular visual priority on any given screen. What do you want the user to do first? They should be able to effortlessly move throughout the app. Remove all obstacles for the user. Interactions should be intuitive and obvious.
-
-
-
Effortless Style
-
Designs should have a relaxed, uncomplicated aesthetic. Although deeply considered, things like color choices and typography should feel seamless and simple to users.
-
-
-
Build to last
-
Designs should be unbreakable by the user. Like a children’s toy, make sure it’s designed for exploration and impossible to misuse. Make sure designs can scale as applications grow and evolve over time.
-
-
-
Show some personality
-
The design should always be approachable. Usability is key, but without some personality injected here it’s going to feel unloved. Illustrations, iconography, motion, and language can all be used to add personality. Applications need to delight users.
-
-
-
-
-
Spacing
-
All spacing is done using an 8px scale. Starting with n-half at 4px and going to n-16 at 128px.
-
-
Color
-
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.
-
-
Primary Palette
-
The DreamHost palette is primarily derived from blue and white. The secondary palette consists of red, green, orange, and yellow. These colors are used across all web apps at DreamHost. Also included are dedicated background and grayscale classes which are derived from blue.
Off White Hex #F4F6F9 rgb(244,246,249) Sass $c-g100
-
-
-
-
-
-
-
-
Extended Palette
-
Our extended palette consists of a light and dark shade for each primary color. For convenience, different shades are numbered similarly to font weights, with 100 being lightest. Usage is also indicated by the headings below.
-
-
-
-
-
-
-
A 😃
-
A 😃
-
A 😃
-
A 😭
-
-
Royal Blue Hex #1176A5 rgb(17,118,165) Sass $c-b500
-
-
-
-
-
-
A 😃
-
A 😃
-
A 😃
-
A 😭
-
-
Baby Blue Hex #CCEFFF rgb(204,239,255) Sass $c-b100
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.
-
Color Usage
-
Our colors are important. They stir interest, add emphasis, and help provide a better user experience for our customers. When using our colors, rely on the primaries; our secondaries should be used sparingly, and only to compliment the primaries.
Lorem ipsum dolor amet portland lyft disrupt copper mug deep v af asymmetrical kinfolk. Truffaut meditation taxidermy, af 90's coloring book organic biodiesel authentic four loko schlitz gentrify distillery bushwick. Lomo iceland kogi lo-fi wolf offal. Salvia subway tile 8-bit palo santo.
-
-
-
-Lorem ipsum dolor amet portland lyft disrupt copper mug deep v af asymmetrical kinfolk. Truffaut meditation taxidermy, af 90's coloring book organic biodiesel authentic four loko schlitz gentrify distillery bushwick. Lomo iceland kogi lo-fi wolf offal. Salvia subway tile 8-bit palo santo, typewriter hella bicycle rights pabst hoodie try-hard 90's small batch. Palo santo street art food truck irony. Everyday carry church-key sustainable, taiyaki chicharrones ennui woke letterpress. Jianbing vice YOLO humblebrag pok pok pinterest.
-
-Whatever franzen palo santo, yuccie tousled distillery fingerstache fashion axe. Try-hard photo booth butcher, tilde pork belly DIY lumbersexual vice distillery four loko food truck heirloom gentrify retro. Sartorial deep v organic irony, wayfarers knausgaard palo santo lumbersexual hashtag biodiesel semiotics. Poutine fam forage tbh 8-bit occupy twee affogato quinoa cardigan. Jean shorts quinoa lumbersexual kale chips, gluten-free freegan fingerstache coloring book migas. Copper mug kombucha enamel pin 3 wolf moon, mlkshk flexitarian YOLO pickled fanny pack sustainable plaid lomo farm-to-table snackwave helvetica. Hexagon man braid VHS celiac sustainable tofu sriracha.
-
-3 wolf moon dreamcatcher af, fashion axe selfies hashtag chillwave crucifix. Cornhole plaid palo santo austin leggings slow-carb bespoke raclette cronut pickled neutra banjo selfies chia tilde. Sriracha mlkshk kogi gluten-free post-ironic DIY. Synth jianbing ethical chartreuse, hella cred health goth you probably haven't heard of them. Next level beard pok pok subway tile, vinyl disrupt shabby chic plaid mumblecore asymmetrical tattooed church-key jean shorts meggings.
diff --git a/gulpfile.js b/gulpfile.js
index 69c7b78..1d084b1 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -22,7 +22,7 @@ const cssFiles = '_css/**/*.?(s)css';
*/
-gulp.task('serve', ['styles', 'jekyll'], function() {
+gulp.task('serve', ['styles', 'styles_new', 'jekyll'], function() {
browserSync.init({
files: [siteRoot + '/**'],
@@ -35,6 +35,7 @@ gulp.task('serve', ['styles', 'jekyll'], function() {
gulp.watch(cssFiles, ['styles']);
gulp.watch("./assets/_scss/**/*.scss", ['styles']);
+ gulp.watch("./assets/_scss_new/**/*.scss", ['styles_new']);
});
/*
@@ -53,6 +54,26 @@ gulp.task('styles', function () {
.pipe(browserSync.stream());
});
+
+
+/*
+
+ ## gulp new_styles
+
+ 1. Compile the new_sass found it assets/_scss_new
+ 2. create style.css to assets/css_new
+ 3. Inject into browser with BrowserSync
+
+*/
+
+gulp.task('styles_new', function () {
+ return gulp.src('./assets/_scss_new/*.scss')
+ .pipe(sass({outputStyle_new: 'compact'}).on('error', sass.logError))
+ .pipe(gulp.dest('./assets/css_new/'))
+ .pipe(browserSync.stream());
+});
+
+
/*
## gulp jekyll
diff --git a/iconography/product/index.md b/iconography/product/index.md
new file mode 100644
index 0000000..676be58
--- /dev/null
+++ b/iconography/product/index.md
@@ -0,0 +1,109 @@
+---
+title: Product Icons
+layout: app_new
+toc: false
+---
+
+
+
+
Icons are powerful visual representations of our products and services. They are helpers that should not be overused.
+
Product Icons
+
Product icons are designed to represent DreamHost-specific products. It is generally utilized on the website and paired with the product name. Download our full product icons here.
\ No newline at end of file
diff --git a/iconography/standard/index.md b/iconography/standard/index.md
new file mode 100644
index 0000000..4b0a848
--- /dev/null
+++ b/iconography/standard/index.md
@@ -0,0 +1,94 @@
+---
+title: Standard Icons
+layout: app_new
+toc: false
+---
+
+
+
+
Icons are powerful visual representations of our products and services. They are helpers that should not be overused.
+
Standard Icons
+
Standard icons are versatile and used to signify key points, bring attention to important messages, and support wayfinding. They are utilized on web pages, marketing materials, and emails. You can request these icons by contacting the design team or browse font awesome if you have the font file.
+
+
+
+
+
+
+
+
Colors
+
Product icons comes in two treatments, Shaded and lined.
+
+
+
+
+
+
+
+
Primary Pallete
+
+
+
+
+
+
+
+
+
+
Secondary Pallete
+
+
+
+
+
+
+
+
Styling
+
Our standard icons are provided through the Font Awesome icon library where we commonly use the “Regular” styling option. Icons could be partnered with a background shape for stylistic appeal.
+
+
+
+
+
+
+
+
+
+
+
+
Examples
+
Here are some samples on how we use our standard icons
+
+
+
+
+Icons positioning is always before any text this can be on top or on the left.
+
+
+
+
+
+
+
+
+
+Icons can have backgrounds for circles we only use Off White (#F4F6F9), for the squares it is Green, Purple, or Blue and for White squares it needs to have a drop shadow for the white square to be visible.
+
+
+
+
+Icon minimum size is height is 50px
+
+
+
+
+
+
+
+
+
+
+We have a fair bit of arrow/chevron icons used in the webiste for consistency use only Gilroy Bold font arrow → ← ↑ ↓
+
Spot illustrations are used to add visual support to our marketing messaging. You’ll find them
-alongside of text on our web pages, blogs, and emails to better explain what is being said in text. Note that spot illustrations should not be used as call-to-actions, and they should only be recycled if the messaging is relevant.
-
-
-
-## Our Aim
-
-Aesthetically speaking, our illustrations must be clean, consistent and professional in their execution. They should evoke feelings of friendliness and warmth. When illustrating people, we must be thoughtful, diverse, and inclusive.
-
-
Types of illustration
-
-Our illustrations are executed in 2 main categories Spot illustrations and Spot Hero illustrations. Spot illustrations are square, singular moments or objects. Spot heros are larger, more complex rectangular scenes. Spot illustrations should always appear at half the size of Spot Hero illustrations throughout our artwork.
-
-
-
-
-
- Spot Illustration Example:
-
-
-
- Spot Hero Illustration Example:
-
-
-
-
-
-
-## Technical instructions
-
-
Software
-
-All Spot Illustrations should be created in Illustrator, exported to **.SVG** & **.EPS** in an RGB color space.
-
-
Artboard Sizes
-
-Spot illustrations should be created in a square artboard at **768px x 768px.**
-Spot hero illustrations should be Rectangular artboard at **1024px x 768px.**
-
-
Masking
-
-**Spot illustrations** can have square or circular masks within the **768px x 768px** artboard.
-**Spot hero scenes** (**1024px x 768px**) should not be masked.
-
-
-
-## Style instructions
-
-
Color Palette
-
-[Azure]({{site.baseurl}}/brand/color/) is the primary illustration color. It should be used for the main focal point of our spot illustrations. [Prince]({{site.baseurl}}/brand/color/) is the secondary illustration color. It should be used primarily as a background color to help emphasize the main object or focus of the illustration.
-
-**Azure** can be used at **100%** & **40%** opacity.
-**Prince** can be used at **40%** opacity only.
-
-
-
-
-
-
-
A 😃
-
A 😃
-
A 😃
-
A 😃
-
-
Azure Sass $c-b300 Hex #0073EC rgb(0,175,239)
-
-
-
-
-
-
A 😃
-
A 😃
-
A 😃
-
A 😃
-
-
Prince Sass $c-p300 Hex #A644E5 rgb(166,68,229)
-
-
-
-
-
-### Backgrounds
-
-Cloud and star flourishes play a supportive role in the background of our illustrations. They’re executed in **40% opacity** of the **Prince** primary color.
-
-Our Illustrations should only appear on top of **White** and **Off White** backgrounds. Other colored backgrounds are **unacceptable**.
-
-
Negative Space
-
-
-
-
Whitespace around block colors within illustrations should be 32px as shown below...
-
-
-
-
-
-
-
-
-
Our spot illustrations should have a minimum of 24px white space around them as shown below...
-
-
-
-
-
-
Our spot hero illustrations should have a minimum of 64px white space around them as shown below...
-
-
-
-
-
-
-
Strokes
-
-The stroke width should always be set at **8px**.
-The stroke settings should be set to **Round Cap, Round Corner, Align Stroke to Center**.
-
-**Never** resize the illustration without first expanding the lines in the drawing. Alternatively in the shape properties window make sure you have **Scale Corners** as well as **Scale Strokes & Effects** selected
-
-**Stroke Example:**
-
-
-
Corner Radius
-
-There are **5** types of radius detailed below that can be used to add depth to our illustrations. Generally speaking objects in the foreground should be using the larger radius. Use smaller corner radius’ to scale toward the background of the image.
-
-**Foreground - 40px / 32px / 24px / 16px / 8px - Background**
-
-
-
Shadows
-
-Shadows appear in two main sizes within our illustrations. Larger shadows are **32px** in size and
-smaller shadows appear as **16px** in size.
-
-
-
-
- Larger Shadow Example:
-
-
-
- Smaller Shadow Example:
-
-
-
-
-
-As a rule of thumb, objects that occupy around half of the canvas should use the larger shadow size and objects that occupy less than that should use the smaller size.
-
-Shadows are generated from a light source situated at the top left corner of the illustration.
-
-
-
Perspective
-
-All illustrations should be created from a front on view point and be executed in two dimensional space only.
-
-
People
-
-When creating new illustrations of people they should be initially drawn in an artboard that is **1152px** in height. The artwork should then be **outlined** so that the line thickness scales correctly. It may then be resized to fit within one of our existing artboard sizes defined above.
-
-When illustrating people be mindful of inclusion of all types of individuals, races, genders, abilities etc.
-
-Generally speaking, people should be featured in **Spot Hero** Illustrations. Their inclusion in **Spot** illustrations should be limited to featuring the torso up toward the head.
-
-
-
-
-### Export process
-
-Make sure **all hidden layers** have been **removed**.
-Make sure **all masks** are **removed**.
-Make sure you have **expanded all line art** for output.
-Be sure to **retain a copy** of the original line drawing so it may be edited easily at a later date if needed.
-SVG files should be optimized with the svgo tool.
-
-
Best Practices
-
-
-
-
- Do not resize Spot illustrations to output at icon sizes.
-
-
-
- Do not resize Spot Hero illustrations to output at Spot illustration sizes.
-
-
-
-
-
-
-Do use all illustrations at recommended relationship sizes.
-Do submit new illustrations to the lead illustrator and creative director for review and sign off.
-
diff --git a/illustrations/icons/index.md b/illustrations/icons/index.md
deleted file mode 100644
index 57d8107..0000000
--- a/illustrations/icons/index.md
+++ /dev/null
@@ -1,440 +0,0 @@
----
-title: Iconography
-layout: app
----
-
-
Below is the current collection of single color icons used throughout our products.
-
\ No newline at end of file
diff --git a/illustrations/index.md b/illustrations/index.md
new file mode 100644
index 0000000..9528916
--- /dev/null
+++ b/illustrations/index.md
@@ -0,0 +1,195 @@
+---
+title: Illustrations
+layout: app_new
+toc: false
+---
+
+
+
+
Illustrations are used to add visual support to our marketing messaging. You’ll find them alongside of text on our web pages, blogs, and emails to better explain what is being said in text. Note that spot illustrations should not be used as call-to-actions, and they should only be recycled if the messaging is relevant.
+
+
Style
+
Aesthetically speaking, our illustrations must be clean, consistent and professional
+in their execution. They should evoke feelings of friendliness and warmth. When illustrating people, we must be thoughtful, diverse, and inclusive.
+
Types of Illustrations
+
+
+
+
Stock Illustrations
+
Stock illustrations are bought online. We use the Good Studio stock library as a base to create graphics.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Representational UI
+
Representational UI’s are illustrations representing digital products, features & workflows.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Colors
+
Once downloaded, illustrations are recolored using the Dreamhost’s brand color palette. Visit the color page to learn more about how to use colors.
+
+
+
+
+
+
+
+
Do
+
+Do use the color pallete to create good contrast and color combinations.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Don’t use illustrations directly after download without recoloring to fit the color guidelines.
+
+
+
+
+
Assembly
+
Add icons, objects and background shapes to convey ideas and messaging.
+
+
+
+
+
+
+
+
Do
+
+ Do add context to the illustrations by using related icons and objects.
+
+
+
+
+
+
+
+
+
+
Don't
+
+ Don’t combine elements with contrasting styles that don’t work well together.
+
+
+
+
+
+
+
+
+
+
+
+
Templates
+
+
+
+
Blog Featured Image Template
+
Use this template size when creating a blog image that doesn’t have any content.
+
+
+
+
+
Blog Social Card Template
+
Use this template size when creating a blog image that requires to have a 50% text and 50% graphics.
+
+
+
+
+
Linkedln and Instagram Template
+
Use this template when creating a Linkedln Graphics.
+
+
+
+
+
+
Twitter Template
+
Use this template when creating a Twitter Graphics.
+
+
+
+
+
Template Usage Example
+
In this example, we break down how to build a blog graphics using the blog template and illustrations.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Export Process
+
We use Figma to create our illustrations, and export the requested images. In the lower right of the workspace find the Export section.
+Step 1: Select a image format type
+
+When exporting an image make sure to select the correct format of the illustration.
+
+Step 2: Export the image
+
+When exporting the an illustrataion make sure to follow the instructions that was given. For example blog images, we follow a JPG format.
diff --git a/index.md b/index.md
old mode 100755
new mode 100644
index ddc9c66..6cb5342
--- a/index.md
+++ b/index.md
@@ -1,49 +1,75 @@
---
-title: DreamHost Design System
-layout: app
+title: Eclipse
+layout: landing_new
toc: false
---
-
Welcome to the DreamHost design system guidelines. This documentation offers the design specification and components to implement our communications and products. Please consider these guidelines a living document that will evolve as we continue to develop our design language & culture.
-
-
-
-
Getting Started
-
-
Our design system consists of three key properties that are useful for both designers & developers working with Dreamhost.
Design a product or page using the existing Sketch pattern library.
-
Build product prototype & production code using DreamHost.css existing components creating custom styles where needed for new components.
-
Release & prove new components.
-
Add new components to Sketch pattern library.
-
Build new components into DreamHost.css framework.
-
Document new components and variants.
-
-
By following this simple workflow we will only promote tried & tested components into the living library. Party time!
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/logos/index.md b/logos/index.md
new file mode 100644
index 0000000..5ed926a
--- /dev/null
+++ b/logos/index.md
@@ -0,0 +1,224 @@
+---
+title: Logos
+layout: app_new
+toc: false
+---
+
+
+
+
+
The DreamHost logo plays the role of our company’s handshake. It’s typically the first thing a potential customer sees and allows them to distinguish our products and services from our competitors’. Keeping the logo’s usage clean and consistent throughout all of our materials is an important step to building strong brand recognition.
+
Our Name
+
Our company name is DreamHost. It is not Dreamhost Web Hosting, Dreamhost,
+DreamHost LLC, New Dream Network, or
+New Dream Networks. The DreamHost brand name uses upper camel ase. Both the D and the H should always capitalized with no space in between.
+
+
+
+
Primary Logo
+
Our logo should be used as demonstrated here. If for any reason these logos don’t fit your requirements, contact the brand team to discuss alternative solutions.
For visibility in dark elements either colour or photo backgrounds, this logo should be used.
+
+
+
+
+
+
Monochrome Version
+
Some scenarios when you would use this logo is for budget marketing materials for printing, complex colour combinations or patterns, Main colours are not attainable.
Our logomark is a moon-shaped icon or symbol that does not contain our company name. Popular third-party examples include Apple’s apple and Nike’s swoosh.
Our company name is DreamHost. It is not Dreamhost Web Hosting, Dreamhost,
+DreamHost LLC, New Dream Network, or
+New Dream Networks. The DreamHost brand name uses upper camel ase. Both the D and the H should always capitalized with no space in between.
+
+
+
Dont’s
+
Here are the samples of what not to do with the DreamHost Logo.
+
+
+
+
+
+
+
+
Don't
+
+Do not use the old logos.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Do not change the logo colors.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Do not create new versions of the logo.
+
+
+
+
+
+
+
+
+
+
+
+
+
Don't
+
+Do not rotate or distort the logo.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Do not add effects to the logo.
+
+
+
+
+
+
+
+
+
+
Don't
+
+Do not change the logo type.
+
+
+
+
+
+
+
+
+
+
Minimum sizes
+
Keeping the logo visual integrity it should not be set lower than 150px width in digital or 30mm in print.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Clearspace
+
The area that surrounds the logo is as important as the logo itself. The minimum area of ‘clear space’ provides breathing room to the logo, and eliminates visual clutter from surrounding text and graphics that may compete with our logo.
+
\ No newline at end of file
diff --git a/marketing/index.md b/marketing/index.md
deleted file mode 100644
index b28d54e..0000000
--- a/marketing/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Marketing
-layout: page
----
diff --git a/mascot/index.md b/mascot/index.md
new file mode 100644
index 0000000..a6acb3c
--- /dev/null
+++ b/mascot/index.md
@@ -0,0 +1,179 @@
+---
+title: Mascot
+layout: app_new
+toc: false
+---
+
+
+
+
Clanky
+
The DreamHost robots (known as “Clanky” and “the little one”) do not speak. When they communicate it’s in pantomime gestures only, and any props or poses of the characters should make their meaning apparent.
\ No newline at end of file
diff --git a/package.json b/package.json
index 708e2d3..72afc82 100755
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
"url": "https://github.com/dreamhost/design.git"
},
"scripts": {
- "version": "gulp dist && git add -A"
+ "version": "gulp dist && git add -A",
+ "dev": "jekyll clean && gulp"
},
"devDependencies": {
"browser-sync": "^2.18.1",
@@ -21,6 +22,10 @@
"gulp-uglify": "^2.0.1"
},
"license": "MIT",
+ "engines": {
+ "node": "<=8.9.1",
+ "npm": "<=5.5.1"
+ },
"dependencies": {
"dreamhost-css": "0.4.0"
}
diff --git a/photography/index.md b/photography/index.md
new file mode 100644
index 0000000..0a23f64
--- /dev/null
+++ b/photography/index.md
@@ -0,0 +1,270 @@
+---
+title: Photography
+layout: app_new
+toc: false
+---
+
+Imagery is a brand’s visual language. It helps tell a story, clarify complex messages that are difficult to express with words, and to show users how to perform an action.
+Find photography assets here.
+
+
Overview
+
+Photography is used as a glimpse into what it is to be human. It’s a way of showing customers that we know that life is more than just work. Behind everyone's website is a person and we want our customers to know that we are people too. With wants, needs, and feelings.
+
+They should not be distracting but add to the overall design, and feel. They should guide, and invoke feelings rather than halt and be scrutinized.
+
+Photography at DreamHost should feel organic, obtainable, and above all, authentic. We want to give customers a window into not only the life they have, but the things they want to achieve. Showing them the potential of what hosting a site can help them obtain. Freedom.
+
+
+
General Usage Guidelines
+
Colors
+Colors in photographs should feel natural, and add to the overall design of a page. They should feel like real life.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Select images with contrasting colors that works well together." src="/assets/images/photography/photograph-example-01.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t select images with unnatural or forced or manipulated coloring." src="/assets/images/photography/photograph-example-02.jpg" %}
+
+
+
+
Lighting
+Lighting is very important and can help convey the mood of a photo. Use photos with warm and natural lighting. Be mindful of portions of a photo that may contain over exposure.
+
+
+
+{% include components/card.html accent="blue" title="Do" description="Select images with natural lighting." src="/assets/images/photography/photograph-example-03.jpg" %}
+
+
+
+{% include components/card.html accent="red" title="Don’t" description="Don’t select images added gradients or lens flare." src="/assets/images/photography/photograph-example-04.jpg" %}
+
+
+
+
+
Background
+Background can give context and add to the story telling. It should be treated just as important as the subject .
+
+
+
+{% include components/card.html accent="blue" title="Do" description="Do crop images of excess background objects." src="/assets/images/photography/photograph-example-05.jpg" %}
+
+
+
+{% include components/card.html accent="red" title="Don’t" description="Don’t select images with the overuse of background or foreground blur." src="/assets/images/photography/photograph-example-06.jpg" %}
+
+
+
+
+
Content Seperations
+When a photo is next to text be sure that the subject in the image is facing the accompanying text.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do use imagery of subjects facing the content." src="/assets/images/photography/photograph-example-07.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t use imagery of subjects with their back facing the content." src="/assets/images/photography/photograph-example-08.jpg" %}
+
+
+
+
+
Photography Types
+People
+Abstract
+Landscape
+Product
+
+
People
+
+People are the main focus for our photography. People working, creating, and just living.
+When it comes to people style there are three main categories, casual, creative, and professional. When choosing a photo the subjects style should be considered. This will convey a particular mood regardless of the background content.
+
+
Casual
+
+Casual photos should feel more like everyday life. Take a moment for yourself. Enjoying the downtime. These photos usually will have people sitting on couches or leaning against something to convey the feeling of relaxation. Clothing should be something you might wear every day. Pajamas are ok in the right context but should never feel lazy or unkempt.
+
+
+
+
+
+
+
+
+
+
+
Creative
+Creative photos should highlight the process of creation. They are a behind-the-scenes look. They should include the tools involved, and can also involve the cameras being used to capture the moment. The workspaces can feel more cluttered, but not chaotic.
+
+
+
+
+
+
+
+
+
+
+
Professional
+Professional photos should show people in a business-style setting. This could be an office, or even sitting at a desk. The desk objects should feel neat and organized. The clothing should be business casual, but not stuffy.
+
+
+
+
+
+
+
+
+
+
+
+
People Usage Guidelines
+
Eye Contact
+Photos should feel candid. Like taking a picture of a friend. People should never be looking directly at the camera, with one exception:
+
+Subjects may be looking directly at the camera in the instance that it’s accompanied by some avenue of help. When people are looking for assistance they want to know that the person on the other side is giving their undivided attention.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do select images that feels candid and in-the-moment." src="/assets/images/photography/photograph-example-16.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Other than the exeption, don’t use photography with direct eye contact." src="/assets/images/photography/photograph-example-17.jpg" %}
+
+
+
+
Collaboration
+For photos that have multiple people they should be working together, or enjoying each other's company. This is a visual reminder that we are there for them and want to help them have fun, grow their success, but also that we know there’s more to life than just working.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do select images of engaging team members working together." src="/assets/images/photography/photograph-example-18.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don't select images of team members working alone." src="/assets/images/photography/photograph-example-19.jpg" %}
+
+
+
+
+
Abstract
+Abstract photography focuses on color, texture, and/or emotion. These photos are used to add visual flair to make things more natural, and organic, or cause the eye to focus on a particular element.
+
+
+
+
+
+
+
+
+
+
+
Abstract Usage Guidelines
+
Pairing
+They can be used to accompany other photography, or used as background textures, and pops of color.
+
+When people are used the subject should either be a silhouette or should be the only thing in the picture. The background should be entirely black or white. Abstract images of people are the only type of abstract photo that can be accompanied by a secondary abstract photo, but only one of the pictures can have a person in it.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do use abstract photos to compliment other photos are primary white or black." src="/assets/images/photography/photograph-example-40.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Do not pair abstract photos with another colorful photo." src="/assets/images/photography/photograph-example-41.jpg" %}
+
+
+
+
Zoom
+Texture photos are zoomed in photos of real world objects. Such as architecture, leaves, bubbles, products, etc. Things that exist in the real world. They should feel familiar but not be distracting. The natural lines created in these images can also be used as natural section breaks on pages.
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t use distracting and unfamilar photos." src="/assets/images/photography/photograph-example-27.jpg" %}
+
+
+
+
+
Landscape
+Landscape photography can be both places that feel familiar as well as places you’d love to visit. When possible it should be difficult to tell exactly where the photo is from. The goal is to resonate with the world, not a specific region.
+
+
+
+
+
+
+
+
+
+
+
+
+
Landscape Usage Guidelines
+
Location
+Landscape photography can be both places that feel familiar as well as places you’d love to visit. They convey the freedom of self expression. When possible it should be difficult to tell exactly where the photo is from. Sure, people who know will know, but it shouldn’t be the focus. The goal is to resonate with the world, not a specific region.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do use locations that would resignate with people from all over." src="/assets/images/photography/photograph-example-29.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t use easily identifiable locations." src="/assets/images/photography/photograph-example-30.jpg" %}
+
+
+
+
Top Down Perspective
+Top down photography focuses more on patterns, and colors. Similar to abstract photography, but should clearly be outdoors and feel expansive. City landscapes should usually be shown as top down photography. Not everyone lives in a big city and the top down perspective focuses less on the tall buildings and more on the patterns and people that live there.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do use top down view of cities." src="/assets/images/photography/photograph-example-31.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t use side shots of city." src="/assets/images/photography/photograph-example-32.jpg" %}
+
+
+
+
Indoor Workspaces
+Indoor workspaces are nature as we know it. These photos should only be of the spaces themselves without people in the shot. They should feel lived in and natural. They can be perfectly pristine or show recent signs of use, but shouldn’t feel staged. These photos should feel attainable, comfortable, and calming.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do select warm and inviting workspaces." src="/assets/images/photography/photograph-example-33.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t use overly sterile workspaces." src="/assets/images/photography/photograph-example-34.jpg" %}
+
+
+
+
+
Product
+When photography is chosen to represent or accompany a product it should contain technical objects. These objects should tie directly into the product being sold or enhance the idea of the product.
+
+
+
+
+
+
+
+
+
+
+
+
Product Usage Guidelines
+
Vibrant Colors
+
+For product images, use vibrant or neon colors. The colors should clearly pop and grab attention. The colors can directly tie to the product or be used to compliment the product.
+
+
+
+ {% include components/card.html accent="blue" title="Do" description="Do select vibrant or neon color photography" src="/assets/images/photography/photograph-example-37.jpg" %}
+
+
+ {% include components/card.html accent="red" title="Don’t" description="Don’t use overly sterile workspaces." src="/assets/images/photography/photograph-example-38.jpg" %}
+
Make no assumptions. Only through research and analysis can we truly understand our users. Talk to them. We need to appreciate their needs in order to effectively design for our users.
-
-
Design with purpose
-
Every design element, from the largest to the smallest, must have a purpose, and contribute to the purpose of a larger element that it is a part of. If you can’t explain what an element is for, most likely it shouldn’t be there. Use motion to provide meaning, rather than just for aesthetic value. Why does a thing move the way that it does?
-
-
Effortless Usability
-
Users should be presented with a singular visual priority on any given screen. What do you want the user to do first? They should be able to effortlessly move throughout the app. Remove all obstacles for the user. Interactions should be intuitive and obvious.
-
-
Effortless Style
-
Designs should have a relaxed, uncomplicated aesthetic. Although deeply considered, things like color choices and typography should feel seamless and simple to users.
-
-
Build to last
-
Designs should be unbreakable by the user. Like a children’s toy, make sure it’s designed for exploration and impossible to misuse. Make sure designs can scale as applications grow and evolve over time.
-
-
Show some personality
-
The design should always be approachable. Usability is key, but without some personality injected here it’s going to feel unloved. Illustrations, iconography, motion, and language can all be used to add personality. Applications need to delight users.
Make no assumptions. Only through research and analysis can we truly understand our users. Talk to them. We need to appreciate their needs in order to effectively design for our users.
+
Our Mission
+
+How we bring our vision to our customers:
+Provide personalized guidance to businesses to help them attract, captivate, and grow customers online by using our full suite of web and marketing tools, curated roadmaps, and intelligent analytics.
+
-
Accessibility for all
-
Designs should always have less able users in mind. All users should be able to navigate our products with ease, consistent navigation should be present throughout. Content should always comply with WCAG 2.0 level AA contrast standards. Text should be used to convey information rather than images of text. Headings and labels should describe topics or purpose accurately. If an error occurs and the correction is known, it should be communicated to the user clearly.
+
-
Design with purpose
-
Every design element, from the largest to the smallest, must have a purpose, and contribute to the purpose of a larger element that it is a part of. If you can’t explain what an element is for, most likely it shouldn’t be there. Use motion to provide meaning, rather than just for aesthetic value. Why does a thing move the way that it does?
+
-
Effortless usability
-
Users should be presented with a singular objective on any given screen. What do you want the user to do first? They should be able to effortlessly move throughout the experience. Remove all obstacles for the user. Interactions should be intuitive and obvious.
+
-
Visual Consistency
-
Everything we design should look and feel like it was designed by one individual. All designers should adhere to our brand guidelines and design system documentation. Any deviation should be well thought out and justifiable by the designer. Designers must focus on the details of a project whilst also considering the big picture implications of their work. How does the product or page fit within the wider context of what surrounds it? How will users feel when they approach this design from various entry points?
+
Noble Cause
+
+A meaning that unites us all:
+We help people own their digital presence.
+
+
-
Effortless Style
-
Designs should have a relaxed, uncomplicated aesthetic. Although deeply considered, things like color choices and typography should feel seamless and simple to users.
+
-
Build to last
-
Designs should be unbreakable by the user. Like a children’s toy, make sure it’s designed for exploration and impossible to misuse. Make sure designs can scale as applications grow and evolve over time.
+
-
Show some personality
-
The experience should always be approachable. Usability is key, but without some personality injected here it’s going to feel unloved. Illustrations, iconography, motion, and language can all be used to add personality. Experiences need to delight users.
+
Vision
+
+A forward-looking vision for the future of the world.
+People have the freedom to choose how their digital content is shared.
+
+
+
+
+
Style, Voice, and Tone
+
+
+
+
+
+
+
+
+
Approachable
+
We’re here to help. We take complicated technical concepts and distill them down into plain english, without judgment or condescension. We speak to our customer’s experience level because we value them.
+
+
+
+
+
+
+
+
+
+
+
Conversational
+
We aren’t overly-formal, contrived or corporate. We’re people first, marketers second. We never sound scripted or phony.
+
+
+
+
+
+
+
+
+
+
+
+
Fun & Irreverent
+
We are playful and don’t mind a little humor. We try to keep it PG-13, but no promises.
+
+
+
+
+
+
+
+
+
+
Authentic
+
We get straight to the point. We’re candid, don’t dance around touchy subjects, and are always real with people.
+
+
+
+
+
+
+
Brand Values
+
DreamHost is a team of experienced web experts. We understand the importance of getting our clients’ content online and in front of their audience quickly. We promise to support their efforts using the latest open source tech and awardwinning support. Our core values were created and adopted by employees, and reflect DreamHost’s brand promise and our actual culture.
Choice Boxes can add visual emphasis to radio buttons and checkboxes.
diff --git a/product/components/iconography/index.md b/product/components/iconography/index.md
index 92e9fe3..e985c79 100644
--- a/product/components/iconography/index.md
+++ b/product/components/iconography/index.md
@@ -1,6 +1,6 @@
---
title: Iconography
-layout: app
+layout: app_new
---
Below is the current collection of single color icons used throughout our applications.
@@ -397,4 +397,4 @@ Icons are deployed in two ways detailed below. All Icons require the .Icon
Tabbed navigation is constructed of a wrapper with the .Tabs class and an unorderded list with a .Tabs__nav-item class on each list item. Tabs can also show corresponding data on click by adding the data-tab="MyData" tag on a list item.
@@ -100,4 +100,4 @@ Primarily for use with tabbed areas with **3** or more options.
Lorem ipsum dolor sit amet.
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
diff --git a/product/components/tags/index.md b/product/components/tags/index.md
index bc2e16a..0d184c2 100644
--- a/product/components/tags/index.md
+++ b/product/components/tags/index.md
@@ -1,6 +1,6 @@
---
title: Tags
-layout: app
+layout: app_new
---
Tags can be used to accentuate content & help items standout from the crowd. Their default shape is rounded but have a square variant .Tag--square.
A two state toggle switch, for use when there is a definitive choice between two options. Each toggle switch must have a unique input id & corresponding for attribute to function independently.
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
diff --git a/product/utilities/color/index.md b/product/utilities/color/index.md
index 1746076..3211fce 100644
--- a/product/utilities/color/index.md
+++ b/product/utilities/color/index.md
@@ -1,6 +1,6 @@
---
title: Colors
-layout: app
+layout: app_new
---
Colors are prefixed with c- (eg $c-w100), and can be used directly in Sass with their variable names. In HTML, add bg-c- for backgrounds, t-c- for text color & border-c- for border color (currently limited to greyscale & Azure blue).
@@ -64,4 +64,4 @@ For the grid system, use .container for making rows with a responsi
100%
-{% endhighlight %}
\ No newline at end of file
+{% endhighlight %}
diff --git a/product/utilities/flex/index.md b/product/utilities/flex/index.md
index 38ad5cc..b4e2f19 100644
--- a/product/utilities/flex/index.md
+++ b/product/utilities/flex/index.md
@@ -1,6 +1,6 @@
---
title: Flexbox
-layout: app
+layout: app_new
---
Flexbox utilities for some fast and easy-to-use flexboxin!' Note that these utilities do not encompass every flexbox rule, but only the most commonly-used ones.
Everything contained in this framework is first designed by the team in Sketch & then if approved, promoted to our shared Sketch pattern library.
-
-
-
-
This library is created from a sequence of nested symbols within Sketch making it easier for our distributed team to maintain our ever evolving design language. You can access the library below.
Typography is the visual component
+of our written communications. It’s what makes reading easier, establishing content hierarchy and making the text easier to digest. Consistent use of type makes for a successful customer experience.
+
+
Fonts
+
+
+
+
+
Gilroy
+
Gilroy is a modern sans-serif typeface that we use on our website, blog, and printed collateral.
+Note that we use various weights of the Gilroy font family. For headers, we use “Bold” and “Semi-Bold” and for body texts, we use “Medium”.
+
Big and bold, or small and italicized, everyone relies on the hierarchy of text.
+
+Hierarchy is the organization of the text. It’s how we establish an order of importance within our communications, allowing the reader to easily read through what they are looking for and navigate the content.
+
+
+
+
+
+
Style
+
Weight
+
Size
+
Line Height
+
+
+
+{% for type in site.data.typography_marketing %}
+
+
+
{{type.style}}
+
{{type.weight}}
+
{{type.size}}
+
{{type.line_height}}
+
+
+{% endfor %}
+
+
Text & Background Pairing
+
Providing good contrast between background and texts colors will improve readability. Text should be clearly distinguishable from the background. Visit the color page to learn more about colors.
+
+
+
+{% for pairs in site.data.colors_paring %}
+
+
{{pairs.bg_name}}
+
+
+
+
+{{pairs.treatment}}
+{{pairs.base_color}}
+
+
+
+{% for emphasis in pairs.emphasis %}
+
+
+Emphasis
+{{emphasis.color_name}}
+
+{% endfor %}
+
+
+
+{% for error in pairs.error %}
+
+{{error.heading}}
+{{error.color_name}}
+{% endfor %}
+
+
+
+
+{% endfor %}
+
+
+
+
+
Button text colors
+
+
+
+
Primary Azure
+
+
+
Primary Prince
+
+
+
Primary Turtle
+
+
+
+
+
+
Primary Midnight
+
+
+
Ghost Light
+
+
+
Ghost Dark
+
+
+
+
+
+
Examples
+
In this example, we break down the usage of sizes, colors, weight, and informational hierarchy of a pricing card.
Typography is the visual component
+of our written communications. It’s what makes reading easier, establishing content hierarchy and making the text easier to digest. Consistent use of type makes for a successful customer experience.
+
+
Fonts
+
+
+
+
+
Ubuntu
+
Ubuntu is a versatile display font that we use for headlines on our website, blog, and printed collateral.
+Note that we only use the ‘Medium’ weight of the Ubuntu font family. If you feel the need to use a thinner or heavier weight, please contact the design team before doing so.
+
Proxima Nova is a light, easy-to-read font that we use for written content on our website, blog, and printed collateral.
+Note that we only use the ‘Regular’ weight of the Proxima Nova font family. If you feel the need to use a thinner or heavier weight, please contact the design team before doing so.
+
Big and bold, or small and italicized, everyone relies on the hierarchy of text.
+
+Hierarchy is the organization of the text. It’s how we establish an order of importance within our communications, allowing the reader to easily read through what they are looking for and navigate the content.
+
+
+
+
+
+
Style
+
Weight
+
Size
+
Line Height
+
+
+
+{% for type in site.data.typography_product %}
+
+
+
+
{{type.style}}
+
{{type.weight}}
+
{{type.size}}
+
{{type.line_height}}
+
+
+{% endfor %}
+
+
Text & Background Pairing
+
Providing good contrast between background and texts colors will improve readability. Text should be clearly distinguishable from the background. Visit the color page to learn more about colors.
+
+
+
+{% for pairs in site.data.colors_paring %}
+
+
{{pairs.bg_name}}
+
+
+
+
+{{pairs.treatment}}
+{{pairs.base_color}}
+
+
+
+{% for emphasis in pairs.emphasis %}
+
+
+Emphasis
+{{emphasis.color_name}}
+
+{% endfor %}
+
+
+
+{% for error in pairs.error %}
+
+{{error.heading}}
+{{error.color_name}}
+{% endfor %}
+
+
+
+
+{% endfor %}
+
+
+
+
+
+
+
Examples
+
In this example, we break down the usage of sizes, colors, weight, and informational hierarchy of one Dreamhost Web Panel section.
+ 
Han Solo WPBeginner.com
-
-
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
- 
- 
-
-
-### Export process
-
-Make sure **all hidden layers** have been **removed**.
-Make sure **all masks** are **removed**.
-Make sure you have **expanded all line art** for output.
-Be sure to **retain a copy** of the original line drawing so it may be edited easily at a later date if needed.
-SVG files should be optimized with the svgo tool.
-
-
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+