Last active
March 10, 2017 22:35
-
-
Save evantravers/5601961df325167b7ca5 to your computer and use it in GitHub Desktop.
Really simple wordpress shortcode column system… relies on scss and Bourbon Neat to work.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.col { | |
@include span-columns(4); | |
} | |
@for $num from 1 through 12 { | |
.col-#{$num} { | |
@include span-columns($num); | |
@include omega(#{12/$num}n); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function column_func( $atts, $content="" ) { | |
$divclass = "col"; | |
if ($atts['number'] != "") { | |
$divclass = "col-" . $atts['number']; | |
} | |
return "<div class='" . $divclass . "'>" . $content . "</div>"; | |
} | |
add_shortcode( 'column', 'column_func' ); | |
?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This works on the default 12 column layout, and also wraps boxes nicely thanks to omega! | |
[column number="4"] | |
This will take up 1/3 of the screen | |
[/column] | |
[column number="4"] | |
This will take up 1/3 of the screen | |
[/column] | |
[column number="4"] | |
This will take up 1/3 of the screen | |
[/column] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment