From e0502cfa3891854666c4aa142e3be536b7e03dd2 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 16:15:06 -0800 Subject: [PATCH 01/15] Initialized section and readme --- css/hybrid-projects/Readme.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 css/hybrid-projects/Readme.md diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md new file mode 100644 index 0000000..af1fcff --- /dev/null +++ b/css/hybrid-projects/Readme.md @@ -0,0 +1 @@ +# Hybrid App Projects From c0f443b013caf834ab4ae3ecd8eed166a7184de5 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 16:57:11 -0800 Subject: [PATCH 02/15] Added link to block comments page --- css/comments/Readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/comments/Readme.md b/css/comments/Readme.md index 5d2f50a..997b9f1 100644 --- a/css/comments/Readme.md +++ b/css/comments/Readme.md @@ -418,3 +418,5 @@ An example of both the doc block and dependencies can be seen here: @return $value + $modifier; } ``` + +Continue on to [Hybrid App Projects →](../hybrid-projects#hybrid-app-projects) From 0f3827e2b6fe662d271cd15309b717989c37016e Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 17:00:07 -0800 Subject: [PATCH 03/15] Added recommended structure --- css/hybrid-projects/Readme.md | 49 +++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index af1fcff..bed18c3 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -1 +1,50 @@ # Hybrid App Projects + +CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. Occasionally you will start a hybrid project for a Mobify site that was previously developed using outdated best practices, this page will outline how to start a new project and provide a minimally sized CSS file to the app. + +## Structuring Your Styles +A hybrid project has a stylesheet specific to the OS. So in a typical android app project you might have what looks like this: + +``` +/styles + /vellum + /components + /partials + /pages + + /android + /components + /partials + /pages + + stylesheet.scss + android.scss +``` + +``android.css`` will include only the components, partials, and page styles that are necessary for the app. Typically removing styles related to high-level navigation and other items that are not controlled with the native code, as well as all the styles specific to that OS. ``android.css`` would look something like this: + +```scss +// +// Including only the necessary styles for the app. +// +@charset "UTF-8"; + +// Default +@import “/vellum“; +@import “/components/componentOne.scss“; +@import “/components/componentTwo.scss“; +@import “/pages/pageOne.scss” +@import “/pages/pageTwo.scss” + +// Modules +@import “android/components/_loginModal.scss"; +@import “android/components/_pushModal.scss"; +@import “android/components/_contextNav.scss"; +@import “android/components/_checkoutCards.scss"; + +// Pages +@import “android/pages/_cart.scss"; +@import “android/pages/_pdp.scss"; +``` + +``android.css`` will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``. From 15d9c3a6f37020a2d297faae6ab3a8b5d2f93084 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 17:02:14 -0800 Subject: [PATCH 04/15] Added new page to index --- css/Readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/css/Readme.md b/css/Readme.md index fd9f9a3..388dc52 100644 --- a/css/Readme.md +++ b/css/Readme.md @@ -38,5 +38,6 @@ * [When to use their existing selectors](class-naming-conventions#when-to-use-their-existing-selectors) * [How to use their existing selectors in our components](class-naming-conventions#how-to-use-their-existing-selectors-in-our-components) * [Block Comment Documentation Guide](comments/Readme.md) +* [Hybrid Projects Best Practices](hybrid-projects/Readme.md) Continue on to [the Introduction →](introduction#introduction) From d46cd764761a36263e9edab67cadfff1d86f57d1 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 17:02:54 -0800 Subject: [PATCH 05/15] syntax fix --- css/hybrid-projects/Readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index bed18c3..423d8ee 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -33,8 +33,8 @@ A hybrid project has a stylesheet specific to the OS. So in a typical android ap @import “/vellum“; @import “/components/componentOne.scss“; @import “/components/componentTwo.scss“; -@import “/pages/pageOne.scss” -@import “/pages/pageTwo.scss” +@import “/pages/pageOne.scss”; +@import “/pages/pageTwo.scss”; // Modules @import “android/components/_loginModal.scss"; From 5855d2baa48d7ac9cd9443b69306e7b5d383d3e7 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 17:04:10 -0800 Subject: [PATCH 06/15] more syntax fixes --- css/hybrid-projects/Readme.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index 423d8ee..0f3852d 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -37,14 +37,14 @@ A hybrid project has a stylesheet specific to the OS. So in a typical android ap @import “/pages/pageTwo.scss”; // Modules -@import “android/components/_loginModal.scss"; -@import “android/components/_pushModal.scss"; -@import “android/components/_contextNav.scss"; -@import “android/components/_checkoutCards.scss"; +@import “/android/components/_loginModal.scss"; +@import “/android/components/_pushModal.scss"; +@import “/android/components/_contextNav.scss"; +@import “/android/components/_checkoutCards.scss"; // Pages -@import “android/pages/_cart.scss"; -@import “android/pages/_pdp.scss"; +@import “/android/pages/_cart.scss"; +@import “/android/pages/_pdp.scss"; ``` ``android.css`` will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``. From 48e8a7d4387dfbebd1d3d9e0d0b2dc0571f07adb Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 17:22:16 -0800 Subject: [PATCH 07/15] More changes to recommended stylesheet --- css/hybrid-projects/Readme.md | 60 +++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 23 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index 0f3852d..33c74b1 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -1,8 +1,9 @@ # Hybrid App Projects +## Structuring Your Styles + CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. Occasionally you will start a hybrid project for a Mobify site that was previously developed using outdated best practices, this page will outline how to start a new project and provide a minimally sized CSS file to the app. -## Structuring Your Styles A hybrid project has a stylesheet specific to the OS. So in a typical android app project you might have what looks like this: ``` @@ -10,41 +11,54 @@ A hybrid project has a stylesheet specific to the OS. So in a typical android ap /vellum /components /partials - /pages + /templates /android /components /partials - /pages + /templates stylesheet.scss android.scss ``` -``android.css`` will include only the components, partials, and page styles that are necessary for the app. Typically removing styles related to high-level navigation and other items that are not controlled with the native code, as well as all the styles specific to that OS. ``android.css`` would look something like this: +``android.css`` will include only the styles from the web that are necessary for the app. Typically removing styles related to high-level navigation and other items that are not controlled with the native code. Then builds on top of whats there with all the styles specific to that OS, extending the same system used to build out ``stylesheet.css``. ``android.css`` would look something like this: ```scss // // Including only the necessary styles for the app. // -@charset "UTF-8"; - -// Default -@import “/vellum“; -@import “/components/componentOne.scss“; -@import “/components/componentTwo.scss“; -@import “/pages/pageOne.scss”; -@import “/pages/pageTwo.scss”; - -// Modules -@import “/android/components/_loginModal.scss"; -@import “/android/components/_pushModal.scss"; -@import “/android/components/_contextNav.scss"; -@import “/android/components/_checkoutCards.scss"; - -// Pages -@import “/android/pages/_cart.scss"; -@import “/android/pages/_pdp.scss"; +@charset 'UTF-8'; + +// Web Defaults +@import 'vellum'; + +// Web Components +@import 'components/heading'; +@import 'components/link'; +@import 'components/loading-overlay'; + +// Web Templates +@import 'templates/root'; +@import 'templates/main'; +@import 'templates/home'; + + +// +// Android Styles +// + +// Components +@import 'android/components/arrange'; +@import 'android/components/card'; +@import 'android/components/stack'; + +// Templates +@import 'android/templates/login'; +@import 'android/templates/store-finder'; +@import 'android/templates/store-details'; +@import 'android/templates/search-error'; + ``` -``android.css`` will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``. +Stylesheets will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``, etc. From 8682ee6bd3ee42716493579e4e896545383d4548 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Thu, 27 Nov 2014 18:04:58 -0800 Subject: [PATCH 08/15] Added iOS to the example structure --- css/hybrid-projects/Readme.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index 33c74b1..4193242 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -13,12 +13,18 @@ A hybrid project has a stylesheet specific to the OS. So in a typical android ap /partials /templates + /ios + /components + /partials + /templates + /android /components /partials /templates stylesheet.scss + ios.scss android.scss ``` From b2806928e795c8bf8e8d8f7161baecac848e44b2 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Fri, 28 Nov 2014 15:18:55 -0800 Subject: [PATCH 09/15] Rewording intro --- css/hybrid-projects/Readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index 4193242..d39b44c 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -2,9 +2,9 @@ ## Structuring Your Styles -CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. Occasionally you will start a hybrid project for a Mobify site that was previously developed using outdated best practices, this page will outline how to start a new project and provide a minimally sized CSS file to the app. +CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. This page will outline how to start a new app project, avoid adhering to legacy CSS code style, and provide a minimally sized CSS file to the app. -A hybrid project has a stylesheet specific to the OS. So in a typical android app project you might have what looks like this: +A hybrid project has a stylesheet specific to the OS. So, for example, in a typical android app project, you might have what looks like this: ``` /styles From 2869ed64b8c0bc86cd17ebf102d3ea146f3693cf Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Fri, 28 Nov 2014 15:19:06 -0800 Subject: [PATCH 10/15] reformatting example css --- css/hybrid-projects/Readme.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index d39b44c..e4311f3 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -31,20 +31,21 @@ A hybrid project has a stylesheet specific to the OS. So, for example, in a typi ``android.css`` will include only the styles from the web that are necessary for the app. Typically removing styles related to high-level navigation and other items that are not controlled with the native code. Then builds on top of whats there with all the styles specific to that OS, extending the same system used to build out ``stylesheet.css``. ``android.css`` would look something like this: ```scss +@charset 'UTF-8'; + // -// Including only the necessary styles for the app. +// Including Only The Relevant Web Styles // -@charset 'UTF-8'; -// Web Defaults +// Defaults @import 'vellum'; -// Web Components +// Components @import 'components/heading'; @import 'components/link'; @import 'components/loading-overlay'; -// Web Templates +// Templates @import 'templates/root'; @import 'templates/main'; @import 'templates/home'; From 218f46d1c54772361d03f6bc527080790ed35ab3 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Mon, 1 Dec 2014 09:01:40 -0800 Subject: [PATCH 11/15] Responding to UI Dev Feedback Changed the scope of the best practices to only be for legacy projects. Also changed the structure to include all of the web styles on any app.css. --- css/hybrid-projects/Readme.md | 32 ++++++++------------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index e4311f3..4ad9366 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -1,10 +1,10 @@ # Hybrid App Projects -## Structuring Your Styles +## Structuring Your Styles For a Legacy Mobify Site -CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. This page will outline how to start a new app project, avoid adhering to legacy CSS code style, and provide a minimally sized CSS file to the app. +CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. This page will outline how to start a new app project, avoid adhering to legacy CSS code style, and provide a minimally sized CSS file to the web. -A hybrid project has a stylesheet specific to the OS. So, for example, in a typical android app project, you might have what looks like this: +A hybrid project has a stylesheet specific to the OS. So a typical app project for a legacy Mobify project would be structured as such: ``` /styles @@ -28,28 +28,11 @@ A hybrid project has a stylesheet specific to the OS. So, for example, in a typi android.scss ``` -``android.css`` will include only the styles from the web that are necessary for the app. Typically removing styles related to high-level navigation and other items that are not controlled with the native code. Then builds on top of whats there with all the styles specific to that OS, extending the same system used to build out ``stylesheet.css``. ``android.css`` would look something like this: +``android.css`` will include all of the web styles and override them as needed. Building on top of whats there with all the styles specific to that OS will help in keeping the system maintainable. The system used to build out an example ``android.css`` would look something like this: ```scss -@charset 'UTF-8'; - -// -// Including Only The Relevant Web Styles -// - -// Defaults -@import 'vellum'; - -// Components -@import 'components/heading'; -@import 'components/link'; -@import 'components/loading-overlay'; - -// Templates -@import 'templates/root'; -@import 'templates/main'; -@import 'templates/home'; - +// Web Styles +@import stylesheet.scss // // Android Styles @@ -65,7 +48,8 @@ A hybrid project has a stylesheet specific to the OS. So, for example, in a typi @import 'android/templates/store-finder'; @import 'android/templates/store-details'; @import 'android/templates/search-error'; - ``` Stylesheets will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``, etc. + +> Stay tuned for what to do on brand new projects From 69f6706a1fe261ebf494b70880aa50f60221fd34 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Mon, 1 Dec 2014 09:37:23 -0800 Subject: [PATCH 12/15] Added intended strategy for new builds. --- css/hybrid-projects/Readme.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index 4ad9366..b66dadf 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -1,6 +1,6 @@ # Hybrid App Projects -## Structuring Your Styles For a Legacy Mobify Site +## Structuring App Styles For a Legacy Mobify Site CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. This page will outline how to start a new app project, avoid adhering to legacy CSS code style, and provide a minimally sized CSS file to the web. @@ -50,6 +50,10 @@ A hybrid project has a stylesheet specific to the OS. So a typical app project f @import 'android/templates/search-error'; ``` -Stylesheets will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``, etc. +Stylesheets will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``, etc. -> Stay tuned for what to do on brand new projects +## Structuring App Styles For a Legacy Mobify Site + +The current intended strategy in mind for future new builds is to have a single stylesheet for all platforms. Incorporating platform-specific theming and components into our existing CSS system. + +This could serve to decrease the complexity associated with the system we use for legacy Mobify sites and potentially make hybrid projects easier to maintain. \ No newline at end of file From fca37054db73ef8e9ca6b7552b18d955ae511467 Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Mon, 1 Dec 2014 09:53:01 -0800 Subject: [PATCH 13/15] Added link to CSS best practices readme --- css/hybrid-projects/Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index b66dadf..9d34268 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -2,7 +2,7 @@ ## Structuring App Styles For a Legacy Mobify Site -CSS written specifically for webviews contained in a Native application should follow all normally prescribed best practices. This page will outline how to start a new app project, avoid adhering to legacy CSS code style, and provide a minimally sized CSS file to the web. +CSS written specifically for webviews contained in a Native application should follow all normally prescribed [best practices](https://github.com/mobify/mobify-code-style/tree/master/css/css-best-practices). This page will outline how to start a new app project, avoid adhering to legacy CSS code style, and provide a minimally sized CSS file to the web. A hybrid project has a stylesheet specific to the OS. So a typical app project for a legacy Mobify project would be structured as such: From c0738dbc489fd71168ed5b15f15bc761b59fa4fa Mon Sep 17 00:00:00 2001 From: Jeffrey Kamo Date: Tue, 2 Dec 2014 13:14:33 -0800 Subject: [PATCH 14/15] Fix SCSS comments to match our conventions Adjust the SCSS comments in the example stylesheet to use standard Mobify conventions. --- css/hybrid-projects/Readme.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index 9d34268..e3ab2dc 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -31,19 +31,27 @@ A hybrid project has a stylesheet specific to the OS. So a typical app project f ``android.css`` will include all of the web styles and override them as needed. Building on top of whats there with all the styles specific to that OS will help in keeping the system maintainable. The system used to build out an example ``android.css`` would look something like this: ```scss -// Web Styles +// Android Styles +// === + + +// Web Base Styles +// --- + @import stylesheet.scss -// -// Android Styles -// // Components +// --- + @import 'android/components/arrange'; @import 'android/components/card'; @import 'android/components/stack'; + // Templates +// --- + @import 'android/templates/login'; @import 'android/templates/store-finder'; @import 'android/templates/store-details'; @@ -56,4 +64,4 @@ Stylesheets will be generated and served to the page depending on the context. I The current intended strategy in mind for future new builds is to have a single stylesheet for all platforms. Incorporating platform-specific theming and components into our existing CSS system. -This could serve to decrease the complexity associated with the system we use for legacy Mobify sites and potentially make hybrid projects easier to maintain. \ No newline at end of file +This could serve to decrease the complexity associated with the system we use for legacy Mobify sites and potentially make hybrid projects easier to maintain. From 39ac6daf3ded5b515589eb63ff0cf86d37d4010f Mon Sep 17 00:00:00 2001 From: zacharyhalvorson Date: Tue, 2 Dec 2014 13:44:19 -0800 Subject: [PATCH 15/15] Fixed typo in title of section --- css/hybrid-projects/Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/hybrid-projects/Readme.md b/css/hybrid-projects/Readme.md index e3ab2dc..2f18db0 100644 --- a/css/hybrid-projects/Readme.md +++ b/css/hybrid-projects/Readme.md @@ -60,7 +60,7 @@ A hybrid project has a stylesheet specific to the OS. So a typical app project f Stylesheets will be generated and served to the page depending on the context. If it’s an android app it gets ``android.css``, if its a website it gets ``stylesheet.css``, etc. -## Structuring App Styles For a Legacy Mobify Site +## Structuring App Styles For a New Mobify Site The current intended strategy in mind for future new builds is to have a single stylesheet for all platforms. Incorporating platform-specific theming and components into our existing CSS system.