hypejunction/ui_grid

Responsive grid Elgg

Installs: 29

Dependents: 0

Suggesters: 0

Stars: 0

Watchers: 1

Forks: 0

Open Issues: 0

Language:CSS

Type:elgg-plugin

1.0.0 2015-11-29 11:48 UTC

README

Elgg 1.11 Elgg 1.12

Features

  • Mobile-first responsive grid system
  • Built with Compass and Susy

Spans Columns Gallery

Usage

Grid

To create a 6-column span, simply add elgg-small-6 class to your element. To make it responsive, i.e. 12 columns on small devices, and 6 columns on larger devices, use elgg-small-12 elgg-medium-6.

By default, spans are not floated. Wrap your elements in elgg-row, to float them.

<div class="elgg-row">
    <div class="elgg-small-12 elgg-medium-6">Column 1</div>
	<div class="elgg-small-12 elgg-medium-6">Column 2</div>
</div>

To add horizontal and vertical gutters, either use padding in nested elements, or add elgg-column class.

<div class="elgg-row">
    <div class="elgg-column elgg-small-12 elgg-medium-8">Column 1</div>
	<div class="elgg-column elgg-small-12 elgg-medium-4">Column 2</div>
</div>

Block Grid / Gallery

User Gallery

You can apply elgg-gallery-$screen-$columns classes to any list. For example, create a responsive user gallery, that has 6 columns on mobile devices, 8 columns on medium devices, and 12 columns on large devices, use:

echo elgg_list_entities(array(
	'types' => 'user',
	'list_type' => 'gallery',
	'gallery_class' => 'elgg-gallery-small-6 elgg-gallery-medium-8 elgg-gallery-large-12',
	'limit' => 48,
));