gribse/achille-press
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor the css layout to use grid and flex

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

26
layouts/content-sidebar.css
View file

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