rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor the css layout to use grid and flex 

Remove #primary

Remove #primary, take 2

Change primary layout module to CSS grid.

Remove ::before / ::after based clearfixes. When using flex and grid, pseudo-elements are considered flex/grid elements and cause unexpected behavior. Clearfix is a tool to resolve clearing when using float-based layouts. Modern flex/grid-based layouts do not need them.

Main menu: Use flex as layout module.

Main menu cleanup.

Comments, Posts, and Post Navigation: Use flex for layout. Automatic RTL.

Remove errant test data.

- Fixed skip to content link to point to main content (#primary).
- Changed ID for <main> to #primary to preserve original separation between main and sidebar (#secondary).
- Removed superfluous ID reference to #secondary in CSS.
- Cleaned up whitespace triggering Travis errors.

Fix wpcs issues

Cleaning the rebase

Compile CSS

Remove primary div from WooCommerce too

grid-template-columns property doesn't support negative values
This commit is contained in:
Morten Rand-Hendriksen 2018-01-02 14:57:02 -08:00 committed by Ismail El Korchi
parent 0fb601bdbe
commit 31df4716c8
25 changed files with 123 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
404.php
View File

@ -10,8 +10,7 @@
get_header(); get_header();
?> ?>
<div id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<section class="error-404 not-found"> <section class="error-404 not-found">
<header class="page-header"> <header class="page-header">
@ -56,7 +55,6 @@ get_header();
</section><!-- .error-404 --> </section><!-- .error-404 -->
</main><!-- #main --> </main><!-- #main -->
</div><!-- #primary -->
<?php <?php
get_footer(); get_footer();

2
README.md
View File

@ -13,7 +13,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
* Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication. * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
* Some small tweaks in `inc/template-functions.php` that can improve your theming experience. * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
* A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`. * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
* 2 sample CSS layouts in `layouts/` for a sidebar on either side of your content. * 2 sample CSS layouts in `layouts/` made using CSS Grid Layout Module for a sidebar on either side of your content.
Note: `.no-sidebar` styles are not automatically loaded. Note: `.no-sidebar` styles are not automatically loaded.
* Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground. * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
* Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled. * Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.

4
archive.php
View File

@ -10,8 +10,7 @@
get_header(); get_header();
?> ?>
<div id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
@ -46,7 +45,6 @@ get_header();
?> ?>
</main><!-- #main --> </main><!-- #main -->
</div><!-- #primary -->
<?php <?php
get_sidebar(); get_sidebar();

2
footer.php
View File

@ -11,8 +11,6 @@
?> ?>
</div><!-- #content -->
<footer id="colophon" class="site-footer"> <footer id="colophon" class="site-footer">
<div class="site-info"> <div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', '_s' ) ); ?>"> <a href="<?php echo esc_url( __( 'https://wordpress.org/', '_s' ) ); ?>">

4
header.php
View File

@ -23,7 +23,7 @@
<body <?php body_class(); ?>> <body <?php body_class(); ?>>
<?php wp_body_open(); ?> <?php wp_body_open(); ?>
<div id="page" class="site"> <div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', '_s' ); ?></a> <a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>
<header id="masthead" class="site-header"> <header id="masthead" class="site-header">
<div class="site-branding"> <div class="site-branding">
@ -57,5 +57,3 @@
?> ?>
</nav><!-- #site-navigation --> </nav><!-- #site-navigation -->
</header><!-- #masthead --> </header><!-- #masthead -->
<div id="content" class="site-content">

4
inc/woocommerce.php
View File

@ -118,8 +118,7 @@ if ( ! function_exists( '_s_woocommerce_wrapper_before' ) ) {
*/ */
function _s_woocommerce_wrapper_before() { function _s_woocommerce_wrapper_before() {
?> ?>
<div id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<?php <?php
} }
} }
@ -136,7 +135,6 @@ if ( ! function_exists( '_s_woocommerce_wrapper_after' ) ) {
function _s_woocommerce_wrapper_after() { function _s_woocommerce_wrapper_after() {
?> ?>
</main><!-- #main --> </main><!-- #main -->
</div><!-- #primary -->
<?php <?php
} }
} }

4
index.php
View File

@ -15,8 +15,7 @@
get_header(); get_header();
?> ?>
<div id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<?php <?php
if ( have_posts() ) : if ( have_posts() ) :
@ -52,7 +51,6 @@ get_header();
?> ?>
</main><!-- #main --> </main><!-- #main -->
</div><!-- #primary -->
<?php <?php
get_sidebar(); get_sidebar();

26
layouts/content-sidebar.css
View File

@ -6,22 +6,26 @@
* Learn more: https://developer.wordpress.org/themes/basics/template-files/ * Learn more: https://developer.wordpress.org/themes/basics/template-files/
*/ */
.content-area { .site {
float: left; display: grid;
margin: 0 -25% 0 0; grid-template-columns: auto 25%;
width: 100%; grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
.site-header {
grid-area: header;
} }
.site-main { .site-main {
margin: 0 25% 0 0; grid-area: main;
overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
} }
.site-content .widget-area { .widget-area {
float: right; grid-area: sidebar;
overflow: hidden;
width: 25%;
} }
.site-footer { .site-footer {
clear: both; grid-area: footer;
width: 100%;
} }
.no-sidebar .content-area { .no-sidebar .content-area {

26
layouts/sidebar-content.css
View File

@ -6,22 +6,26 @@
* Learn more: https://developer.wordpress.org/themes/basics/template-files/ * Learn more: https://developer.wordpress.org/themes/basics/template-files/
*/ */
.content-area { .site {
float: right; display: grid;
margin: 0 0 0 -25%; grid-template-columns: 25% auto;
width: 100%; grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.site-header {
grid-area: header;
} }
.site-main { .site-main {
margin: 0 0 0 25%; grid-area: main;
overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
} }
.site-content .widget-area { .widget-area {
float: left; grid-area: sidebar;
overflow: hidden;
width: 25%;
} }
.site-footer { .site-footer {
clear: both; grid-area: footer;
width: 100%;
} }
.no-sidebar .content-area { .no-sidebar .content-area {

4
page.php
View File

@ -15,8 +15,7 @@
get_header(); get_header();
?> ?>
<div id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<?php <?php
while ( have_posts() ) : while ( have_posts() ) :
@ -33,7 +32,6 @@ get_header();
?> ?>
</main><!-- #main --> </main><!-- #main -->
</div><!-- #primary -->
<?php <?php
get_sidebar(); get_sidebar();

27
sass/layout/_content-sidebar.scss
View File

@ -1,22 +1,27 @@
.content-area { .site {
float: left; display: grid;
margin: 0 (-$size__site-sidebar) 0 0; grid-template-columns: auto ($size__site-sidebar);
width: $size__site-main; grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
.site-header {
grid-area: header;
} }
.site-main { .site-main {
margin: 0 $size__site-sidebar 0 0; grid-area: main;
overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
} }
.site-content .widget-area { .widget-area {
float: right; grid-area: sidebar;
overflow: hidden;
width: $size__site-sidebar;
} }
.site-footer { .site-footer {
clear: both; grid-area: footer;
width: $size__site-main;
} }
@import "no-sidebar"; @import "no-sidebar";

27
sass/layout/_sidebar-content.scss
View File

@ -1,22 +1,27 @@
.content-area { .site {
float: right; display: grid;
margin: 0 0 0 (-$size__site-sidebar); grid-template-columns: ($size__site-sidebar) auto;
width: $size__site-main; grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.site-header {
grid-area: header;
} }
.site-main { .site-main {
margin: 0 0 0 $size__site-sidebar; grid-area: main;
overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
} }
.site-content .widget-area { .widget-area {
float: left; grid-area: sidebar;
overflow: hidden;
width: $size__site-sidebar;
} }
.site-footer { .site-footer {
clear: both; grid-area: footer;
width: $size__site-main;
} }
@import "no-sidebar"; @import "no-sidebar";

12
sass/mixins/_mixins-master.scss
View File

@ -11,18 +11,6 @@
margin-right: auto; margin-right: auto;
} }
// Clearfix
@mixin clearfix() {
content: "";
display: table;
table-layout: fixed;
}
// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
clear: both;
}
// Column width with margin // Column width with margin
@mixin column-width($numberColumns: 3) { @mixin column-width($numberColumns: 3) {
width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns ); width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );

2
sass/modules/_accessibility.scss
View File

@ -35,6 +35,6 @@
} }
/* Do not show the outline on the skip link target. */ /* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus { #primary[tabindex="-1"]:focus {
outline: 0; outline: 0;
} }

18
sass/modules/_clearings.scss
View File

@ -1,18 +0,0 @@
.clear,
.entry-content,
.comment-content,
.site-header,
.site-content,
.site-footer {
&::before,
&::after {
@include clearfix;
}
&::after {
@include clearfix-after;
}
}

21
sass/navigation/_menus.scss
View File

@ -1,7 +1,5 @@
.main-navigation { .main-navigation {
clear: both;
display: block; display: block;
float: left;
width: 100%; width: 100%;
ul { ul {
@ -27,7 +25,8 @@
&:hover > ul, &:hover > ul,
&.focus > ul { &.focus > ul {
left: 100%; display: block;
left: auto;
} }
} }
@ -51,7 +50,6 @@
} }
li { li {
float: left;
position: relative; position: relative;
&:hover > a, &:hover > a,
@ -84,7 +82,7 @@
} }
.main-navigation ul { .main-navigation ul {
display: block; display: flex;
} }
} }
@ -94,17 +92,18 @@
.site-main & { .site-main & {
margin: 0 0 1.5em; margin: 0 0 1.5em;
overflow: hidden; }
.nav-links {
display: flex;
} }
.nav-previous { .nav-previous {
float: left; flex: 1 0 50%;
width: 50%;
} }
.nav-next { .nav-next {
float: right; text-align: end;
text-align: right; flex: 1 0 50%;
width: 50%;
} }
} }

4
sass/shop/_components.scss
View File

@ -6,8 +6,6 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
@include clearfix;
.cart-contents { .cart-contents {
text-decoration: none; text-decoration: none;
} }
@ -226,8 +224,6 @@ p.stars {
.woocommerce-error, .woocommerce-error,
.woocommerce-noreviews, .woocommerce-noreviews,
p.no-comments { p.no-comments {
@include clearfix;
background-color: $woocommerce__color-success; background-color: $woocommerce__color-success;
clear: both; clear: both;
} }

2
sass/shop/_products.scss
View File

@ -1,6 +1,4 @@
ul.products { ul.products {
@include clearfix;
margin: 0; margin: 0;
padding: 0; padding: 0;

4
sass/shop/_single-product.scss
View File

@ -1,8 +1,6 @@
.single-product { .single-product {
div.product { div.product {
@include clearfix;
position: relative; position: relative;
.woocommerce-product-gallery { .woocommerce-product-gallery {
@ -22,8 +20,6 @@
} }
.flex-control-thumbs { .flex-control-thumbs {
@include clearfix;
margin: 0; margin: 0;
padding: 0; padding: 0;

6
sass/style.scss
View File

@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
## Menus ## Menus
# Accessibility # Accessibility
# Alignments # Alignments
# Clearings
# Widgets # Widgets
# Content # Content
## Posts and pages ## Posts and pages
@ -80,11 +79,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "modules/alignments"; @import "modules/alignments";
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
@import "modules/clearings";
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Widgets # Widgets
--------------------------------------------------------------*/ --------------------------------------------------------------*/

4
search.php
View File

@ -10,8 +10,7 @@
get_header(); get_header();
?> ?>
<section id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
@ -48,7 +47,6 @@ get_header();
?> ?>
</main><!-- #main --> </main><!-- #main -->
</section><!-- #primary -->
<?php <?php
get_sidebar(); get_sidebar();

4
single.php
View File

@ -10,8 +10,7 @@
get_header(); get_header();
?> ?>
<div id="primary" class="content-area"> <main id="primary" class="site-main">
<main id="main" class="site-main">
<?php <?php
while ( have_posts() ) : while ( have_posts() ) :
@ -35,7 +34,6 @@ get_header();
?> ?>
</main><!-- #main --> </main><!-- #main -->
</div><!-- #primary -->
<?php <?php
get_sidebar(); get_sidebar();

55
style-rtl.css
View File

@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
## Menus ## Menus
# Accessibility # Accessibility
# Alignments # Alignments
# Clearings
# Widgets # Widgets
# Content # Content
## Posts and pages ## Posts and pages
@ -626,9 +625,7 @@ a:active {
## Menus ## Menus
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.main-navigation { .main-navigation {
clear: both;
display: block; display: block;
float: right;
width: 100%; width: 100%;
} }
@ -655,7 +652,8 @@ a:active {
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul { .main-navigation ul ul li.focus > ul {
right: 100%; display: block;
right: auto;
} }
.main-navigation ul ul a { .main-navigation ul ul a {
@ -668,7 +666,6 @@ a:active {
} }
.main-navigation li { .main-navigation li {
float: right;
position: relative; position: relative;
} }
@ -690,7 +687,7 @@ a:active {
} }
.main-navigation ul { .main-navigation ul {
display: block; display: flex;
} }
} }
@ -700,22 +697,25 @@ a:active {
.site-main .site-main
.post-navigation { .post-navigation {
margin: 0 0 1.5em; margin: 0 0 1.5em;
overflow: hidden; }
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
} }
.comment-navigation .nav-previous, .comment-navigation .nav-previous,
.posts-navigation .nav-previous, .posts-navigation .nav-previous,
.post-navigation .nav-previous { .post-navigation .nav-previous {
float: right; flex: 1 0 50%;
width: 50%;
} }
.comment-navigation .nav-next, .comment-navigation .nav-next,
.posts-navigation .nav-next, .posts-navigation .nav-next,
.post-navigation .nav-next { .post-navigation .nav-next {
float: left; text-align: end;
text-align: left; flex: 1 0 50%;
width: 50%;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -758,7 +758,7 @@ a:active {
} }
/* Do not show the outline on the skip link target. */ /* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus { #primary[tabindex="-1"]:focus {
outline: 0; outline: 0;
} }
@ -787,35 +787,6 @@ a:active {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear::before,
.clear::after,
.entry-content::before,
.entry-content::after,
.comment-content::before,
.comment-content::after,
.site-header::before,
.site-header::after,
.site-content::before,
.site-content::after,
.site-footer::before,
.site-footer::after {
content: "";
display: table;
table-layout: fixed;
}
.clear::after,
.entry-content::after,
.comment-content::after,
.site-header::after,
.site-content::after,
.site-footer::after {
clear: both;
}
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Widgets # Widgets
--------------------------------------------------------------*/ --------------------------------------------------------------*/

55
style.css
View File

@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
## Menus ## Menus
# Accessibility # Accessibility
# Alignments # Alignments
# Clearings
# Widgets # Widgets
# Content # Content
## Posts and pages ## Posts and pages
@ -626,9 +625,7 @@ a:active {
## Menus ## Menus
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.main-navigation { .main-navigation {
clear: both;
display: block; display: block;
float: left;
width: 100%; width: 100%;
} }
@ -655,7 +652,8 @@ a:active {
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul { .main-navigation ul ul li.focus > ul {
left: 100%; display: block;
left: auto;
} }
.main-navigation ul ul a { .main-navigation ul ul a {
@ -668,7 +666,6 @@ a:active {
} }
.main-navigation li { .main-navigation li {
float: left;
position: relative; position: relative;
} }
@ -690,7 +687,7 @@ a:active {
} }
.main-navigation ul { .main-navigation ul {
display: block; display: flex;
} }
} }
@ -700,22 +697,25 @@ a:active {
.site-main .site-main
.post-navigation { .post-navigation {
margin: 0 0 1.5em; margin: 0 0 1.5em;
overflow: hidden; }
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
} }
.comment-navigation .nav-previous, .comment-navigation .nav-previous,
.posts-navigation .nav-previous, .posts-navigation .nav-previous,
.post-navigation .nav-previous { .post-navigation .nav-previous {
float: left; flex: 1 0 50%;
width: 50%;
} }
.comment-navigation .nav-next, .comment-navigation .nav-next,
.posts-navigation .nav-next, .posts-navigation .nav-next,
.post-navigation .nav-next { .post-navigation .nav-next {
float: right; text-align: end;
text-align: right; flex: 1 0 50%;
width: 50%;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -758,7 +758,7 @@ a:active {
} }
/* Do not show the outline on the skip link target. */ /* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus { #primary[tabindex="-1"]:focus {
outline: 0; outline: 0;
} }
@ -787,35 +787,6 @@ a:active {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear::before,
.clear::after,
.entry-content::before,
.entry-content::after,
.comment-content::before,
.comment-content::after,
.site-header::before,
.site-header::after,
.site-content::before,
.site-content::after,
.site-footer::before,
.site-footer::after {
content: "";
display: table;
table-layout: fixed;
}
.clear::after,
.entry-content::after,
.comment-content::after,
.site-header::after,
.site-content::after,
.site-footer::after {
clear: both;
}
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Widgets # Widgets
--------------------------------------------------------------*/ --------------------------------------------------------------*/

15
woocommerce.css
View File

@ -72,9 +72,6 @@ table.shop_table_responsive tr td.download-actions .button {
* Products * Products
*/ */
ul.products { ul.products {
content: "";
display: table;
table-layout: fixed;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -143,9 +140,6 @@ ul.products li.product .button {
* Single product * Single product
*/ */
.single-product div.product { .single-product div.product {
content: "";
display: table;
table-layout: fixed;
position: relative; position: relative;
} }
@ -167,9 +161,6 @@ ul.products li.product .button {
} }
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs { .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
content: "";
display: table;
table-layout: fixed;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -284,9 +275,6 @@ ul.products li.product .button {
position: relative; position: relative;
margin: 0; margin: 0;
padding: 0; padding: 0;
content: "";
display: table;
table-layout: fixed;
} }
.site-header-cart .cart-contents { .site-header-cart .cart-contents {
@ -469,9 +457,6 @@ p.stars.selected a:not(.active)::before {
.woocommerce-error, .woocommerce-error,
.woocommerce-noreviews, .woocommerce-noreviews,
p.no-comments { p.no-comments {
content: "";
display: table;
table-layout: fixed;
background-color: #0f834d; background-color: #0f834d;
clear: both; clear: both;
} }