From 11d57ed0b6dd3b4418091ec70403c0fa8110c7b0 Mon Sep 17 00:00:00 2001 From: Cosmin Popovici Date: Wed, 26 Sep 2018 14:54:46 +0300 Subject: [PATCH] Update CSS resets and markup. This mirrors the coding approach in Acorn. --- CHANGELOG.md | 29 +++++ components/accordion/accordion.html | 6 +- components/alerts/alert-bg.html | 4 +- components/alerts/alert-outlined.html | 4 +- components/buttons/button-filled.html | 6 +- components/buttons/button-outlined.html | 4 +- components/buttons/button-pill.html | 6 +- components/coupon/coupon-dashed.html | 24 ++-- components/coupon/coupon-filled.html | 16 +-- components/coupon/coupon-with-image-left.html | 22 ++-- components/divider/divider.html | 6 +- .../feature-columns/feature-columns.html | 14 +- components/navigation/nav-basic.html | 8 +- components/navigation/nav-hamburger.html | 10 +- .../pricing-tables/pricing-2-col-boxed.html | 26 ++-- .../pricing-2-col-full-width.html | 26 ++-- .../pricing-tables/pricing-3-col-boxed.html | 36 +++--- .../pricing-3-col-full-width.html | 36 +++--- components/spacer/table-row-spacer.html | 2 +- components/spacer/table-spacer.html | 6 +- components/spacer/universal-spacer.html | 2 +- components/stats/basic-bkg-image.html | 26 ++-- components/stats/basic-text-centered.html | 10 +- components/stats/basic-text-left.html | 10 +- components/stats/boxed-bkg-colour.html | 18 +-- components/stats/boxed-bkg-image.html | 28 ++-- .../testimonials/testimonial-with-avatar.html | 12 +- .../testimonials/testimonial-with-border.html | 10 +- .../testimonials/testimonial-with-icon.html | 8 +- components/timeline/timeline.html | 45 +++---- examples/1-col-centered-on-desktop.html | 12 +- examples/bkg-image.html | 15 +-- examples/fluid-retina-images.html | 2 +- examples/mobile-reorder-2col.html | 4 +- examples/mobile-reorder-3col.html | 4 +- ...bkg-image.html => vml-body-bkg-image.html} | 0 grid/1-11.html | 2 +- grid/10-2.html | 2 +- grid/11-1.html | 2 +- grid/12.html | 2 +- grid/12x1.html | 2 +- grid/2-10.html | 2 +- grid/3-9.html | 2 +- grid/3x4.html | 2 +- grid/4-8.html | 2 +- grid/4x3.html | 2 +- grid/5-7.html | 2 +- grid/6-6.html | 2 +- grid/6x2.html | 2 +- grid/7-5.html | 2 +- grid/8-4.html | 2 +- grid/9-3.html | 2 +- layouts/boilerplate.html | 122 +++++++++--------- 53 files changed, 336 insertions(+), 315 deletions(-) rename examples/{body-bkg-image.html => vml-body-bkg-image.html} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff93ab4..4abdb55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,34 @@ # Changelog +## 2.1.0 + +This release adds major changes to how CSS resets, typography, spacing, and components work in Pine. It is inspired by the approach in our [Acorn framework](https://github.com/ThemeMountain/acorn). + +### Highlights + +* Smarter CSS resets => less inlined styles when your ESP does automatic inlining +* Better button visuals for Outlook: using `mso-padding-alt` to keep the looks consistent with more modern email clients +* More flexible mobile spacing utilities + * Spacers and Dividers also allow for more control on mobile +* New breakpoint for landscape phones +* Better image resets + +#### Added + +* New breakpoint (`max-width: 730px`), for landscape phones. Column widths stay the same as for desktop, but container is forced to 100% width + +#### Updated + +* All examples and components, to use the new CSS +* Outlook VML backgrounds - not using `` anymore (not needed for them to work) +* Spacers now use `‌` instead of ` ` +* Spacers on mobile are reset to zero-height. Use the new mobile spacing utilities to define how high a spacer should be on mobile (up to 60px) +* Renamed `body-bkg-image.html` example to `vml-body-bkg-image.html` + +#### Removed + +* Double `` hack for Yahoo! on mobile + ## 2.0.0 Pine has been re-written (almost) from scratch, to make it more user friendly and flexible. diff --git a/components/accordion/accordion.html b/components/accordion/accordion.html index 72823cd..e20850b 100644 --- a/components/accordion/accordion.html +++ b/components/accordion/accordion.html @@ -1,7 +1,7 @@ - +
-
 
