Permalink
Browse files

First pass. It's not pretty yet, but it works.

  • Loading branch information...
0 parents commit b9c0d31a9cd400ea5df18481e261e4fe566897da @justintadlock committed Sep 13, 2012
Showing with 174 additions and 0 deletions.
  1. +72 −0 columns.css
  2. +102 −0 columns.php
@@ -0,0 +1,72 @@
+.column-grid {
+ clear: both;
+ }
+.column-grid:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+.column {
+ float: left;
+ margin-right: 5%;
+ }
+.column-first {
+ margin-left: 0;
+ }
+.column-last {
+ float: right;
+ margin-right: 0;
+ }
+
+
+/**
+ * Formula for getting the width of each column.
+ * $width = ( 100 + $margin-right ) / ( $grid ) * ( $span ) - ( $margin_right )
+ * $x = ( 100 + $margin_right ) / $grid
+ */
+
+/* $x = 6.5625 */
+.column-grid-16 .column-span-16 { width: 100%; }
+.column-grid-16 .column-span-15 { width: 93.4375%; }
+.column-grid-16 .column-span-14 { width: 86.875%; }
+.column-grid-16 .column-span-13 { width: 80.3125%; }
+.column-grid-16 .column-span-12 { width: 73.75%; }
+.column-grid-16 .column-span-11 { width: 67.1875%; }
+.column-grid-16 .column-span-10 { width: 60.625%; }
+.column-grid-16 .column-span-9 { width: 54.0625%; }
+.column-grid-16 .column-span-8 { width: 47.5%; }
+.column-grid-16 .column-span-7 { width: 40.9375%; }
+.column-grid-16 .column-span-6 { width: 34.375%; }
+.column-grid-16 .column-span-5 { width: 27.8125%; }
+.column-grid-16 .column-span-4 { width: 21.25%; }
+.column-grid-16 .column-span-3 { width: 14.6875%; }
+.column-grid-16 .column-span-2 { width: 8.125%; }
+.column-grid-16 .column-span-1 { width: 1.5625%; }
+
+/* $x = 8.75 */
+.column-grid-12 .column-span-12 { width: 100%; }
+.column-grid-12 .column-span-11 { width: 91.25%; }
+.column-grid-12 .column-span-10 { width: 82.5%; }
+.column-grid-12 .column-span-9 { width: 73.75%; }
+.column-grid-12 .column-span-8 { width: 65%; }
+.column-grid-12 .column-span-7 { width: 56.25%; }
+.column-grid-12 .column-span-6 { width: 47.5%; }
+.column-grid-12 .column-span-5 { width: 38.75%; }
+.column-grid-12 .column-span-4 { width: 30%; }
+.column-grid-12 .column-span-3 { width: 21.25%; }
+.column-grid-12 .column-span-2 { width: 12.5%; }
+.column-grid-12 .column-span-1 { width: 3.75%; }
+
+/* $x = 10.5 */
+.column-grid-10 .column-span-10 { width: 100%; }
+.column-grid-10 .column-span-9 { width: 89.5%; }
+.column-grid-10 .column-span-8 { width: 79%; }
+.column-grid-10 .column-span-7 { width: 68.5%; }
+.column-grid-10 .column-span-6 { width: 58%; }
+.column-grid-10 .column-span-5 { width: 47.5%; }
+.column-grid-10 .column-span-4 { width: 37%; }
+.column-grid-10 .column-span-3 { width: 26.5%; }
+.column-grid-10 .column-span-2 { width: 16%; }
+.column-grid-10 .column-span-1 { width: 5.5%; }
@@ -0,0 +1,102 @@
+<?php
+/*
+ * Plugin Name: Columns
+ * Plugin URI: http://justintadlock.com
+ * Description: A [column] shortcode plugin.
+ * Version: 0.1 Alpha
+ * Author: Justin Tadlock
+ * Author URI: http://justintadlock.com
+*/
+
+
+add_action( 'init', 'columns_register_shortcodes' );
+
+add_action( 'wp_enqueue_scripts', 'columns_enqueue_styles', 1 );
+
+function columns_enqueue_styles() {
+
+ wp_enqueue_style(
+ 'columns',
+ trailingslashit( plugin_dir_url( __FILE__ ) ) . 'columns.css',
+ null,
+ '20120913',
+ 'all'
+ );
+}
+
+function columns_register_shortcodes() {
+ add_shortcode( 'column', 'columns_do_shortcode' );
+}
+
+function columns_do_shortcode( $attr, $content = null ) {
+ global $_columns_grid, $_columns_span;
+
+ if ( is_null( $content ) )
+ return $content;
+
+ $defaults = array(
+ 'grid' => 10,
+ 'span' => '', // will be overwritten to be the same as $grid if empty
+ 'class' => '',
+ );
+
+ $attr = shortcode_atts( $defaults, $attr );
+
+ $output = '';
+ $classes = array();
+
+ $classes[] = 'column';
+ $classes[] = "column-span-{$attr['span']}";
+
+ if ( isset( $attr['class'] ) )
+ $classes[] = $attr['class'];
+
+ $is_first_column = false;
+ $is_last_column = false;
+ $allowed_grid = array( 10, 12, 16 );
+ $allowed_span = array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
+ $attr['grid'] = absint( $attr['grid'] );
+ $attr['span'] = absint( $attr['span'] );
+
+ if ( 16 == $attr['grid'] )
+ $allowed_span = array_merge( $allowed_span, array( 13, 14, 15, 16 ) );
+
+
+ if ( empty( $_columns_grid ) ) {
+ $_columns_grid = $grid = in_array( $attr['grid'], $allowed_grid ) ? $attr['grid'] : 12;
+ $classes[] = 'column-first';
+ $is_first_column = true;
+ }
+
+ if ( empty( $attr['span'] ) )
+ $attr['span'] = $grid;
+
+ $_columns_span = in_array( $attr['span'], $allowed_span ) ? $_columns_span + $attr['span'] : $_columns_span;
+
+ if ( $_columns_grid == $_columns_span ) {
+ $classes[] = 'column-last';
+ $is_last_column = true;
+
+ $_columns_grid = 0;
+ $_columns_span = 0;
+ }
+
+ $class = join( ' ', array_map( 'sanitize_html_class', array_unique( $classes ) ) );
+
+ if ( $is_first_column )
+ $output .= '<div class="column-grid ' . sanitize_html_class( "column-grid-{$attr['grid']}" ) . '">';
+
+ $output .= '<div class="' . $class . '">' . wpautop( do_shortcode( $content ) ) . '</div>';
+
+ if ( $is_last_column )
+ $output .= '</div>';
+
+ return $output;
+}
+
+
+
+
+
+
+?>

0 comments on commit b9c0d31

Please sign in to comment.