flexington
flexington copied to clipboard
JiveDig
A grid framework using flexbox. Originally forked from FlexBox Grid - flexboxgrid.com
Flexington
A grid framework using flexbox. Originally forked from FlexBox Grid.
- Optional gutters between grid items (not in FlexBox Grid)
- Declare various breakpoints right in your HTML.
- Breakpoints: xs < 545px, sm > 545px, md > 769px, lg > 993px, xl > 1201px
- Easily nest columns.
- Support for WordPress Galleries (not in FlexBox Grid)
- View Flexington code examples.
Requirements
.col must be an immediate child of .row, this allows for nested grids
How To Use
Notes
.row uses negative margins when dealing with gutters. Try not to add styling to the .row itself, instead stying a different wrapping element to avoid potential problems from the negative margin.
Raw HTML
- Add the wrapping class
.rowExample:<div class="row">. - Add a class of
.colto each immediate child element that is part of the column grid. - Add classes (for breakpoints xs, sm, md, lg) to a container element to declare the total columns out of the 12.
Example:
<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">.
Genesis Archives
// Flexington archive wrap opening html.
add_action( 'genesis_before_while', function() {
echo '<div class="row gutter-30">';
}, 100 );
// Flexington archive wrap closing html.
// If archive pagination throws things off.
add_action( 'genesis_after_endwhile', function() {
echo '</div>';
}, 0 );
// Add Flexington col classes to .entry.
add_filter( 'genesis_attr_entry', function( $attributes ) {
$attributes['class'] = $attributes['class']. ' col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2';
return $attributes;
});
WordPress Galleries
Flexington 2.1.0+ includes support for WordPress Galleries (1, 2, 3, 4, 6 columns only)
- Remove default WordPress gallery CSS
// Turn off gallery CSS
add_filter( 'use_default_gallery_style', '__return_false' );
- Bonus: Remove unsupported options from the gallery dropdown
/**
* Add custom CSS to <head>
*
* @return void
*/
add_action( 'admin_head', function() {
echo '<style type="text/css">
.gallery-settings .columns option[value="5"],
.gallery-settings .columns option[value="7"],
.gallery-settings .columns option[value="8"],
.gallery-settings .columns option[value="9"] {
display:none !important;
visibility: hidden !important;
}
</style>';
});
JiveDig