+
‌
@@ -60,7 +60,7 @@

Lorem ipsum dolor
-
 
+
‌
diff --git a/components/alerts/alert-bg.html b/components/alerts/alert-bg.html index cc8807d..07afbfb 100644 --- a/components/alerts/alert-bg.html +++ b/components/alerts/alert-bg.html @@ -1,6 +1,6 @@ - +
- diff --git a/components/alerts/alert-outlined.html b/components/alerts/alert-outlined.html index fe9188c..09b536f 100644 --- a/components/alerts/alert-outlined.html +++ b/components/alerts/alert-outlined.html @@ -1,6 +1,6 @@ -
+ This is an alert with background colour
+
- diff --git a/components/buttons/button-filled.html b/components/buttons/button-filled.html index 61ce05c..e9b3cce 100644 --- a/components/buttons/button-filled.html +++ b/components/buttons/button-filled.html @@ -1,7 +1,7 @@ -
+ This is an alert with an outline border
+
-
- Button text + + Button text
diff --git a/components/buttons/button-outlined.html b/components/buttons/button-outlined.html index 0756922..4cbb33b 100644 --- a/components/buttons/button-outlined.html +++ b/components/buttons/button-outlined.html @@ -1,7 +1,7 @@ -
- Button text + + Button text
diff --git a/components/buttons/button-pill.html b/components/buttons/button-pill.html index faf9ee1..724ac2d 100644 --- a/components/buttons/button-pill.html +++ b/components/buttons/button-pill.html @@ -1,7 +1,7 @@ - +
-
- Button text + + Button text
diff --git a/components/coupon/coupon-dashed.html b/components/coupon/coupon-dashed.html index 7185a92..0df21a7 100644 --- a/components/coupon/coupon-dashed.html +++ b/components/coupon/coupon-dashed.html @@ -1,16 +1,16 @@ - +
- +
- + - diff --git a/components/coupon/coupon-filled.html b/components/coupon/coupon-filled.html index c6b8092..c6b11e1 100644 --- a/components/coupon/coupon-filled.html +++ b/components/coupon/coupon-filled.html @@ -1,18 +1,18 @@ -
 ‌
- + - +
+
25 @@ -19,20 +19,20 @@
-
With coupon 25OFFTODAY
-
 
- +

With coupon 25OFFTODAY

+
‌
+
-
- REDEEM COUPON → + + REDEEM COUPON →
-
 
+
‌
 ‌
+
-
+ -
+
Thanks for signing up!
Enjoy
$10 OFF
-
 
+
‌
Your first order
-
 
- +
‌
+
-
- SHOP NOW + + SHOP NOW
diff --git a/components/coupon/coupon-with-image-left.html b/components/coupon/coupon-with-image-left.html index ea529bf..feb74d8 100644 --- a/components/coupon/coupon-with-image-left.html +++ b/components/coupon/coupon-with-image-left.html @@ -1,30 +1,30 @@ - +
- +
 ‌
- - +
- Coupon Image + + Coupon Image -
-
 
+ 		+
‌
Mondays suck, so
Get $25 OFF
Your next order
- +
-
- REDEEM COUPON → + + REDEEM COUPON →
-
 
+
‌
@@ -34,6 +34,6 @@
 ‌
diff --git a/components/divider/divider.html b/components/divider/divider.html index a01d615..d08f5ad 100644 --- a/components/divider/divider.html +++ b/components/divider/divider.html @@ -1,7 +1,7 @@ - +
-
-
 
+ 		+
‌
diff --git a/components/feature-columns/feature-columns.html b/components/feature-columns/feature-columns.html index 3533fbb..89b3381 100644 --- a/components/feature-columns/feature-columns.html +++ b/components/feature-columns/feature-columns.html @@ -1,17 +1,17 @@ - +
- -
- Download + + Download

Download our app

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 - Download + + Download

Take control

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/components/navigation/nav-basic.html b/components/navigation/nav-basic.html index 76fc842..79e803b 100644 --- a/components/navigation/nav-basic.html +++ b/components/navigation/nav-basic.html @@ -1,15 +1,15 @@ - - - - diff --git a/components/navigation/nav-hamburger.html b/components/navigation/nav-hamburger.html index fb4093c..a4aaeb3 100644 --- a/components/navigation/nav-hamburger.html +++ b/components/navigation/nav-hamburger.html @@ -1,20 +1,20 @@
- +
- - - - diff --git a/components/pricing-tables/pricing-2-col-boxed.html b/components/pricing-tables/pricing-2-col-boxed.html index 32a396f..ef784cc 100644 --- a/components/pricing-tables/pricing-2-col-boxed.html +++ b/components/pricing-tables/pricing-2-col-boxed.html @@ -1,10 +1,10 @@ - +
-
 
