Skip to content

Instantly share code, notes, and snippets.

@kennyadsl

kennyadsl/better-theming

Created April 8, 2015 18:24
Show Gist options
  • Save kennyadsl/636c2c3dddd08ec94200 to your computer and use it in GitHub Desktop.
Save kennyadsl/636c2c3dddd08ec94200 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
better-theming
commit 87e14e7ce3ffac5be0f32248cd2505c8e3ebf60d
Author: Alberto Vena <[email protected]>
Date: Wed Apr 8 20:21:53 2015 +0200
adds intial work to allow better theming
diff --git a/theme_sample/cart.html b/theme_sample/cart.html
index 459054c..be26636 100644
--- a/theme_sample/cart.html
+++ b/theme_sample/cart.html
@@ -17,13 +17,11 @@
</head>
<body>
+ <header class="main-header" id="main-header">
+ <div class="container main-header-container">
- <header id="main-header">
- <div class="container">
-
- <div class="grid">
-
- <div class="grid__col grid__col--2-of-6">
+ <div class="grid main-header-container-grid">
+ <div class="grid__col grid__col--2-of-6 store-name-wrapper">
<h1 class="store-name">
<a href="./index.html">
Store 1427738660
@@ -31,33 +29,30 @@
</h1>
</div>
- <div class="grid__col grid__col--3-of-6">
- <nav id="main-menu">
- <a href="./index.html">Home</a>
- <a href="./category.html">Categories</a>
- <a href="./contact.html">Contact Us</a>
+ <div class="grid__col grid__col--3-of-6 main-menu-wrapper">
+ <nav id="main-menu" class="main-menu">
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./category.html">Categories</a></li>
+ <li><a href="./contact.html">Contact Us</a></li>
</nav>
</div>
- <div class="grid__col grid__col--1-of-6">
-
- <div id="cart-top" class="text-right">
+ <div class="grid__col grid__col--1-of-6 cart-link-wrapper">
+ <div id="cart-top" class="text-right cart-link">
<a href="./cart.html">
- <span class="ti-shopping-cart"></span>
- <span class="text">View Cart</span>
+ <span class="ti-shopping-cart cart-link-icon"></span>
+ <span class="text cart-link-text">View Cart</span>
</a>
</div>
-
</div>
</div>
-
</div>
</header>
- <div class="container">
- <main id="main-content" role="main">
-
+ <div class="container main-content-wrapper">
+ <main id="main-content" role="main" class="main-content">
+
<div class="page-header">
<h1 class="page-title">Cart</h1>
</div>
diff --git a/theme_sample/category.html b/theme_sample/category.html
index e4f3374..cef71bd 100644
--- a/theme_sample/category.html
+++ b/theme_sample/category.html
@@ -17,13 +17,11 @@
</head>
<body>
+ <header class="main-header" id="main-header">
+ <div class="container main-header-container">
- <header id="main-header">
- <div class="container">
-
- <div class="grid">
-
- <div class="grid__col grid__col--2-of-6">
+ <div class="grid main-header-container-grid">
+ <div class="grid__col grid__col--2-of-6 store-name-wrapper">
<h1 class="store-name">
<a href="./index.html">
Store 1427738660
@@ -31,33 +29,30 @@
</h1>
</div>
- <div class="grid__col grid__col--3-of-6">
- <nav id="main-menu">
- <a href="./index.html">Home</a>
- <a href="./category.html">Categories</a>
- <a href="./contact.html">Contact Us</a>
+ <div class="grid__col grid__col--3-of-6 main-menu-wrapper">
+ <nav id="main-menu" class="main-menu">
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./category.html">Categories</a></li>
+ <li><a href="./contact.html">Contact Us</a></li>
</nav>
</div>
- <div class="grid__col grid__col--1-of-6">
-
- <div id="cart-top" class="text-right">
+ <div class="grid__col grid__col--1-of-6 cart-link-wrapper">
+ <div id="cart-top" class="text-right cart-link">
<a href="./cart.html">
- <span class="ti-shopping-cart"></span>
- <span class="text">View Cart</span>
+ <span class="ti-shopping-cart cart-link-icon"></span>
+ <span class="text cart-link-text">View Cart</span>
</a>
</div>
-
</div>
</div>
-
</div>
</header>
- <div class="container">
- <main id="main-content" role="main">
- <div class="container">
+ <div class="container main-content-wrapper">
+ <main id="main-content" role="main" class="main-content">
+ <div class="container" class="main-content-container">
<div class="front-section">
Products &gt; Categories &gt; Electronics
diff --git a/theme_sample/contact.html b/theme_sample/contact.html
index 168b0d1..94a212e 100644
--- a/theme_sample/contact.html
+++ b/theme_sample/contact.html
@@ -17,13 +17,11 @@
</head>
<body>
+ <header class="main-header" id="main-header">
+ <div class="container main-header-container">
- <header id="main-header">
- <div class="container">
-
- <div class="grid">
-
- <div class="grid__col grid__col--2-of-6">
+ <div class="grid main-header-container-grid">
+ <div class="grid__col grid__col--2-of-6 store-name-wrapper">
<h1 class="store-name">
<a href="./index.html">
Store 1427738660
@@ -31,33 +29,30 @@
</h1>
</div>
- <div class="grid__col grid__col--3-of-6">
- <nav id="main-menu">
- <a href="./index.html">Home</a>
- <a href="./category.html">Categories</a>
- <a href="./contact.html">Contact Us</a>
+ <div class="grid__col grid__col--3-of-6 main-menu-wrapper">
+ <nav id="main-menu" class="main-menu">
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./category.html">Categories</a></li>
+ <li><a href="./contact.html">Contact Us</a></li>
</nav>
</div>
- <div class="grid__col grid__col--1-of-6">
-
- <div id="cart-top" class="text-right">
+ <div class="grid__col grid__col--1-of-6 cart-link-wrapper">
+ <div id="cart-top" class="text-right cart-link">
<a href="./cart.html">
- <span class="ti-shopping-cart"></span>
- <span class="text">View Cart</span>
+ <span class="ti-shopping-cart cart-link-icon"></span>
+ <span class="text cart-link-text">View Cart</span>
</a>
</div>
-
</div>
</div>
-
</div>
</header>
- <div class="container">
- <main id="main-content" role="main">
- <div class="container">
+ <div class="container main-content-wrapper">
+ <main id="main-content" role="main" class="main-content">
+ <div class="container" class="main-content-container">
<div class="page-content">
diff --git a/theme_sample/index.html b/theme_sample/index.html
index 75d4200..b82077f 100644
--- a/theme_sample/index.html
+++ b/theme_sample/index.html
@@ -17,13 +17,11 @@
</head>
<body>
+ <header class="main-header" id="main-header">
+ <div class="container main-header-container">
- <header id="main-header">
- <div class="container">
-
- <div class="grid">
-
- <div class="grid__col grid__col--2-of-6">
+ <div class="grid main-header-container-grid">
+ <div class="grid__col grid__col--2-of-6 store-name-wrapper">
<h1 class="store-name">
<a href="./index.html">
Store 1427738660
@@ -31,42 +29,37 @@
</h1>
</div>
- <div class="grid__col grid__col--3-of-6">
- <nav id="main-menu">
- <a href="./index.html">Home</a>
- <a href="./category.html">Categories</a>
- <a href="./contact.html">Contact Us</a>
+ <div class="grid__col grid__col--3-of-6 main-menu-wrapper">
+ <nav id="main-menu" class="main-menu">
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./category.html">Categories</a></li>
+ <li><a href="./contact.html">Contact Us</a></li>
</nav>
</div>
- <div class="grid__col grid__col--1-of-6">
-
- <div id="cart-top" class="text-right">
+ <div class="grid__col grid__col--1-of-6 cart-link-wrapper">
+ <div id="cart-top" class="text-right cart-link">
<a href="./cart.html">
- <span class="ti-shopping-cart"></span>
- <span class="text">View Cart</span>
+ <span class="ti-shopping-cart cart-link-icon"></span>
+ <span class="text cart-link-text">View Cart</span>
</a>
</div>
-
</div>
</div>
-
</div>
</header>
- <div class="container">
- <main id="main-content" role="main">
- <div class="container">
+ <div class="container main-content-wrapper">
+ <main id="main-content" role="main" class="main-content">
+ <div class="container" class="main-content-container">
<div class="front-section">
<h4 class="front-section-title">
Featured Products
</h4>
<div class="grid">
-
-
<div class="grid__col grid__col--1-of-4">
<div class="product-item text-center">
<a href="./product.html?gorgeous-cotton-gloves">
diff --git a/theme_sample/privacy.html b/theme_sample/privacy.html
index 332bda4..5a57615 100644
--- a/theme_sample/privacy.html
+++ b/theme_sample/privacy.html
@@ -17,13 +17,11 @@
</head>
<body>
+ <header class="main-header" id="main-header">
+ <div class="container main-header-container">
- <header id="main-header">
- <div class="container">
-
- <div class="grid">
-
- <div class="grid__col grid__col--2-of-6">
+ <div class="grid main-header-container-grid">
+ <div class="grid__col grid__col--2-of-6 store-name-wrapper">
<h1 class="store-name">
<a href="./index.html">
Store 1427738660
@@ -31,33 +29,30 @@
</h1>
</div>
- <div class="grid__col grid__col--3-of-6">
- <nav id="main-menu">
- <a href="./index.html">Home</a>
- <a href="./category.html">Categories</a>
- <a href="./contact.html">Contact Us</a>
+ <div class="grid__col grid__col--3-of-6 main-menu-wrapper">
+ <nav id="main-menu" class="main-menu">
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./category.html">Categories</a></li>
+ <li><a href="./contact.html">Contact Us</a></li>
</nav>
</div>
- <div class="grid__col grid__col--1-of-6">
-
- <div id="cart-top" class="text-right">
+ <div class="grid__col grid__col--1-of-6 cart-link-wrapper">
+ <div id="cart-top" class="text-right cart-link">
<a href="./cart.html">
- <span class="ti-shopping-cart"></span>
- <span class="text">View Cart</span>
+ <span class="ti-shopping-cart cart-link-icon"></span>
+ <span class="text cart-link-text">View Cart</span>
</a>
</div>
-
</div>
</div>
-
</div>
</header>
- <div class="container">
- <main id="main-content" role="main">
- <div class="container">
+ <div class="container main-content-wrapper">
+ <main id="main-content" role="main" class="main-content">
+ <div class="container" class="main-content-container">
<div class="page-content">
diff --git a/theme_sample/product.html b/theme_sample/product.html
index 909adc6..fcb7bf5 100644
--- a/theme_sample/product.html
+++ b/theme_sample/product.html
@@ -17,13 +17,11 @@
</head>
<body>
+ <header class="main-header" id="main-header">
+ <div class="container main-header-container">
- <header id="main-header">
- <div class="container">
-
- <div class="grid">
-
- <div class="grid__col grid__col--2-of-6">
+ <div class="grid main-header-container-grid">
+ <div class="grid__col grid__col--2-of-6 store-name-wrapper">
<h1 class="store-name">
<a href="./index.html">
Store 1427738660
@@ -31,32 +29,29 @@
</h1>
</div>
- <div class="grid__col grid__col--3-of-6">
- <nav id="main-menu">
- <a href="./index.html">Home</a>
- <a href="./category.html">Categories</a>
- <a href="./contact.html">Contact Us</a>
+ <div class="grid__col grid__col--3-of-6 main-menu-wrapper">
+ <nav id="main-menu" class="main-menu">
+ <li><a href="./index.html">Home</a></li>
+ <li><a href="./category.html">Categories</a></li>
+ <li><a href="./contact.html">Contact Us</a></li>
</nav>
</div>
- <div class="grid__col grid__col--1-of-6">
-
- <div id="cart-top" class="text-right">
+ <div class="grid__col grid__col--1-of-6 cart-link-wrapper">
+ <div id="cart-top" class="text-right cart-link">
<a href="./cart.html">
- <span class="ti-shopping-cart"></span>
- <span class="text">View Cart</span>
+ <span class="ti-shopping-cart cart-link-icon"></span>
+ <span class="text cart-link-text">View Cart</span>
</a>
</div>
-
</div>
</div>
-
</div>
</header>
- <div class="container">
- <main id="main-content" role="main">
+ <div class="container main-content-wrapper">
+ <main id="main-content" role="main" class="main-content">
<div class="grid">
<div class="grid__col grid__col--6-of-12">
<div id="product-images-wrapper">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment