Perfect Columns Grid

After going through numerous responsive grid systems dating back to when responsive first hit the open source community, the search for perfect column was not an easy find.

problem #1

The biggest problem I faced with most grid systems I tried was the outside margins slightly shifting towards the inside, causing the grids to be unaligned with the rest of the content within the site container.

problem #2

Another typical issue I faced was over complication added to simplicity, I am extremely comfortable with CSS and HTML, so when I saw some of these grid systems sporting CSS class names such as: “alpha-omega-with-one-bit-and-a-quarter,” I thought; “Seriously? Is this a new language within CSS?? It was to the point where I wasn’t willing to try to understand it.” Call that problem #3, I shouldn’t have to try to understand CSS and HTML.

Eventually I did find responsivegridsystem.com, which solved problem #1, so I gave it a go and was satisfied until I tried using it on a bigger project and quickly ran into mo problems.

The issue I faced with responsivegridsystem is that it uses the pseudo element “:first-child” to fix my problem #1, and it does do that just fine, the problem is that “:first-child” does not apply to the second row of columns, so what you ended up with is columns all over the place by the time row two comes around. “So why not just add the container, row by row?” Well, that would be ideal, but its not always possible to insert a new container on every row (not without dirty Jquery conditional append functions) and if you dont know me, im not down with dirty jquery. In my case I needed it for a WordPress loop function when the user selects how many posts he wanted to show. As each post is shown per column, anytime the user selected a number grater than the column layout (8 posts on 4 column layout) row two is where the problem would start.

Initially I did consider targeting pseudo elements to fix the issue, but quickly discarded the idea as my stylesheet started growing with CSS classes looking like this: “.one_third:nth-child(3n+1)” and mobile queries like this: “.one_sixth:nth-of-type(4n-0)”, not to mention browser compatibility on less modern browsers.

Speaking of browser compatibility, flexboxes was also out of bounds for me.


.flex-columns {
	padding: 0;
	margin: 0;
	list-style: none; 
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	justify-content: space-around;
}
	
.flex-item {
	background: #d3d3d3;
	padding: 10px 0;
	margin-top: 10px;
	color: white;
	font-weight: bold;
	font-size: 2em;
	text-align: center;
}

.one_third {
	width: 32%;
}

Check this out on an old windows browser.


Flex Column 1
Flex Column 2
Flex Column 3
Flex Column 1
Flex Column 2
Flex Column 3
Flex Column 4
Flex Column 1
Flex Column 2
Flex Column 3
Flex Column 4
Flex Column 5

Don’t get me wrong, flexboxes are super cool, but unfortunately they are also super not compatible. Regardless if I can use modernizr JS library to fix old browser compatibility, I rather have an out-of-box ready to go solution.

Given the situation, I created something simpler that I hope you will find useful.


/* ——————————————
1.  COLUMNS
——————————————— */

.columns {
	clear: both;
	padding: 0px;
	margin-left: -2%; 
	width:102%; 
	overflow: hidden;
    *zoom:1; /* For IE 6/7 */
}  

.one_tenth {
	width: 8%; 
	*width: 7.93%;
}
.one_ninth {
	width: 9.1%; 
	*width: 8.95%;
}
.one_eighth {
	width: 10.5%; 
	*width: 10%;
}
.one_seventh {
	width: 12.28%; 
	*width: 12%;
}
.one_sixth { 
	width: 14.66%; 
	*width: 14%;
}
.one_fifth { 
	width: 18%; 
	*width: 17.93%;
}
.one_fourth {
	width: 23%; 
	*width: 22.93%;
}

.one_third {
	width: 31.33%;
	*width: 31%;
}
.one_half {
	width: 48%;
	*width: 47.93%;
}
.two_thirds {
	width: 64.67%;
	*width: 64.5%;
}

.full_width {
	width: 98%
	*width: 97.93%;
}
    
.one_tenth,
.one_ninth,
.one_eighth,
.one_seventh,
.one_sixth,
.one_fifth,
.one_fourth, 
.one_third,
.one_half,
.two_thirds,
.full_width {
	background: #dedede;
	padding: 10px 0;
	margin-bottom: 10px;
	text-align: center;
	display: block;
	_display:inline;
	float:left;
	margin: 1% 0 1% 2%;
}


/*————————————————————–
	MIN-WIDTH:768px AND MAX-WIDTH:960px
————————————————————–*/
@media all and (min-width: 768px) and (max-width: 960px) {
 
    .one_tenth { width: 18%; }
    .one_eighth { width: 23%; }
    .one_sixth { width: 31.33%; }
    .one_fourth { width:  48%; }	

}

/*————————————————————–
	MAX-WIDTH:767px
————————————————————–*/
@media all and (max-width: 767px) {

	/* COLUMNS ROW */
	.one_tenth,
	.one_ninth,
	.one_eighth,
	.one_seventh,
	.one_sixth,
	.one_fifth,
	.one_fourth, 
	.one_third, 
	.one_half,
	.two_thirds {
		width: 98%;
	}
	
  /** END **/   
}

@media all and (min-width: 651px) and (max-width: 767px) {
	
	/* COLUMNS ROW */
	.one_tenth {
		width: 18%;
	}
	.one_eighth {
		width: 23%;
	}
	.one_ninth,
	.one_sixth {
		width: 31.33%;
	}
	
	.one_fourth {
		width: 48%;
	}
    
}


