Simple Grid for WordPress

The Problem

Many builders; think Divi, Elementor, Visual Composer may only allow for x maximum columns. What does one do when the need is for columns within columns?

The Solution

Simple Grid to the Rescue

A basic responsive grid for winners. This project is based on Chris Coyier’s post on grids http://css-tricks.com/dont-overthink-it-grids/. Simple Grid is a basic lightweight grid, not a CSS framework. There are no styles for buttons, tables, typography etc. etc. Responsive – Built with responsive sites in mind, Simple Grid allows developers to build websites on a foundation suited for mobile and tablet browsers.

  • Lightweight – Simple Grid is simply that, a grid. This is not a framework with everything from forms to buttons styled but a lightweight simple CSS grid.
  • 1140px- No longer do we develop for 1024px monitors. Simple Grid is designed to make sites look great on larger monitors with higher resolutions.
  • 12 Columns- The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.

Simple Grid was created for developers who need a bare bones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Dallas Bass

Developer

DEMOS

5 Column Grid

Here is the simple grid code I’m using:

Grab My Simple Grid Plugin for FREEE!

Pricing Plans via Toggle Module

Pricing Plans via Toggle Module

Pricing Plans

Starter

 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

 

$30/mo

 

Buy now

 

Professional

 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

 

$65/mo

 

Buy now

 

Enterprise

 

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

 

$99/mo

 

Buy now

 

Background Change Upon Page URL

Background Change Upon Page URL

Expertise:
Using simple css code on a page we can force that page to display a custom background of our choosing. On any WordPress website, every page has a CSS ID set on the Body tag. Looking at the page source the opening body tag looks like this for this page:

Body Tag CSS ID for Post

I can add css to the theme’s style.css to tell this specific page to use a custom background for the ‘body’. Something like this:

body#postid-1405{background-image: url('https://flashalexander.com/wp-content/uploads/2012/01/Balloon-through-the-Clouds.jpg') no-repeat center top;}

This website’s content area is already using CSS to set the Coffee Cup background.

Coffe Cup Background

ERGO, if I am going to set a custom background for the page I’ll have to hide the content area background that is laying on top of the page. I use this css to accomplish the task:

#content-area{background:transparent;}

Putting it altogether, adding the following css to my stylesheet gives this page its own unique background:


body.postid-1405{
background-image: url(https://flashalexander.com/wp-content/uploads/2012/01/Balloon-through-the-Clouds.jpg)!important;
background-size: cover;
}
body.postid-1405 #content-area{
background:transparent!important;
}

Take note of this: !important – It forces my css to override the existing css 🙂

All this assumes your using a child theme, where edits to the style.css file won’t be overwritten when the theme is updated. You ARE using a child theme aren’t you?!

Wang Chung
Wang Chung Chinese Philosopher

You’re an IDIOT if you don’t use a child theme.