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

Merge pull request #1251 from mor10/css-grid 

Refactor _S to modern CSS layout standards using grid and flex
This commit is contained in:
Ismail El Korchi 2020-04-18 19:41:54 +01:00 committed by GitHub
parent 0fb601bdbe 31df4716c8
commit 9dc865c32b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 123 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
404.php
View File

@ -10,16 +10,15 @@
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">
<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1> <h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
</header><!-- .page-header --> </header><!-- .page-header -->
<div class="page-content"> <div class="page-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p> <p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
<?php <?php
get_search_form(); get_search_form();
@ -52,11 +51,10 @@ get_header();
the_widget( 'WP_Widget_Tag_Cloud' ); the_widget( 'WP_Widget_Tag_Cloud' );
?> ?>
</div><!-- .page-content --> </div><!-- .page-content -->
</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.

6
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() ) : ?>
@ -45,8 +44,7 @@ get_header();
endif; endif;
?> ?>
</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">

6
inc/woocommerce.php
View File

@ -118,9 +118,8 @@ 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
} }
} }
add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' ); add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' );
@ -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
} }
} }

6
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() ) :
@ -51,8 +50,7 @@ get_header();
endif; endif;
?> ?>
</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 {

6
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() ) :
@ -32,8 +31,7 @@ get_header();
endwhile; // End of the loop. endwhile; // End of the loop.
?> ?>
</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
--------------------------------------------------------------*/ --------------------------------------------------------------*/

6
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() ) : ?>
@ -47,8 +46,7 @@ get_header();
endif; endif;
?> ?>
</main><!-- #main --> </main><!-- #main -->
</section><!-- #primary -->
<?php <?php
get_sidebar(); get_sidebar();

6
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() ) :
@ -34,8 +33,7 @@ get_header();
endwhile; // End of the loop. endwhile; // End of the loop.
?> ?>
</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;
} }