+
‌
- -
+
@@ -17,16 +17,16 @@
-
 
- +
‌
+
-
- Sign Up + + Sign Up
+
@@ -39,18 +39,18 @@
-
 
- +
‌
+
-
- Sign Up + + Sign Up
-
 
+
‌
diff --git a/components/pricing-tables/pricing-2-col-full-width.html b/components/pricing-tables/pricing-2-col-full-width.html index 1fdebc6..9a62baf 100644 --- a/components/pricing-tables/pricing-2-col-full-width.html +++ b/components/pricing-tables/pricing-2-col-full-width.html @@ -1,10 +1,10 @@ - +
-
 
+
‌
- -
+
@@ -17,16 +17,16 @@
-
 
- +
‌
+
-
- Sign Up + + Sign Up
+
@@ -39,18 +39,18 @@
-
 
- +
‌
+
-
- Sign Up + + Sign Up
-
 
+
‌
diff --git a/components/pricing-tables/pricing-3-col-boxed.html b/components/pricing-tables/pricing-3-col-boxed.html index c2ac40e..aa77db0 100644 --- a/components/pricing-tables/pricing-3-col-boxed.html +++ b/components/pricing-tables/pricing-3-col-boxed.html @@ -1,10 +1,10 @@ - +
-
 
+
‌
- - -
+
@@ -16,11 +16,11 @@
Advertising
-
-
-
 
- +
‌
+
-
- Sign Up + + Sign Up
@@ -28,7 +28,7 @@
+
@@ -40,11 +40,11 @@
No Advertising
-
-
-
 
- +
‌
+
-
- Sign Up + + Sign Up
@@ -52,7 +52,7 @@
+
@@ -64,11 +64,11 @@
No Advertising
Infinite Song Plays
300K Video Plays
-
 
- +
‌
+
-
- Sign Up + + Sign Up
@@ -78,7 +78,7 @@
-
 
+
‌
diff --git a/components/pricing-tables/pricing-3-col-full-width.html b/components/pricing-tables/pricing-3-col-full-width.html index 1c13cbb..d69a779 100644 --- a/components/pricing-tables/pricing-3-col-full-width.html +++ b/components/pricing-tables/pricing-3-col-full-width.html @@ -1,10 +1,10 @@ - +
- + diff --git a/components/spacer/table-spacer.html b/components/spacer/table-spacer.html index a57ee50..d3b0db5 100644 --- a/components/spacer/table-spacer.html +++ b/components/spacer/table-spacer.html @@ -1,7 +1,5 @@ -
-
 
+
‌
- - -
+
@@ -16,11 +16,11 @@
Advertising
-
-
-
 
- +
‌
+
-
- Sign Up + + Sign Up
@@ -28,7 +28,7 @@
+
@@ -40,11 +40,11 @@
No Advertising
-
-
-
 
- +
‌
+
-
- Sign Up + + Sign Up
@@ -52,7 +52,7 @@
+
@@ -64,11 +64,11 @@
No Advertising
Infinite Song Plays
300K Video Plays
-
 
- +
‌
+
-
- Sign Up + + Sign Up
@@ -78,7 +78,7 @@
-
 
+
‌
diff --git a/components/spacer/table-row-spacer.html b/components/spacer/table-row-spacer.html index 2dc97c1..9ee29b5 100644 --- a/components/spacer/table-row-spacer.html +++ b/components/spacer/table-row-spacer.html @@ -1,3 +1,3 @@
 
+
- +
-
 
-
diff --git a/components/spacer/universal-spacer.html b/components/spacer/universal-spacer.html index c554358..1304a0c 100644 --- a/components/spacer/universal-spacer.html +++ b/components/spacer/universal-spacer.html @@ -1 +1 @@ -
 
+
‌
diff --git a/components/stats/basic-bkg-image.html b/components/stats/basic-bkg-image.html index cfa0d92..c6ec135 100644 --- a/components/stats/basic-bkg-image.html +++ b/components/stats/basic-bkg-image.html @@ -1,31 +1,29 @@ - +
-
+ -
 
- +
‌
+ - - -
 
- +
‌
+
diff --git a/components/stats/basic-text-centered.html b/components/stats/basic-text-centered.html index 22aac9f..b71c5a8 100644 --- a/components/stats/basic-text-centered.html +++ b/components/stats/basic-text-centered.html @@ -1,14 +1,14 @@ - +
-
 
