hypejunction/ui_grid

响应式网格 Elgg

维护者

详情

github.com/hypeJunction/Elgg-ui_grid

主页

源代码

问题

安装: 43

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:CSS

类型:elgg-plugin

1.0.0 2015-11-29 11:48 UTC

Requires (Dev)

GPL-2.0 302cfd1afefc0ff84a124ac2d24fa32514786bc2

  • Ismayil Khayredinov <info.woop@hypejunction.com>

plugingridelgg

This package is auto-updated.

Last update: 2024-08-29 03:42:04 UTC

README

Elgg 1.11 Elgg 1.12

特性

  • 移动优先响应式网格系统
  • 使用 Compass 和 Susy 构建

Spans Columns Gallery

用法

网格

要创建一个6列宽的网格，只需将elgg-small-6类添加到您的元素上。要使其响应式，例如在小型设备上为12列，在较大设备上为6列，使用elgg-small-12 elgg-medium-6。

默认情况下，网格不会浮动。将您的元素包裹在elgg-row中，以使其浮动。

<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>

要添加水平和垂直边距，可以在嵌套元素中使用填充，或者添加elgg-column类。

<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>

块状网格/画廊

User Gallery

您可以将elgg-gallery-$screen-$columns类应用到任何列表中。例如，创建一个响应式的用户画廊，在移动设备上有6列，在中等设备上有8列，在大型设备上有12列，使用

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,
));