@media all and (min-width: 481px) and (max-width: 650px) {
	
	/* COLUMNS ROW */
	.one_tenth,
	.one_eighth {
		width: 48%;
	}	
	
    
}
The Markup:

<section class="columns">

		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>
		<div class="one_tenth">one_tenth</div>

		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>
		<div class="one_eighth">one_eighth</div>

		<div class="one_seventh">one_seventh</div>
		<div class="one_seventh">one_seventh</div>
		<div class="one_seventh">one_seventh</div>
		<div class="one_seventh">one_seventh</div>
		<div class="one_seventh">one_seventh</div>
		<div class="one_seventh">one_seventh</div>
		<div class="one_seventh">one_seventh</div>

		<div class="one_sixth">one_sixth</div>
		<div class="one_sixth">one_sixth</div>
		<div class="one_sixth">one_sixth</div>
		<div class="one_sixth">one_sixth</div>
		<div class="one_sixth">one_sixth</div>
		<div class="one_sixth">one_sixth</div>

		<div class="one_fifth">one_fifth</div>
		<div class="one_fifth">one_fifth</div>
		<div class="one_fifth">one_fifth</div>
		<div class="one_fifth">one_fifth</div>
		<div class="one_fifth">one_fifth</div>

		<div class="one_fourth">one_fourth</div>
		<div class="one_fourth">one_fourth</div>
		<div class="one_fourth">one_fourth</div>
		<div class="one_fourth">one_fourth</div>
			
		<div class="one_third">one_third</div>
		<div class="one_third">one_third</div>
		<div class="one_third">one_third</div>

		<div class="one_half">one_half</div>
		<div class="one_half">one_half</div>

		<div class="one_third">one_third</div>
		<div class="two_thirds">two_thirds</div>
</section>
Download it on Github

Dejunking WordPress

Wordpress is the perfectly imperfect CMS, loved by many, used by millions, myself included. What makes WP so awesome, aside from open-source development with a great community behind it, is the flexibility and ease of use. Unfortunately what we get out of box is anything but perfect. So without further ado – let’s start dejunking..


/* ==================================

* REMOVE DEFAULT WORDPRESS JUNK *

* ================================= */

REMOVE 1 – unregister all default WP Widgets

function unregister_default_wp_widgets() {

unregister_widget(‘WP_Widget_Pages’);

unregister_widget(‘WP_Widget_Archives’);

unregister_widget(‘WP_Widget_Links’);

unregister_widget(‘WP_Widget_Search’);

}

add_action(‘widgets_init’, ‘unregister_default_wp_widgets’, 1);

// REMOVE 2 – remove WP head junk

remove_action(‘wp_head’, ‘rsd_link’);

remove_action(‘wp_head’, ‘wp_generator’);

remove_action(‘wp_head’, ‘index_rel_link’);

remove_action(‘wp_head’, ‘wlwmanifest_link’);

remove_action(‘wp_head’, ‘start_post_rel_link’, 10, 0);

remove_action(‘wp_head’, ‘parent_post_rel_link’, 10, 0);

remove_action(‘wp_head’, ‘adjacent_posts_rel_link’, 10, 0);

remove_action( ‘admin_head’, ‘id_wordpress_version_warning’ );

remove_action( ‘save_post’, ‘id_save_post’ );

remove_action( ‘wp_set_comment_status’, ‘id_comment_status’, 10, 2 );

remove_action( ‘trashed_comment’, ‘id_comment_trashed’, 10 );

remove_action( ‘untrashed_comment’, ‘id_comment_untrashed’, 10 );

//  REMOVE 3 – Disable WP Auto-update Checks

if (!current_user_can(‘edit_users’)) {

add_action(‘init’, create_function(‘$a’, ‘remove_action(‘init’, ‘wp_version_check’);’), 2);

add_filter(‘pre_option_update_core’, create_function(‘$a’, “return null;”));

}

//  REMOVE 4 – Disable WP UPDATE MESSAGE

if ( ! function_exists( ‘no_wp_update_annoyance’ ) ) :

/*** Disable WordPress Message** @since 1.2*/

function no_wp_update_annoyance() {

remove_action( ‘admin_notices’, ‘update_nag’, 3 );

}

endif;

add_action( ‘admin_init’, ‘no_wp_update_annoyance’ );

//  REMOVE 5 – Disable WordPress Plugin Updates

add_action( ‘admin_menu’, create_function( ‘$a’, ‘remove_action( ‘load-plugins.php’, ‘wp_update_plugins’ );’) );

# Why use the admin_menu hook? It’s the only one available between the above hook being added and being applied

add_action( ‘admin_init’, create_function( ‘$a’, ‘remove_action( ‘admin_init’, ‘wp_update_plugins’ );’), 2 );

add_action( ‘init’, create_function( ‘$a’, ‘remove_action( ‘init’, ‘wp_update_plugins’ );’), 2 );

add_filter( ‘pre_option_update_plugins’, create_function( ‘$a’, “return null;” ) );

remove_action( ‘load-plugins.php’, ‘wp_update_plugins’ );

remove_action( ‘load-update.php’, ‘wp_update_plugins’ );

remove_action( ‘admin_init’, ‘_maybe_update_plugins’ );

remove_action( ‘wp_update_plugins’, ‘wp_update_plugins’ );

add_filter( ‘pre_transient_update_plugins’, create_function( ‘$a’, “return null;” ) );

remove_action( ‘load-update-core.php’, ‘wp_update_plugins’ );

add_filter( ‘pre_site_transient_update_plugins’, create_function( ‘$a’, “return null;” ) );