+
‌
- - @@ -18,7 +18,7 @@

Awards Earned

+

New Clients '14

2,200+
 +

Accounts Since '10

4,000+
-
 
+
‌
diff --git a/components/stats/basic-text-left.html b/components/stats/basic-text-left.html index 969223c..d634a6e 100644 --- a/components/stats/basic-text-left.html +++ b/components/stats/basic-text-left.html @@ -1,14 +1,14 @@ - +
-
 
+
‌
- - @@ -18,7 +18,7 @@

Awards Earned

+

New Clients '14

2,200+
 +

Accounts Since '10

4,000+
-
 
+
‌
diff --git a/components/stats/boxed-bkg-colour.html b/components/stats/boxed-bkg-colour.html index 853aa10..b5696b2 100644 --- a/components/stats/boxed-bkg-colour.html +++ b/components/stats/boxed-bkg-colour.html @@ -1,17 +1,17 @@ - +
- +
 ‌
- - +
+
-
1,556 Houses
-
SINCE JANUARY '13
+

1,556 Houses

+

SINCE JANUARY '13
@@ -19,9 +19,9 @@ 		-
-
643 Clients
-
SINCE AUGUST '10
+ 		+

643 Clients

+

SINCE AUGUST '10
@@ -31,6 +31,6 @@
 ‌
diff --git a/components/stats/boxed-bkg-image.html b/components/stats/boxed-bkg-image.html index bd07f02..810d01f 100644 --- a/components/stats/boxed-bkg-image.html +++ b/components/stats/boxed-bkg-image.html @@ -1,40 +1,38 @@ - +
-
+ -
 
- +
‌
+ - - + -
 
- +
‌
+
diff --git a/components/testimonials/testimonial-with-avatar.html b/components/testimonials/testimonial-with-avatar.html index abd2112..8d47a9a 100644 --- a/components/testimonials/testimonial-with-avatar.html +++ b/components/testimonials/testimonial-with-avatar.html @@ -1,17 +1,17 @@ - +
-
-
 
- +
+
‌
+
- Avatar + Avatar

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs
-
 
+
‌
diff --git a/components/testimonials/testimonial-with-border.html b/components/testimonials/testimonial-with-border.html index d7bcdcb..692356a 100644 --- a/components/testimonials/testimonial-with-border.html +++ b/components/testimonials/testimonial-with-border.html @@ -1,16 +1,16 @@ - +
-
-
 
+ 		+
‌
-
+

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs
-
 
+
‌
diff --git a/components/testimonials/testimonial-with-icon.html b/components/testimonials/testimonial-with-icon.html index b7d71f1..0e269f2 100644 --- a/components/testimonials/testimonial-with-icon.html +++ b/components/testimonials/testimonial-with-icon.html @@ -1,17 +1,17 @@ - +
-
 
+
‌
- Quote + Quote

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs
-
 
+
‌
diff --git a/components/timeline/timeline.html b/components/timeline/timeline.html index 8789e58..508bab4 100644 --- a/components/timeline/timeline.html +++ b/components/timeline/timeline.html @@ -1,53 +1,50 @@ - +
-
 
+
‌
- -
-
2007 - 2008
+ 		+ 2007 - 2008 - | + | -

Massachusetts Institute of Technology

-
 
-
Co-wrote a book on the Semantic Web and Best Practices for Developers. Awarded the MIT entreprenur of the year.
+ 		+

Massachusetts Institute of Technology

+

Co-wrote a book on the Semantic Web and Best Practices for Developers. Awarded the MIT entreprenur of the year.
- -
-
2004 - 2006
+ 		+ 2004 - 2006 - | + | -

Parsons School of Design

-
 
-
Awarded Best Designer of the Year voted by student and teacher body.
+ 		+

Parsons School of Design

+

Awarded Best Designer of the Year voted by student and teacher body.
- -
-
2002 - 2004
+ 		+ 2002 - 2004 - | + | -

Berkley College

-
 
-
Two year program with a focus on design principles and Javascript development. Won National Student Design Competition for Application Design.
+ 		+

Berkley College

+

Two year program with a focus on design principles and Javascript development. Won National Student Design Competition for Application Design.
-
 
+
‌
diff --git a/examples/1-col-centered-on-desktop.html b/examples/1-col-centered-on-desktop.html index 445125a..c3cc0c1 100644 --- a/examples/1-col-centered-on-desktop.html +++ b/examples/1-col-centered-on-desktop.html @@ -1,12 +1,12 @@ - +
-
- +