Tile
The tile, the new way to display and manage content on your web pages.
Demo
This is an example of what you can get in using Modern.ModernWeb.Web
<div class="mw-tiles mw-theme-light">
<div class="mw-tile mw-large" tabindex="1000"></div>
<div class="mw-tile mw-wide" tabindex="1001"></div>
<div class="mw-tile mw-medium" tabindex="1002"></div>
<div class="mw-tiles mw-medium">
<div class="mw-tile mw-small" tabindex="1003"></div>
<div class="mw-tile mw-small" tabindex="1004"></div>
<div class="mw-tile mw-small" tabindex="1005"></div>
<div class="mw-tile mw-small" tabindex="1006"></div>
</div>
<div class="mw-tile mw-medium" tabindex="1007"></div>
<div class="mw-tiles mw-medium">
<div class="mw-tile mw-small" tabindex="1008"></div>
<div class="mw-tile mw-small" tabindex="1009"></div>
<div class="mw-tile mw-small" tabindex="1010"></div>
<div class="mw-tile mw-small" tabindex="1011"></div>
</div>
<div class="mw-tile mw-wide" tabindex="1012"></div>
<div class="mw-tile mw-wide" tabindex="1013"></div>
</div>Tile basic
To create a tile, add a mw-tile in a mw-tiles element.
Then, you must set the size of a tile.
For more details, refers to tile standard size article or tile custom size article.
<div class="mw-tiles">
<div class="mw-tile mw-medium">
<div class="mw-inner">
<!-- Tile content -->
</div>
</div>
</div>Use always tiles container
Be sure to wrap all mw-tile element in a mw-tiles container.
Tile standard size
ModernWeb supports 4 standard size:
large,
wide,
medium,
small.
You can set the size of a mw-tile element in adding built-in css class:
mw-large,
mw-wide,
mw-medium,
mw-small.
<div class="mw-tiles">
<div class="mw-tile mw-large"></div>
<div class="mw-tile mw-wide"></div>
<div class="mw-tile mw-medium"></div>
<div class="mw-tile mw-small"></div>
</div>Tile responsive standard size
You can add a responsive behavior to scale up the mw-tile element to the device type or viewport size.
To set the size of a tile by device type, use mw-*-large, mw-*-wide, mw-*-medium and mw-*-small on a tile element, * specifies the device type.
You can scall up element to 4 devices type : extra small (xs), small (sm), medium (md) and large (lg) device.
Devices type
// Extra small devices (phones, less than 768px)
// No media query since this is the default behavior
// Small devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Medium devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Resize your window to see the responsive behavior in action !
.mw-xs-medium
.mw-sm-medium
.mw-md-wide
.mw-lg-large
<div class="mw-tiles">
<div class="mw-tile mw-xs-medium mw-sm-medium mw-md-wide mw-lg-large"></div>
</div>Tile custom size
You can custom the size of a mw-tile element.
To set the width of a tile, add mw-col-# on a tile element, # specifies the number of column.
To set the height of a tile, add mw-row-# on a tile element, # specifies the number of row.
You can choose a width(number of column) between 1 and 12.
You can choose a height(number of row) between 1 and 12.
.mw-row-3
.mw-row-2
.mw-row-2
.mw-row-1
.mw-row-1
.mw-row-1
<div class="mw-tiles">
<div class="mw-tile mw-row-3 mw-col-2"></div>
<div class="mw-tile mw-row-2 mw-col-1"></div>
<div class="mw-tile mw-row-2 mw-col-3"></div>
<div class="mw-tile mw-row-1 mw-col-2"></div>
<div class="mw-tile mw-row-1 mw-col-1"></div>
<div class="mw-tile mw-row-1 mw-col-1"></div>
</div>Tile responsive custom size
You can add a responsive behavior to scale up the mw-tile element to the device type or viewport size.
To set the width of a tile by device type, add mw-col-*-# on a tile element, * specifies the device type and # specifies the number of column.
To set the height of a tile by device type, add mw-row-*-# on a tile element, * specifies the device type and # specifies the number of row.
You can choose a width(number of column) between 1 and 12.
You can choose a height(number of row) between 1 and 12.
You can scall up element to 4 devices type : extra small (xs), small (sm), medium (md) and large (lg) device.
Devices type
// Extra small devices (phones, less than 768px)
// No media query since this is the default behavior
// Small devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Medium devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Resize your window to see the responsive behavior in action !
.mw-row-sm-2
.mw-row-md-3
.mw-row-lg-4
.mw-col-sm-2
.mw-col-md-3
.mw-col-lg-4
.mw-col-md-3.mw-row-md-2
.mw-col-lg-4.mw-row-lg-3
<div class="mw-tiles mw-rows-4 mw-cols-5">
<div class="mw-tile mw-col-xs-1 mw-row-xs-1 mw-row-sm-2 mw-row-md-3 mw-row-lg-4"></div>
<div class="mw-tile mw-row-xs-1 mw-col-xs-1 mw-col-sm-2 mw-col-md-3 mw-col-lg-4"></div>
<div class="mw-tile mw-row-xs-1 mw-col-xs-1 mw-row-md-2 mw-col-md-3 mw-row-lg-3 mw-col-lg-4"></div>
</div>Tile fluid size
The fluid tiles container scales up automatically all tile element to its container.
In other words, the width and the height is calculated in percentage.
To set fluid behavior on each mw-tile, you must add mw-fluid on the mw-tiles container element.
You can customize the width and the height of a fluid tile.
To customize the width, you must add the mw-col-# on the mw-tile element, # specifies the number of column.
To customize the height, you must add the mw-row-# on the mw-tile element, # specifies the number of row.
You can choose a width(number of column) between 1 and 12.
You can choose a height(number of row) between 1 and 12.
Resize your window to see the fluid behavior in action !
<div class="mw-tiles mw-fluid" style="width: 90%; height: 40vh;">
<div class="mw-tile mw-row-12 mw-col-4"></div>
<div class="mw-tile mw-row-6 mw-col-4"></div>
<div class="mw-tile mw-row-6 mw-col-4"></div>
<div class="mw-tile mw-row-6 mw-col-8"></div>
</div>The height must be set explicitly
The height of mw-tiles container must be explicitly setted. So if you set a height in percentage on mw-tiles element, you must set the height of parent explicitly (in pixels, view-height, ...).
Tile responsive fluid size
You can combine the fluid behavior and the responsive behavior.
For more details, please check the responsive article.
Tile fluid ratio size
The fluid ratio tile is a variant of fluid tile. Please refers to fluid tile article.
The aspect ratio keeps the proportions (ratio width height) of the mw-tile element identic even if the size of container is modified.
To set a ratio behavior on each tile, you must set mw-ratios on the mw-tiles container element.
To add a ratio fluid behavior, you must add mw-ratio-#-#², # specifies the fluid width and #² specifies the fluid height.
You can choose a fluid width(number of column) between 1 and 12.
You can choose a fluid height(number of row) between 1 and 12.
<div class="mw-tiles mw-fluid mw-ratios" style="width: 90%;">
<div class="mw-tile mw-col-4 mw-ratio-4-12">
<div class="mw-inner mw-flex">
<div class="mw-title u-fg-black">.mw-col-4.mw-ratio-4-12</div>
</div>
</div>
<div class="mw-tile mw-col-4 mw-ratio-4-6">
<div class="mw-inner mw-flex">
<div class="mw-title u-fg-black">.mw-col-4.mw-ratio-4-6</div>
</div>
</div>
<div class="mw-tile mw-col-4 mw-ratio-4-6">
<div class="mw-inner mw-flex">
<div class="mw-title u-fg-black">.mw-col-4.mw-ratio-4-6</div>
</div>
</div>
<div class="mw-tile mw-col-8 mw-ratio-8-6">
<div class="mw-inner mw-flex">
<div class="mw-title u-fg-black">.mw-col-8.mw-ratio-8-6</div>
</div>
</div>
</div>Tile responsive fluid ratio size
You can combine the fluid behavior, the ratio behavior and the responsive behavior.
To set a ratio behavior on each tile, you must set mw-ratios on the mw-tiles container element.
To add a ratio fluid behavior, you must add mw-ratio-*-#-#², * specifies the device type, # specifies the fluid width and #² specifies the fluid height.
You can scall up element to 4 devices type : extra small (xs), small (sm), medium (md) and large (lg) device.
You can choose a fluid width(number of column) between 1 and 12.
You can choose a fluid height(number of row) between 1 and 12.
Tile order
Tile order is DEPRECATED !
You should rather use Tile flex order method.
You can (re)order the mw-tile element.
You can choose between 3 modifier of order; offset, push and pull.
To set an offset horizontal, you must add the css class mw-col-offset-#, # specifies the number of column.
To set a left translate horizontal (push), you must add the css class mw-col-push-#, # specifies the number of column.
To set a right translate horizontal (pull), you must add the css class mw-col-pull-#, # specifies the number of column.
To set an offset vertical, you must add the css class mw-row-offset-#, # specifies the number of column.
To set a top translate vertical (push), you must add the css class mw-row-push-#, # specifies the number of column.
To set a bottom translate vertical (pull), you must add the css class mw-row-pull-#, # specifies the number of column.
You can choose between 1 to 12 column.
You can choose between 1 to 12 row.
<div class="mw-tiles mw-cols-3">
<div class="mw-tile mw-medium mw-row-push-1">1</div>
<div class="mw-tile mw-medium mw-col-offset-1 mw-row-push-1">2</div>
<div class="mw-tile mw-medium mw-col-push-2 mw-row-pull-1">3</div>
<div class="mw-tile mw-wide mw-col-pull-1 mw-row-pull-1">4</div>
</div>Tile order responsive
Tile order is DEPRECATED !
You should rather use Tile flex order method.
You can combine the order behavior and the responsive behavior.
To set an offset horizontal by device type, you must add the css class mw-col-*-offset-#, # specifies the number of column and * specifies the device type.
To set a left translate horizontal (push) by device type, you must add the css class mw-col-*-push-#, # specifies the number of column and * specifies the device type.
To set a right translate horizontal (pull) by device type, you must add the css class mw-col-*-pull-#, # specifies the number of column and * specifies the device type.
To set an offset vertical by device type, you must add the css class mw-row-*-offset-#, # specifies the number of row and * specifies the device type.
To set a left translate vertical (push) by device type, you must add the css class mw-row-*-push-#, # specifies the number of row and * specifies the device type.
To set a right translate vertical (pull) by device type, you must add the css class mw-row-*-pull-#, # specifies the number of row and * specifies the device type.
You can choose between 4 device type; extra small (xs), small (sm), medium (md) and large (lg) device.
Tile flex order
You can (re)order the mw-tile element.
To do that, use the order css property of flex layout.
To set the flex layout, add the css class u-flex on the mw-tiles element.
To set an order on a mw-tile element, add a style="order: #", # specifies the number of order.
You can also use the utilities flex utilities class, u-order-first or u-order-last.
For more details, refers to flex utilities article.
<div class="mw-tiles u-flex u-wrap">
<div class="mw-tile mw-row-1 mw-col-1" style="order: 2;">2</div>
<div class="mw-tile mw-row-1 mw-col-2 u-order-last">last</div>
<div class="mw-tile mw-row-1 mw-col-1" style="order: 3;">3</div>
<div class="mw-tile mw-row-1 mw-col-2 u-order-first">first</div>
<div class="mw-tile mw-row-1 mw-col-1" style="order: 1;">1</div>
</div>Tiles container
The .mw-tiles is the element container that wrap all tile element.
<div class="mw-tiles">
<!-- Insert your tile here -->
</div>Center tiles in the container
By Default, the tiles are not centered in a container.
If you want center the tiles, you must add on the mw-tiles element the css class mw-tiles-center to center them horizontally and you must add the css class mw-tiles-middle to center them vertically.
Tiles container custom size
For more flexibility, You can set a custom size to tiles container.
To set the height of tiles container, add
.mw-rows-#, # specifies the number of line of tile to display.
To set the width of tiles container, add
.mw-cols-#, # specifies the number of column of tile to display.
Custom size is only compatible with static and responsive tile.
Be aware that custom size applied on mw-tiles container is not compatible with the fluid behavior and/or the ratio behavior.
Overflow is hidden
The overflowing elements are hidden by default.If you want a different behavior, set the css property
overflow-x and/or overflow-y on the parent container element.
Example row
<div class="mw-tiles mw-rows-6">
<!-- Tile tag here (small, medium, wide or large) -->
</div>Example col
<div class="mw-tiles mw-cols-8">
<!-- Tile tag here (small, medium, wide or large) -->
</div>Example combined (row & col)
<div class="mw-tiles mw-rows-4 mw-cols-10">
<!-- Tile tag here (small, medium, wide or large) -->
</div>Tiles container align
You can custom the alignment of your mw-tile inside a mw-tiles container.
You can choose between 6 alignments; left, center, right, top, middle, bottom.
By default, tiles are align to top left.
To align tiles, add the css class mw-tiles-* on your mw-tiles element, * specifies the alignment position.
<div class="mw-tiles mw-tiles-center mw-tiles-middle">
<!-- Insert your tile here -->
</div>Tiles groups
Group systems are used for creating block layouts and display more informations than
the limit width of your screen.
To create a group of tile wrap all your tiles of a group in a mw-group element.
.group-#, # specifies the number of group of tile to manage.
<div class="mw-tiles mw-groups">
<div class="mw-group-2">
<div class="mw-group"><!-- tag tile here (small, medium, wide or large)--> </div>
<div class="mw-group"><!-- tag tile here (small, medium, wide or large)--> </div>
</div>
</div>Use always tiles groups container
Be sure to wrap .group element in a
.mw-group-# element and wrap this in a
.mw-tiles.mw-groups container.
A gap space
There is a gap space because each .mw-group element in a .mw-groups takes up the maximum width that can.
You can remove this gap space in defining the number of col tile
.mw-col-# to display
Group and grid system combined
<div class="mw-tiles mw-groups mw-cols-5 mw-rows-2">
<div class="mw-group-3">
<div class="mw-group">
<!-- tag tile here (small, medium, wide or large) -->
</div>
<div class="mw-group">
<!-- tag tile here (small, medium, wide or large) -->
</div>
<div class="mw-group">
<!-- tag tile here (small, medium, wide or large) -->
</div>
</div>
</div>Tile color
You can customize your tile and add a background color or a background gradient color.
You must refer to global color and global gradient color.
To customize the background color, you must add a class u-bg-* on your .mw-tile element, *specifies the background color.
To customize the backgroud gradient color, you must add a class u-bg-gd-*-*2 on your .mw-tile element, *specifies the gradient color and *2 specifies the gradient direction.
red
orange
yellow
green
darker blue
light blue
dark purple
light purple
transparent
<div class="mw-tiles">
<div class="mw-tile mw-medium u-bg-gd-red-dark"></div>
<div class="mw-tile mw-medium u-bg-gd-orange-dark"></div>
<div class="mw-tile mw-medium u-bg-gd-yellow-dark"></div>
<div class="mw-tile mw-medium u-bg-gd-green-dark"></div>
<div class="mw-tile mw-medium u-bg-gd-blue-darker"></div>
<div class="mw-tile mw-medium u-bg-gd-blue-light"></div>
<div class="mw-tile mw-medium u-bg-gd-purple-dark"></div>
<div class="mw-tile mw-medium u-bg-gd-purple-light"></div>
<div class="mw-tile mw-medium u-bg-transparent"></div>
</div>
Tile border and tile checked
You can customize the border color of a tile.
You must refer to global color and global gradient color.
To customize the color, you must add a class u-bd-* on your .mw-tile element, *specifies the color.
You can customize the border color of a checked tile.
You must refer to global color and global gradient color.
To persolanize the color, you must add the css class mw-checked mw-checked-* on your .mw-tile element, *specifies the color.
<div class="mw-tiles">
<div class="mw-medium mw-tiles">
<div class="mw-tile mw-small mw-checked mw-checked-red-dark u-bd-red-dark"></div>
<div class="mw-tile mw-small mw-checked mw-checked-orange-dark"></div>
<div class="mw-tile mw-small mw-checked mw-checked-yellow-dark u-bd-yellow-dark"></div>
<div class="mw-tile mw-small mw-checked mw-checked-green-dark"></div>
</div>
<div class="mw-medium mw-tiles">
<div class="mw-tile mw-small mw-checked mw-checked-blue-dark u-bd-blue-dark"></div>
<div class="mw-tile mw-small mw-checked mw-checked-blue-light"></div>
<div class="mw-tile mw-small mw-checked mw-checked-purple-dark u-bd-purple-dark"></div>
<div class="mw-tile mw-small mw-checked mw-checked-purple-light"></div>
</div>
<div class="mw-medium mw-tiles">
<div class="mw-tile mw-small mw-checked mw-checked-transparent"></div>
</div>
<div class="mw-medium mw-tiles">
<div class="mw-tile mw-small u-bd-red-dark"></div>
<div class="mw-tile mw-small u-bd-orange-dark"></div>
<div class="mw-tile mw-small u-bd-yellow-dark"></div>
<div class="mw-tile mw-small u-bd-green-dark"></div>
</div>
<div class="mw-medium mw-tiles">
<div class="mw-tile mw-small u-bd-blue-dark"></div>
<div class="mw-tile mw-small u-bd-blue-light"></div>
<div class="mw-tile mw-small u-bd-purple-dark"></div>
<div class="mw-tile mw-small u-bd-purple-light"></div>
</div>
<div class="mw-medium mw-tiles">
<div class="mw-tile mw-small u-bd-transparent"></div>
</div>
</div>
Tile custom
You can customize your tile as you want.
You can override any css properties and get a unique look.
<style>
#tile-custom-demo {
background-color: #2E2E2E;
padding: 10px;
}
#tile-custom-demo .mw-tile {
background-color: #333333;
color: #fff;
border: none;
box-shadow: 1px 0 #292929 inset;
}
#tile-custom-demo .mw-tile:hover {
outline-color: #337AB7;
outline-width: 2px;
}
</style>
<div id="tile-custom-demo" >
<div class="mw-tiles mw-cols-3">
<div class="mw-tile mw-large">
<div class="mw-inner mw-flex u-flex u-content-center">
<i class="mw-icon fa fa-cloud mw-size-800 u-fg-blue-lighter"></i>
<div class="mw-title">Title</div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner mw-flex u-flex u-content-center">
<i class="mw-icon fa fa-diamond mw-size-300 u-fg-grey-light"></i>
<div class="mw-title">Title</div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner mw-flex u-flex u-content-center">
<i class="mw-icon fa fa-android mw-size-300 u-fg-green-dark"></i>
<div class="mw-title">Title</div>
</div>
</div>
</div>
</div>Tile inner
You must wrap your content inside a .mw-inner element.
You can add content multimedia as an image, an animation
(gif or sprite), an audio, a video, ...
<div class="mw-tiles">
<div class="mw-tile mw-medium">
<div class="mw-inner"><!-- Insert your content here --></div>
</div>
</div>Tile inner flex
You can add a flex behavior to your inner tile.
To add a flex behavior, you must add the css class u-flex on your mw-inner element.
For more details about flex options, refers to utilities flex article.
<div class="mw-tiles mw-cols-3">
<div class="mw-tile mw-medium">
<div class="mw-inner mw-flex u-col-direction">
<i class="fa fa-picture-o mw-size-300"></i>
<div class="mw-title">mw-col-direction</div>
</div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner mw-flex u-row-direction">
<i class="fa fa-picture-o mw-size-300"></i>
<div class="mw-title">mw-row-direction</div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner mw-flex u-col-r-direction">
<i class="fa fa-picture-o mw-size-300"></i>
<div class="mw-title">mw-col-r-direction</div>
</div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner mw-flex u-row-r-direction">
<i class="fa fa-picture-o mw-size-300"></i>
<div class="mw-title">mw-row-r-direction</div>
</div>
</div>
</div>Tile title
You can add a title on your tile.
To add a title, you must add a mw-title element inside your tile.
You can customize your title:
-
If you want change the foreground color, you can choose between 22 basic color; black, white, lime , green, emerald, teal, cyan, cobalt, indigo, violet, pink, magenta, crimson, red, orange, amber, yellow, brown, olive, steel, mauve, taupe
or
you can choose between 5 shader; transparent, dark, darker, light, lighter.
To customize the foreground color, you must add a css classu-fg-*on yourmw-titleelement, *specifies the color. -
You can fix the title at the top, at the bottom, at the left, at the right or a logical combining of them (eg at the top right).
To customize the position, you must add a (or several) class(es)u-position-*on yourmw-titleelement, *specifies the position. By default, a title is positioning at the bottom left of the tile. -
By default, a title takes the size it need but you can customize its size with utilities size css class
u-width-#.
A title
A title
A title
<div class="mw-tiles">
<div class="mw-tile mw-medium u-bg-gd-blue-light">
<div class="mw-inner"><h4 class="mw-title">A title</h4></div>
</div>
<div class="mw-tile mw-medium u-bg-transparent">
<div class="mw-inner"><h4 class="mw-title u-position-bottom u-fg-black">A title</h4></div>
</div>
<div class="mw-tile mw-wide u-bg-gd-purple-dark">
<div class="mw-inner"><h4 class="mw-title u-position-right u-fg-lighter"><i class="fa fa-picture-o"></i></h4></div>
</div>
<div class="mw-tile mw-wide u-bg-gd-red-dark">
<div class="mw-inner"><h4 class="mw-title u-width-100 u-text-center u-position-bottom u-text-capitalize">A title</h4></div>
</div>
</div>
Tile label
You can add a label on your tile.
To add a label, you must add a mw-label element inside your tile.
You can customize your label:
-
If you want customize the background color, you can choose a color in global color.
To customize the color, you must add a classu-bg-*on yourlabelelement, *specifies the color. -
You can fix the label at the top, at the bottom, at the left, at the right or a logical combining of them (eg at the top right).
To customize the position, you must add a (or several) class(es)u-position-*on yourmw-labelelement, *specifies the position. By default, a label is positioning at the top left of the tile. -
By default, a label takes the size it need but you can customize its size with the utilities size css class
u-width-#andu-height-#.
<div class="mw-tiles">
<div class="mw-tile mw-medium">
<div class="mw-inner"><span class="mw-label u-bg-gd-purple-dark">A label</span></div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner"><span class="mw-label u-bg-gd-purple-dark u-position-right">A label</span></div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner"><span class="mw-label u-bg-gd-purple-light"><i class="fa fa-picture-o"></i></span></div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner"><span class="mw-label u-bg-gd-red-dark u-width-100 u-position-bottom">A label</span></div>
</div>
</div>
Tile mark
You can add a mark on your tile.
To add a mark, you must add a mw-mark element inside your tile.
You can customize your mark:
-
If you want customize the background color, you can choose a color in utilities color.
To customize the color, you must add a classu-bg-*on yourmw-markelement, *specifies the color.
<div class="mw-tiles">
<div class="mw-tile mw-medium" style="overflow: visible;">
<div class="mw-inner">
<div class="mw-mark"><i class="fa fa-star fitted"></i></div>
</div>
</div>
</div>
Tile icon
You can add an icon on a tile.
To add an icon in a tile, you must add an <i class="mw-icon fa fa-*"><i> element or an <img src="..." alt="icon" /> element.
You can customize the size of your icon.
You can choose between 13 size; 100x, 125x, 150x, 200x, 250x, 300x, 400x, 500x, 600x, 700x, 800x, 900x, 1000x.
To customize the size, you must set the css class mw-size-* on your icon element, * specifies the size.
I use Semantic UI icon component
To have more information, you should referer to http://semantic-ui.com/elements/icon.html
Why this unit of mesure for icon size ?
The icon size is based on the font size.
It means that if the font size equals 16px, one mw-icon with the css class mw-size-200 will have a size of (200 * 16px =) 32px.
This is a table conversation for a font-size equals 16px;
16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 112px, 128px, 144px, 160px.
A title
A labelA title
A labelA title
<div class="mw-tiles">
<div class="mw-tile mw-medium">
<div class="mw-inner mw-flex">
<i class="mw-icon fa fa-picture-o mw-size-300"></i>
<h4 class="mw-title u-position-bottom u-position-left">A title</h4>
</div>
</div>
</div>
A title
A label
A title
A label
A title
<div class="mw-tiles">
<div class="mw-tile mw-medium u-bg-transparent">
<div class="mw-inner mw-flex">
<img class="mw-icon mw-size-300" alt="icon" src="/resources/Image/file-image.svg" />
<h4 class="mw-title u-text-center u-position-bottom u-position-left u-fg-black">A title</h4>
</div>
</div>
</div>Tile overlay
You can add an overlay and display a title and a description over the tile.
To add an overlay, you must add a
.mw-overlay element inside your tile.
You can customize your overlay:
-
If you want customize the background color, you can choose a color in global color.
To customize the color, you must add a classu-bg-*on yourlabelelement, *specifies the color. -
You can fix the overlay at the top with the class
.u-position-absolute.u-top-0or at the bottom with the class.u-position-absolute.u-bottom-0. - You can make a static overlay in adding the css class
.mw-staticon your overlay element.
<div class="mw-tiles">
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-overlay u-bg-blue-light">
<h4 class="mw-title"><i class="fa fa-picture-o"></i> A title</h4>
<p>
A description or more information about the content.
</p>
</div>
</div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-overlay u-bg-orange-darker u-position-absolute u-top-0">
<h4 class="mw-title"><i class="fa fa-html5"></i> HTML5</h4>
<p>
HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990).
</p>
</div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner">
<div class="mw-overlay u-bg-red-dark u-position-absolute u-top-0">
<p>
A description or more information about the content.
</p>
<h4 class="mw-title"><i class="fa fa-picture-o"></i> A title</h4>
</div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner">
<div class="mw-overlay u-bg-purple-dark u-position-absolute u-top-0 mw-static">
<h4 class="mw-title"><i class="fa fa-picture-o"></i> A title</h4>
</div>
</div>
</div>
</div>Tile image content
To add an image, you must add a
.bg-image element and add a css property
background-image: url('Url/Path/Image') inside the content.
You can customize the filling behavior of the image.
For more details, refers to article.
<style>
.bg-earth{
background-image: url('../Resources/Image/earth.jpg');
}
</style>
<div class="mw-tiles mw-cols-6">
<div class="mw-tile mw-large">
<div class="mw-inner">
<div class="mw-bg-image bg-earth"></div>
</div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -256px 0;"></div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -512px 0;"></div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -640px 0;"></div>
</div>
</div>
<div class="mw-tile mw-medium">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -256px -128px;"></div>
</div>
</div>
<div class="mw-tiles mw-medium">
<div class="mw-tile mw-small">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -384px -128px;"></div>
</div>
</div>
<div class="mw-tile mw-small">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -448px -128px;"></div>
</div>
</div>
<div class="mw-tile mw-small">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -384px -176px;"></div>
</div>
</div>
<div class="mw-tile mw-small">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -448px -176px;"></div>
</div>
</div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-bg-image bg-earth" style="background-position: -512px -128px;"></div>
</div>
</div>
</div>Your image is a background-image
Be Carefull about the content image is rendered using a background image and not an image element.
Display the part of image that you expect
You can display a precise part of the image using efficiently the css property background-position.
Tile image container
To add an background image, you must add a
.mw-bg-image element and add a css property
background-image: url('Url/Path/Image') inside the tiles.
You can customize the filling behavior of the image.
For more details, refers to article.
<div class="mw-tiles mw-tiles-center mw-tiles-middle mw-cols-6">
<div class="mw-bg-image bg-earth">
<div class="mw-tile mw-large u-bg-transparent"></div>
<div class="mw-tile mw-wide u-bg-transparent"></div>
<div class="mw-tile mw-medium u-bg-transparent"></div>
<div class="mw-tile mw-medium u-bg-transparent"></div>
<div class="mw-tile mw-medium u-bg-transparent"></div>
<div class="mw-tiles mw-medium u-bg-transparent">
<div class="mw-tile mw-small u-bg-transparent"></div>
<div class="mw-tile mw-small u-bg-transparent"></div>
<div class="mw-tile mw-small u-bg-transparent"></div>
<div class="mw-tile mw-small u-bg-transparent"></div>
</div>
<div class="mw-tile mw-wide u-bg-transparent"></div>
</div>
</div>Tile animated content
For a animated content, you have the choice between to use a gif or a sprite.
-
For a animated gif, you must add
style="background-image: url('/Url/Path/GIFImage');"
on a element who has the classmw-animation mw-gif. -
For a animated sprite, you must add
style="background-image: url('/Url/Path/SpriteImage');
background-size: (number of image * 100%) 100%;
animation: play-horizontal-sprite 2s steps(numbe of image - 1) infinite;"
on a element who has the classmw-animation mw-sprite
<style>
.sprite-marvel{
background-image: url('../Resources/Animation/marvel.png');
background-size: 1500% 100%; /* Note: number of images in sprite (15 * 100%) */
animation: play-horizontal-sprite 1950ms steps(14) infinite; /* number of steps = number of images - 1 */
-webkit-animation: play-horizontal-sprite 1950ms steps(14) infinite; /* number of steps = number of images - 1 */
}
</style>
<div class="mw-tiles">
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-label u-bg-green-light">GIF</div>
<div class="mw-animation mw-gif" style="background-image: url('../Resources/Animation/marvel.gif');"> </div>
</div>
</div>
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-label u-bg-green-light">Sprite</div>
<div class="mw-animation mw-sprite mw-sprite-marvel"></div>
</div>
</div>
</div>
The ratio is no respected
By default, the size of image is adapted to container.
In others words, the ratio of image can be no respected.
If you want change this comportement, you must adapt the css property
background-size as this way:
- Keep initial ratio for a GIF:
background-size: auto auto; - Keep initial ratio for a Sprite:
background-size: (number of images * 100%) auto;
Tile audio content
For an audio content, you must add an Html
<audio></audio>element.
You can fix the audio player at bottom using the class
.u-position-absolute.u-bottom-0 or at top using the class
.u-position-absolute.u-top-0.
<style>
.bg-the-hobbit {
background-image: url('../Resources/Image/TheHobbit.jpg');
background-size: 100% auto;
}
</style>
<div class="mw-tiles">
<div class="mw-tile mw-wide">
<div class="mw-inner">
<div class="mw-bg-image bg-the-hobbit"></div>
<audio class="u-position-bottom" controls="controls" preload="none">
<source src="/resources/Audio/TheHobbit.ogg" type="audio/ogg" />
<source src="/resources/Audio/TheHobbit.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
Tile video content
For an video content, you must add an Html
<video></video>element.
You can fix the video player at bottom using the class
.u-position-absolute.u-bottom-0 or at top using the class
.u-position-absolute.u-top-0.
<div class="mw-tiles">
<div class="mw-tile mw-wide">
<div class="mw-inner">
<video class="u-position-bottom" controls="controls" preload="none">
<source src="/resources/Video/ads-DeLijn.webm" type="video/webm" />
<source src="/resources/Video/ads-DeLijn.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
The ratio is no respected
By default, the size of the video is adapted to container.
In others words, the ratio of the video can be no respected.
If you want change this comportement, you must adapt the css property
width and
height as this way:
- Keep the initial size of the video :
width: auto; height: auto; - Keep the initial ratio of the video but adapt the size of the video :
width: 100%; height: 100%;
Tile iframe content
You can give a preview of a website in using the iframe content.
You must add the class
.mw-iframe on your tile element and add a iframe tag
<iframe src="http://TheWebsiteUrl.com"></iframe>.
<div class="mw-tiles">
<div class="mw-tile mw-wide mw-iframe" style="margin-bottom: 32px;">
<div class="mw-inner">
<iframe src="http://www.wikipedia.org" sandbox>
Your browser does not support iframes.
</iframe>
<div class="mw-favicon mw-x-large favicon-wikipedia">
<a href="http://www.wikipedia.org" target="_blank"></a>
</div>
</div>
</div>
</div><br />The favicon option (only available for a iframe)
You can display a favicon overflowing from the tile.
If you want use this option, you must to add a
.mw-favicon element inside your
iframe element.
You can choose between 5 different size :
.mw-x-small,
.mw-small,
.mw-medium,
.mw-large,
.mw-x-large
Pane
The pane, the efficient way to display a list of simple content
Demo
-
a titlea subtitlea description with some details
-
a titlea subtitlea description with some details
-
a titlea subtitlea long description with a lot of details which can be displayed on two rows.
-
a titlea subtitlea description with some details
-
a titlea subtitlea long description with a lot of details which can cause a text overflow.
<div class="mw-panes mw-cols-2 mw-theme-light">
<ul class="u-list-unstyled">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-teal-light"></div>
<img class="mw-icon" alt="icon" src="/resources/Image/image.svg" />
<div class="mw-infos">
<div class="mw-title">a title</div>
<div class="u-fg-darker">a subtitle</div>
<div class="u-fg-black">a description with some details</div>
</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-blue-light"></div>
<img class="mw-icon" alt="icon" src="/resources/Image/image.svg" />
<div class="mw-infos">
<div class="mw-title">a title</div>
<div class="u-fg-darker">a subtitle</div>
<div class="u-fg-black">a description with some details</div>
</div>
</a>
</li>
<li class="mw-pane mw-selected mw-selected-blue">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-green-light"></div>
<img class="mw-icon" alt="icon" src="/resources/Image/image.svg" />
<div class="mw-infos">
<div class="mw-title">a title</div>
<div class="u-fg-darker">a subtitle</div>
<div class="u-fg-black">a long description with a lot of details which can be displayed on two rows.</div>
</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-red-dark"></div>
<i class="fa fa-picture-o"></i>
<div class="mw-infos">
<div class="mw-title">a title</div>
<div class="u-fg-darker">a subtitle</div>
<div class="u-fg-black">a description with some details</div>
</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-purple-dark"></div>
<i class="fa fa-picture-o"></i>
<div class="mw-infos">
<div class="mw-title">a title</div>
<div class="u-fg-darker">a subtitle</div>
<div class="u-text-ellipsis u-fg-black">a long description with a lot of details which can cause a text overflow.</div>
</div>
</a>
</li>
</ul>
</div>Pane basic
To create a pane, add a mw-pane in a mw-panes element.
<div class="mw-panes mw-theme-light">
<div class="mw-pane">
<a href="#" class="mw-inner">
<!-- pane content -->
</a>
</div>
</div>Use always panes container
Be sure to wrap all mw-pane element in a mw-panes container.
Pane container
A list of .mw-pane is always wrapped by a .mw-panes.
You can customize the space between each pane.
You can choose to collapse each pane or to separate them.
To customize the space between pane, you must add the css class u-bd-* on the mw-panes, * specifies the spacer option (collapse or separate).
<div class="mw-panes"><ul class="u-list-unstyled"><!--Insert a pane list here--></ul></div>Pane grid system(col)
You can customize the horizontal disposition of list of pane in using columns layout.
To create a col of pane add .mw-cols-# on the mw-panes element, # specifies the number of column.
<div class="mw-panes mw-col-#"><ul class="u-list-unstyled"><!--Insert a pane list here--></ul></div>Pane list
To create a list of pane, you must add the css class mw-pane on each element of the list.
<div class="mw-panes">
<ul class="u-list-unstyled">
<li class="mw-pane"></li>
<li class="mw-pane"></li>
<li class="mw-pane"></li>
</ul>
</div>Pane border and pane selected
You can customize the border color of a pane.
You must refer to utilities color.
To customize the color, you must add a class u-bd-* on your .mw-pane element, *specifies the color.
You can customize the border color of a selected pane.
You must refer to utilities color.
To customize the color, you must add a class mw-selected-* on your .mw-pane element, *specifies the color.
Pane spacing
You can customize the inside and outside spacing for all pane.
You must refer to utilies spacing.
- To customize the margin, you must add the css class
u-mg-*-#on your.mw-paneelement, * specifies the direction and # specifies the size. - To customize the padding, you must add the css class
u-pd-*-#on your.mw-paneelement, * specifies the direction and # specifies the size.
Apply a space for only a pane
You can customize the horizontal in/out space and the vertical in/out space for only a pane.
To customize the horizontal in/out space and/or the vertical in/out space, you must set the css class mw-h-space or mw-vertical-space on the mw-pane element.
Pane inner
You must always wrap your content by .mw-inner element.
You can add any kind of content; text or multimedia as an image, an animation, an audio, a video, ...
a pane link
If you want redirect a user when it click on a pane, you must insert a html link as a content this way<a class="mw-inner mw-flex" href=""><!--Insert your content here--></a>
<div class="mw-panes">
<ul class="u-list-unstyled">
<li class="mw-pane"><a class="mw-inner mw-flex" href=""><!-- Insert your content here--></a></li>
<li class="mw-pane"><div class="mw-inner mw-flex"><!-- Insert your content here--></div></li>
</ul>
</div>Pane flex
You can add a flex behavior to your inner pane
To add a flex behavior, you must add the css class u-flex on your mw-inner element.
You can customize the direction of your flex element.
You can choose between 4 direction; col, col-reverse, row, row-reverse.
To customize the direction, you must set the css class mw-direction-* on your u-flex element, * specifies the direction.
You can customize the content align of your flex element.
You can choose between 5 content align; start, center, end, around, between.
To customize the content align, you must set the css class mw-content-align-* on your u-flex element, * specifies the content align.
You can customize the align of your flex element.
You can choose between 5 items align; start, center, end, stretch, baseline.
To customize the align, you must set the css class mw-align-* on your u-flex element, * specifies the align.
You can customize the items align of your flex element.
You can choose between 5 items align; start, center, end, stretch, baseline.
To customize the items align, you must set the css class mw-items-align-* on your u-flex element, * specifies the items align.
-
content-align-start
-
content-align-center
-
content-align-end
-
items-align-start
-
items-align-center
-
items-align-end
<div class="mw-panes mw-cols-2 mw-theme-light">
<ul class="u-list-unstyled">
<li class="mw-pane">
<div class="mw-inner u-flex u-content-start">
<i class="fa fa-picture-o"></i>
<div class="mw-title">content-align-start</div>
</div>
</li>
<li class="mw-pane">
<div class="mw-inner u-flex u-content-center">
<i class="fa fa-picture-o"></i>
<div class="mw-title">content-align-center</div>
</div>
</li>
<li class="mw-pane">
<div class="mw-inner u-flex u-content-end">
<i class="fa fa-picture-o"></i>
<div class="mw-title">content-align-end</div>
</div>
</li>
<li class="mw-pane">
<div class="mw-inner u-flex u-items-start">
<i class="fa fa-picture-o"></i>
<div class="mw-title">items-align-start</div>
</div>
</li>
<li class="mw-pane">
<div class="mw-inner u-flex u-items-center">
<i class="fa fa-picture-o"></i>
<div class="mw-title">items-align-center</div>
</div>
</li>
<li class="mw-pane">
<div class="mw-inner u-flex u-items-end">
<i class="fa fa-picture-o"></i>
<div class="mw-title">items-align-end</div>
</div>
</li>
</ul>
</div>Pane title
You can add a title on your pane.
To add a title, you must add a mw-title element inside your pane.
Display the title on one row only
If you want to display the title on only one row, you must add the css class u-text-ellipsis on your mw-title element.
The overflow text will be truncated and replace by "...".
<div class="mw-panes">
<ul class="u-list-unstyled" style="width: 50%;">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#"><div class="mw-title">a title</div></a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#"><div class="mw-title">a long title with a long description which may cause a text overflow</div></a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#"><i class="fa fa-picture-o big mg-fg-black"></i><div class="mw-title">a title</div></a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#"><img class="icon big" alt="icon" src="/resources/Image/image.svg" /><div class="mw-title">a long title with a long description which may cause a text overflow</div></a>
</li>
</ul>
</div>Pane icon
You can add an icon in a pane.
To add an icon, you must add an <i class="fa fa-*"></i> element or an <img src="..." alt="icon" />.
<div class="mw-panes mw-theme-light">
<ul class="u-list-unstyled">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<i class="fa fa-picture-o"></i>
</a>
</li>
</ul>
</div>Pane info
You can add a lot of information inside your pane.
If you want correctly structure your information, you must wrap them inside an infos element.
<div class="mw-panes mw-theme-light">
<ul class="u-list-unstyled" style="width: 50%;">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<img class="mw-icon" alt="icon" src="/resources/Image/image.svg" />
<div class="mw-infos">
<div class="mw-title">a title</div>
<div class="u-fg-darker">a subtitle</div>
<div class="u-fg-black">a description with some details</div>
</div>
</a>
</li>
</ul>
</div>Pane led
To create a pane led, you must add a mw-led element inside your mw-pane.
You can customize your pane led.
-
You can customize the color of a led.
To customize the color on:hoverand:focusevent, you must add a classu-on-*on yourmw-ledelement, * specifies the color.
For more details, refers to Utilities color article.
<div class="mw-panes mw-cols-2 mw-theme-light">
<ul class="u-list-unstyled">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-blue-light"></div>
<!-- content -->
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-position-right u-on-purple-dark"></div>
<!-- content -->
</a>
</li>
</ul>
</div>Pane divider
You can add a divider inside a list of pane.
To create a divider, you must add a mw-divider element as an new empty pane element.
A space as divider
If you want see only a space as divider, you must add the css class .u-bd-transparent on the mw-divider element.
- a title
- a title
<div class="mw-panes mw-theme-light">
<ul class="u-list-unstyled">
<li class="mw-pane"></li>
<li class="mw-divider"></li>
<li class="mw-pane"></li>
</ul>
</div>Pane group
If you want create a group of pane, you must add a mw-group element immediatly before a list of pane element.
You can collapse a group in adding the css class mw-collapse on the mw-group element.
You can add a header to a pane group.
To add a header, you must add a child element and set the css class mw-header.
You can customize a header with a divider effect.
To add a divider effect, you must add the css class mw-divider on the mw-header element.
<div class="mw-panes mw-theme-light">
<div class="mw-group">
<a class="mw-header" href="">Group 1</a>
<ul class="u-list-unstyled">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-teal-light"></div>
<i class="fa fa-picture-o u-fg-black"></i>
<div class="mw-title">a title</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-blue-light"></div>
<i class="fa fa-picture-o u-fg-black"></i>
<div class="mw-title">a title</div>
</a>
</li>
</ul>
</div>
<div class="mw-group">
<a class="mw-header mw-divider" href="">Group 2</a>
<ul class="u-list-unstyled">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-teal-light"></div>
<img class="mw-icon" alt="icon" src="/Resources/Image/image.svg" />
<div class="mw-title">a title</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-blue-light"></div>
<img class="mw-icon" alt="icon" src="/Resources/Image/image.svg" />
<div class="mw-title">a title</div>
</a>
</li>
</ul>
</div>
<div class="mw-group mw-collapse">
<a class="mw-header" href="">Group 3</a>
<ul class="u-list-unstyled">
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-teal-light"></div>
<i class="fa fa-picture-o"></i>
<div class="mw-title">a title</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner mw-flex" href="#">
<div class="mw-led u-on-blue-light"></div>
<i class="fa fa-picture-o"></i>
<div class="mw-title">a title</div>
</a>
</li>
</ul>
</div>
</div>Grid
The grid, the best way to view and handle large amount of data.
Grid demo
Orders
| Order | Customer name | Date | Product | Quantity | Total |
|---|
| 1 | #1472 | Fulton Carlson | 30/07/15 | consectetuer | 92 | $7657.13 | |
| 2 | #1726 | Kellie Guerra | 08/07/15 | quis | 36 | $5196.16 | |
| 3 | #1743 | Cooper Wheeler | 28/04/17 | magna, | 6 | $4931.96 | |
| 4 | #1388 | Juliet Thornton | 11/12/15 | tellus | 97 | $9957.26 | |
| 5 | #1160 | Shana Moon | 03/08/16 | convallis, | 59 | $631.93 | |
| 6 | #1738 | Mason Summers | 04/03/17 | nec, | 29 | $2549.29 | |
| 7 | #1866 | Aubrey Hampton | 03/10/15 | Donec | 17 | $7245.64 | |
| 8 | #1371 | Melissa Nelson | 31/07/16 | Aliquam | 44 | $1957.48 | |
| 9 | #1973 | Hoyt Ballard | 19/11/16 | Donec | 76 | $1355.46 | |
| 10 | #1113 | Rinah Pitts | 28/09/15 | non | 82 | $3591.42 | |
| 11 | #1714 | Axel Ashley | 28/10/15 | Sed | 64 | $5467.48 | |
| 12 | #1983 | Paula Bowman | 22/01/16 | dapibus | 7 | $9795.80 | |
| 13 | #1899 | Athena Thornton | 04/02/16 | enim. | 97 | $5162.29 | |
| 14 | #1813 | Genevieve Hays | 08/07/15 | sapien, | 21 | $7499.43 | |
| 15 | #1996 | Justine Delacruz | 26/07/16 | justo | 85 | $6501.88 | |
| 16 | #1553 | Nissim Guerra | 26/02/16 | amet | 85 | $9947.10 | |
| 17 | #1635 | Lance Acosta | 15/05/16 | iaculis, | 13 | $6405.98 | |
| 18 | #1289 | Stewart Rivas | 30/01/17 | ipsum | 10 | $7903.60 | |
| 19 | #1441 | Nelle Morrow | 22/12/16 | nulla | 17 | $1646.52 | |
| 20 | #1742 | Martha Riddle | 18/04/16 | Quisque | 36 | $6794.14 |
<div class="mw-grid grid-demo">
<!-- Grid header -->
<header class="mw-header" style="background-color: #FFF;">
<h3 class="mw-title">Orders</h3>
</header>
<div class="mw-menubar">
<div class="mw-ribbon">
<div class="mw-tabs">
<ul class="u-list-unstyled">
<li class="mw-tab mw-active"><a href="#tab-action">Action</a></li>
<li class="mw-tab"><a href="#tab-chart">Chart</a></li>
<li class="mw-tab"><a href="#tab-export">Export</a></li>
</ul>
</div>
<div class="mw-panels" style="height: 95px;">
<div class="mw-panel mw-active" id="tab-action">
<div class="mw-group">
<div class="mw-title">Command</div>
<div class="mw-command" title="Add an order">
<i class="fa fa-plus mw-size-150"></i>
<div class="mw-label">Add</div>
</div>
<div class="mw-command" title="Delete an order">
<i class="fa fa-remove mw-size-150"></i>
<div class="mw-label">Delete</div>
</div>
<div class="mw-command" title="Edit an order">
<i class="fa fa-edit mw-size-150"></i>
<div class="mw-label">Edit</div>
</div>
<div class="mw-command mw-submenu" title="Mark an order as">
<i class="fa fa-check mw-size-150"></i>
<div class="mw-label">Mark as</div>
</div>
</div>
<div class="mw-group">
<div class="mw-title">Data</div>
<div class="mw-command" title="Select all orders">
<i class="fa fa-refresh mw-size-150"></i>
<div class="mw-label">Refresh</div>
</div>
</div>
<div class="mw-group">
<div class="mw-title">Select</div>
<div class="mw-command" title="Select all orders">
<i class="fa fa-check-square-o mw-size-150"></i>
<div class="mw-label">Select all</div>
</div>
<div class="mw-command" title="Select any orders">
<i class="fa fa-square-o mw-size-150"></i>
<div class="mw-label">Select none</div>
</div>
</div>
<div class="mw-group u-bd-right-0">
<div class="mw-title">View</div>
<div class="mw-command" title="Table View">
<i class="fa fa-table mw-size-150"></i>
<div class="mw-label">Table</div>
</div>
<div class="mw-command" title="Pane View">
<i class="fa fa-list layout mw-size-150"></i>
<div class="mw-label">Pane</div>
</div>
<div class="mw-command" title="Tile View">
<i class="fa fa-th layout mw-size-150"></i>
<div class="mw-label">Tile</div>
</div>
</div>
<div class="mw-group mw-group-right u-float-right">
<div class="mw-title">Search</div>
<div class="mw-command mw-dropdown" title="Sort the orders">
<i class="fa fa-filter mw-size-150"></i>
<div class="mw-label">Filter By</div>
<button type="button" class="btn btn-default mw-button">
<i class="fa fa-sort-down u-align-top" style="line-height: 1rem;"></i>
</button>
</div>
<div class="mw-command" title="Filter the orders">
<i class="fa fa-search mw-size-150"></i>
<div class="mw-label">Search</div>
</div>
</div>
<div class="mw-group mw-group-right u-float-right">
<div class="mw-title">Sort</div>
<div class="mw-command mw-dropdown" title="Sort the orders">
<i class="fa fa-sort-alpha-asc mw-size-150"></i>
<div class="mw-label">Sort By</div>
<button type="button" class="btn btn-default mw-button">
<i class="fa fa-sort-down u-align-top" style="line-height: 1rem;"></i>
</button>
</div>
</div>
</div>
<div class="mw-panel" id="tab-chart">
</div>
<div class="mw-panel" id="tab-export">
</div>
</div>
</div>
<div class="input-group mw-searchbar">
<div class="input-group-btn mw-filter-by">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span>Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" hidden>
<li><a href="#field">Field</a></li>
<li class="divider"></li>
<li><a href="#all">Anything</a></li>
</ul>
</div>
<input type="hidden" name="search-param" value="fieldValue">
<input type="text" class="form-control" name="search" placeholder="Search ...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
<!-- Grid body -->
<div class="mw-body">
<!-- Data headers (top frozen) -->
<div class="mw-headers u-scroll-gap">
<div class="u-vertical u-scroll">
<table class="table mw-table">
<colgroup class="mw-colgroup">
<col class="column-row-number" />
<col class="column-checkbox" />
<col class="column-order" />
<col class="column-customer" />
<col class="column-date" />
<col class="column-product" />
<col class="column-quantity" />
<col class="column-total" />
</colgroup>
<thead>
<tr>
<th></th>
<th><input type="checkbox"></th>
<th class="">Order</th>
<th class="mw-sortable mw-sorted mw-down">Customer name</th>
<th class="mw-sortable">Date</th>
<th class="mw-sortable">Product</th>
<th class="mw-sortable">Quantity</th>
<th class="mw-sortable">Total</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- Data content -->
<div class="mw-contents u-vertical u-scroll" style="height: 390px;">
<table class="table table-striped mw-table mw-hover">
<colgroup class="mw-colgroup">
<col class="column-row-number" />
<col class="column-checkbox" />
<col class="column-order" />
<col class="column-customer" />
<col class="column-date" />
<col class="column-product" />
<col class="column-quantity" />
<col class="column-total" />
</colgroup>
<tbody>
<tr>
<td>1</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1472</a></td>
<td>Fulton Carlson</td>
<td>30/07/15</td>
<td>consectetuer</td>
<td>92</td>
<td>$7657.13</td>
</tr>
<tr>
<td>2</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1726</a></td>
<td>Kellie Guerra</td>
<td>08/07/15</td>
<td>quis</td>
<td>36</td>
<td>$5196.16</td>
</tr>
<tr>
<td>3</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1743</a></td>
<td>Cooper Wheeler</td>
<td>28/04/17</td>
<td>magna,</td>
<td>6</td>
<td>$4931.96</td>
</tr>
<tr>
<td>4</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1388</a></td>
<td>Juliet Thornton</td>
<td>11/12/15</td>
<td>tellus</td>
<td>97</td>
<td>$9957.26</td>
</tr>
<tr>
<td>5</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1160</a></td>
<td>Shana Moon</td>
<td>03/08/16</td>
<td>convallis,</td>
<td>59</td>
<td>$631.93</td>
</tr>
<tr>
<td>6</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1738</a></td>
<td>Mason Summers</td>
<td>04/03/17</td>
<td>nec,</td>
<td>29</td>
<td>$2549.29</td>
</tr>
<tr>
<td>7</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1866</a></td>
<td>Aubrey Hampton</td>
<td>03/10/15</td>
<td>Donec</td>
<td>17</td>
<td>$7245.64</td>
</tr>
<tr>
<td>8</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1371</a></td>
<td>Melissa Nelson</td>
<td>31/07/16</td>
<td>Aliquam</td>
<td>44</td>
<td>$1957.48</td>
</tr>
<tr>
<td>9</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1973</a></td>
<td>Hoyt Ballard</td>
<td>19/11/16</td>
<td>Donec</td>
<td>76</td>
<td>$1355.46</td>
</tr>
<tr>
<td>10</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1113</a></td>
<td>Rinah Pitts</td>
<td>28/09/15</td>
<td>non</td>
<td>82</td>
<td>$3591.42</td>
</tr>
<tr>
<td>11</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1714</a></td>
<td>Axel Ashley</td>
<td>28/10/15</td>
<td>Sed</td>
<td>64</td>
<td>$5467.48</td>
</tr>
<tr>
<td>12</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1983</a></td>
<td>Paula Bowman</td>
<td>22/01/16</td>
<td>dapibus</td>
<td>7</td>
<td>$9795.80</td>
</tr>
<tr>
<td>13</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1899</a></td>
<td>Athena Thornton</td>
<td>04/02/16</td>
<td>enim.</td>
<td>97</td>
<td>$5162.29</td>
</tr>
<tr>
<td>14</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1813</a></td>
<td>Genevieve Hays</td>
<td>08/07/15</td>
<td>sapien,</td>
<td>21</td>
<td>$7499.43</td>
</tr>
<tr>
<td>15</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1996</a></td>
<td>Justine Delacruz</td>
<td>26/07/16</td>
<td>justo</td>
<td>85</td>
<td>$6501.88</td>
</tr>
<tr>
<td>16</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1553</a></td>
<td>Nissim Guerra</td>
<td>26/02/16</td>
<td>amet</td>
<td>85</td>
<td>$9947.10</td>
</tr>
<tr>
<td>17</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1635</a></td>
<td>Lance Acosta</td>
<td>15/05/16</td>
<td>iaculis,</td>
<td>13</td>
<td>$6405.98</td>
</tr>
<tr>
<td>18</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1289</a></td>
<td>Stewart Rivas</td>
<td>30/01/17</td>
<td>ipsum</td>
<td>10</td>
<td>$7903.60</td>
</tr>
<tr>
<td>19</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1441</a></td>
<td>Nelle Morrow</td>
<td>22/12/16</td>
<td>nulla</td>
<td>17</td>
<td>$1646.52</td>
</tr>
<tr>
<td>20</td>
<td><input type="checkbox" /></td>
<td><a href="#">#1742</a></td>
<td>Martha Riddle</td>
<td>18/04/16</td>
<td>Quisque</td>
<td>36</td>
<td>$6794.14</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Grid footer -->
<footer class="mw-footer">
<div class="row">
<div class="col-sm-9">
<nav class="clearfix">
<ul class="pagination mw-pagination u-float-left">
<li title="first">
<a href="#" aria-label="First">
<span aria-hidden="true"><i class="glyphicon glyphicon-step-backward"></i></span>
</a>
</li>
<li title="previous">
<a href="#" aria-label="Previous">
<span aria-hidden="true"><i class="glyphicon glyphicon-triangle-left"></i></span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li title="next">
<a href="#" aria-label="Next">
<span aria-hidden="true"><i class="glyphicon glyphicon-triangle-right"></i></span>
</a>
</li>
<li title="last">
<a href="#" aria-label="Last">
<span aria-hidden="true"><i class="glyphicon glyphicon-step-forward"></i></span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-2 col-sm-offset-1">
<div class="mw-legend u-float-right">
1 - 15 of 99 items
</div>
</div>
</div>
</footer>
</div>Grid basic
To create a grid, add a mw-grid element.
To add a header, add a mw-header element.
To add data, first add a mw-body then add mw-table element.
To add a footer, add a mw-footer element.
Grid Title
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| 1 | Data 1 | Data 2 | Data 3 |
| 2 | Data 1 | Data 2 | Data 3 |
| 3 | Data 1 | Data 2 | Data 3 |
<style>
.column-row-number {
width: 35px;
}
</style>
<div class="mw-grid">
<header class="mw-header">
<h3 class="mw-title">Grid Title</h3>
</header>
<div class="mw-menubar">
<!-- add command button or mw-ribbon here -->
</div>
<div class="mw-body">
<table class="table table-striped mw-table">
<colgroup>
<col class="column-row-number" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>3</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>
<footer class="mw-footer">
<div class="mw-legend u-text-right">99 items</div>
</footer>
</div>Grid menubar
You can add a menubar to display commands and actions available on your grid.
To add a menubar, add a mw-menubar inside the mw-grid element.
To add a ribbon, add a mw-ribbon inside the mw-menubar element.
For more details about ribbon, refers to ribbon article.
Grid Title
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| 1 | Data 1 | Data 2 | Data 3 |
| 2 | Data 1 | Data 2 | Data 3 |
| 3 | Data 1 | Data 2 | Data 3 |
<div class="mw-grid">
<header class="mw-header u-bg-white">
<h3 class="mw-title">Grid Title</h3>
</header>
<div class="mw-menubar">
<div class="mw-ribbon">
<div class="mw-panels" style="height: 90px;">
<div class="mw-panel mw-active">
<div class="mw-group">
<div class="mw-title">Command</div>
<div class="mw-command" title="Add an order">
<i class="fa fa-plus mw-size-150"></i>
<div class="mw-label">Add</div>
</div>
<div class="mw-command" title="Delete an order">
<i class="fa fa-remove mw-size-150"></i>
<div class="mw-label">Delete</div>
</div>
<div class="mw-command" title="Edit an order">
<i class="fa fa-edit mw-size-150"></i>
<div class="mw-label">Edit</div>
</div>
</div>
<div class="mw-group">
<div class="mw-title">Data</div>
<div class="mw-command" title="Select all orders">
<i class="fa fa-refresh mw-size-150"></i>
<div class="mw-label">Refresh</div>
</div>
</div>
<div class="mw-group mw-group-right u-float-right">
<div class="mw-title">Search</div>
<div class="mw-command" title="Filter the orders">
<i class="fa fa-search mw-size-150"></i>
<div class="mw-label">Search</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mw-body">
<table class="table table-striped mw-table">
<colgroup>
<col class="column-row-number" />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>2</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>3</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>
<footer class="mw-footer u-bg-white">
<!-- footer -->
</footer>
</div>Grid header
You can customize the header of your mw-grid element.
To merge horizontally header cells, you must add the attribut colspan="#", # specifies the number of cells to merge.
To merge vertically header cells, you must add the attribut rowspan="#", # specifies the number of cells to merge.
| Order ID | Product | Customer | |||
|---|---|---|---|---|---|
| Product Name | Product Price | Customer Name | Customer Phone | ||
| #01234 | FakeProduct | 9.99 € | John Smith | 00 11 22 33 44 | |
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" class="u-text-center u-cell-middle">
<input name="" type="checkbox" />
</th>
<th rowspan="2" class="u-text-left u-cell-middle">Order ID</th>
<th colspan="2" class="u-text-center">Product</th>
<th colspan="2" class="u-text-center">Customer</th>
</tr>
<tr>
<th>Product Name</th>
<th>Product Price</th>
<th>Customer Name</th>
<th>Customer Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text-center"><input name="" type="checkbox" /></td>
<td class="u-text-left">#01234</td>
<td class="u-text-left">FakeProduct</td>
<td class="u-text-right">9.99 €</td>
<td class="u-text-left">John Smith</td>
<td class="u-text-left">00 11 22 33 44</td>
</tr>
</tbody>
</table> Grid sortable
You can sort a grid on a column.
To add UI sort control on a column, add a mw-sortable on a table header element.
To add UI sorted control on a column, add a mw-* on a mw-sorted element, * specifies the sort direction.
To customize the UI sorted type, add a mw-* on a mw-sorted element, * specifies the sort type.
You can choose between 2 sort direction; up, down.
You can choose between 4 sort type; default, alpha, numeric, amount.
| # | Player Name | Game played | Score |
|---|
<div class="mw-grid">
<div class="mw-body">
<table class="table mw-table">
<thead>
<tr>
<th>#</th>
<th class="mw-sortable">Player Name</th>
<th class="mw-sortable">Game played</th>
<th class="mw-sortable mw-sorted mw-up">Score</th>
</tr>
</thead>
<tbody>
<!-- data -->
</tbody>
</table>
</div>
</div>Grid pagination
You can add a pagination for you data grid.
To add a UI pagination Control, add a mw-pagination on a list of list items.
Grid Title
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| # | ... | ... | ... |
<div class="mw-grid">
<header class="mw-header">
<!-- header -->
</header>
<div class="mw-body">
<!-- data table -->
</div>
<footer class="mw-footer">
<div class="row">
<div class="col-sm-9">
<nav class="clearfix">
<ul class="pagination mw-pagination u-float-left">
<li title="first">
<a href="#" aria-label="First">
<span aria-hidden="true"><i class="glyphicon glyphicon-step-backward"></i></span>
</a>
</li>
<li title="previous">
<a href="#" aria-label="Previous">
<span aria-hidden="true"><i class="glyphicon glyphicon-triangle-left"></i></span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li title="next">
<a href="#" aria-label="Next">
<span aria-hidden="true"><i class="glyphicon glyphicon-triangle-right"></i></span>
</a>
</li>
<li title="last">
<a href="#" aria-label="Last">
<span aria-hidden="true"><i class="glyphicon glyphicon-step-forward"></i></span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-2 col-sm-offset-1">
<div class="mw-legend u-float-right">
1 - 15 of 99 items
</div>
</div>
</div>
</footer>
</div>Grid hover
You can add a hover behavior on your data table.
To add a hover behavior, add mw-hover on a mw-table element.
Grid Title
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| 1 | ... | ... | ... |
| 2 | ... | ... | ... |
| 3 | ... | ... | ... |
| 4 | ... | ... | ... |
| 5 | ... | ... | ... |
<div class="mw-grid">
<header class="mw-header">
<!-- header -->
</header>
<div class="mw-body">
<table class="table table-striped mw-table mw-hover">
<!-- table data -->
</table>
</div>
<footer class="mw-footer">
<!-- footer -->
</footer>
</div>Grid scroll
You can handle scroll inside a mw-grid element.
In other words, you can frozen the columns.
Top / Bottom
| Customer Firstname | Customer Lastname | Customer Phone | Customer Address |
|---|
| 1 | Denton | Reilly | 03 17 18 01 10 | P.O. Box 769, 1701 Nec St. |
| 2 | Devin | Greene | 01 46 50 15 86 | 586-9337 Id St. |
| 3 | Thane | Sykes | 02 12 92 59 49 | 2510 Sed Rd. |
| 4 | Marsden | Lopez | 08 73 62 93 70 | Ap #509-1265 Ut Rd. |
| 5 | Chester | Briggs | 01 67 19 99 15 | 9272 Id Rd. |
| 6 | Hayden | Allen | 04 49 58 34 30 | 808-6304 A, St. |
| 7 | Elmo | Norris | 02 17 10 87 90 | 1500 Commodo St. |
| 8 | Graiden | Nelson | 08 50 55 98 70 | 264-9284 Nulla St. |
| 9 | Hall | Allison | 09 79 56 54 15 | 908-2931 Eu, Road |
| 10 | Reece | Hood | 05 02 16 20 52 | 924-7949 Magna St. |
| 11 | Colin | Logan | 04 79 78 14 31 | 999 Nec Av. |
| 12 | Chester | Adams | 02 75 21 45 30 | 6719 Ultrices. Ave |
| 13 | Yasir | Finley | 06 45 52 56 70 | P.O. Box 397, 2820 Dictum Ave |
| 14 | Merritt | Cochran | 04 31 40 59 36 | P.O. Box 626, 3731 Fusce Ave |
| 15 | Gannon | Keller | 06 00 90 81 66 | Ap #667-1977 Id, Av. |
| Customer Firstname | Customer Lastname | Customer Phone | Customer Address |
|---|
<div class="mw-grid">
<div class="mw-body">
<!-- Headers (top frozen) -->
<div class="mw-headers u-scroll-gap">
<div class="u-scroll u-vertical">
<table class="table mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
</table>
</div>
</div>
<!-- Content -->
<div class="mw-contents u-scroll u-vertical" style="height: 370px;">
<table class="table table-striped mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<tbody>
<!-- insert table data here -->
</tbody>
</table>
</div>
<!-- Headers (bottom frozen) -->
<div class="mw-headers u-scroll-gap">
<div class="u-scroll u-vertical">
<table class="table mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
</table>
</div>
</div>
</div>
</div>Left / Right
| Date | Customer Firstname | Customer Lastname | Customer Email | Customer Phone | Customer Address |
|---|---|---|---|---|---|
| 03/22/17 | Chester | Carter | accumsan.sed@duinectempus.edu | 07 26 24 41 23 | 4257 A, Ave |
| 12/31/15 | Castor | Holder | et.malesuada@etrisusQuisque.com | 09 71 12 49 68 | P.O. Box 670, 7281 Ornare Rd. |
| 04/02/17 | David | House | Lorem.ipsum.dolor@adipiscing.co.uk | 07 09 47 95 97 | 7644 Magna Street |
| 07/25/15 | Duncan | Dodson | sed@metusvitae.ca | 05 82 62 52 42 | P.O. Box 717, 1628 Arcu Road |
| 06/22/16 | Christian | Dunlap | tellus@Cum.com | 07 82 21 71 32 | P.O. Box 453, 9615 Ac, Avenue |
| 10/17/16 | Reece | Hahn | fringilla@dolordapibusgravida.net | 03 99 26 73 97 | 555-2633 Lacus. St. |
| 03/30/17 | Lev | Ruiz | vel.est@magnaSedeu.edu | 02 18 29 21 35 | P.O. Box 991, 3781 Suspendisse Avenue |
| 02/10/17 | Zahir | Gregory | vel.convallis@vitaeodio.ca | 07 94 00 38 85 | 678-1909 Vel Street |
| 07/17/15 | Duncan | Wright | ipsum@orcisemeget.com | 09 21 13 85 08 | Ap #914-285 Nibh. Street |
| 11/14/15 | Marvin | Spencer | tempor@ultricesposuere.com | 03 84 70 13 38 | 614-7996 Fusce St. |
| Total |
|---|
| $7,835 |
| $6,168 |
| $6,807 |
| $5,202 |
| $5,332 |
| $6,594 |
| $8,480 |
| $8,586 |
| $7,727 |
| $6,181 |
<div class="mw-grid">
<div class="mw-body clearfix">
<!-- Columns Number and Order (left frozen) -->
<div class="mw-contents u-float-left" style="width: 10%;">
<table class="table table-striped mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
<tbody>
<!-- insert table data here -->
</tbody>
</table>
</div>
<!-- Columns Date, firstname, lastname, email, phone, address -->
<div class="mw-contents u-horizontal u-scroll u-float-left" style="width: 80%;">
<table class="table table-striped mw-table" style="width: 1140px;">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
<tbody>
<!-- insert table data here -->
</tbody>
</table>
</div>
<!-- Columns Total (right frozen) -->
<div class="mw-contents u-float-left" style="width: 10%; font-weight: bold;">
<table class="table table-striped mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
<tbody>
<!-- insert table data here -->
</tbody>
</table>
</div>
</div>
</div>Top / Left
| Date | Customer Firstname | Customer Lastname | Customer Email | Customer Phone | Customer Address | Total |
|---|
| 03/22/17 | Chester | Carter | accumsan.sed@duinectempus.edu | 07 26 24 41 23 | 4257 A, Ave | $7,835 |
| 12/31/15 | Castor | Holder | et.malesuada@etrisusQuisque.com | 09 71 12 49 68 | P.O. Box 670, 7281 Ornare Rd. | $6,168 |
| 04/02/17 | David | House | Lorem.ipsum.dolor@adipiscing.co.uk | 07 09 47 95 97 | 7644 Magna Street | $6,807 |
| 07/25/15 | Duncan | Dodson | sed@metusvitae.ca | 05 82 62 52 42 | P.O. Box 717, 1628 Arcu Road | $5,202 |
| 06/22/16 | Christian | Dunlap | tellus@Cum.com | 07 82 21 71 32 | P.O. Box 453, 9615 Ac, Avenue | $5,332 |
| 10/17/16 | Reece | Hahn | fringilla@dolordapibusgravida.net | 03 99 26 73 97 | 555-2633 Lacus. St. | $6,594 |
| 03/30/17 | Lev | Ruiz | vel.est@magnaSedeu.edu | 02 18 29 21 35 | P.O. Box 991, 3781 Suspendisse Avenue | $8,480 |
| 02/10/17 | Zahir | Gregory | vel.convallis@vitaeodio.ca | 07 94 00 38 85 | 678-1909 Vel Street | $8,586 |
| 07/17/15 | Duncan | Wright | ipsum@orcisemeget.com | 09 21 13 85 08 | Ap #914-285 Nibh. Street | $7,727 |
| 11/14/15 | Marvin | Spencer | tempor@ultricesposuere.com | 03 84 70 13 38 | 614-7996 Fusce St. | $6,181 |
<div class="mw-grid">
<div class="mw-body clearfix">
<!-- Columns Number and Order (left frozen) -->
<div class="u-float-left" style="width: 10%;">
<!-- Headers (top frozen) -->
<div class="mw-headers">
<table class="table mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
</table>
</div>
<!-- Content -->
<div class="mw-contents u-scroll u-vertical u-invisible" style="height: 185px;">
<table class="table table-striped mw-table">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<tbody>
<!-- insert table data here -->
</tbody>
</table>
</div>
</div>
<!-- Columns Date, firstname, lastname, email, phone, address, total -->
<div class="u-float-left" style="width: 90%;">
<!-- Headers (top frozen) -->
<div class="mw-headers u-scroll-gap">
<div class="u-scroll u-horizontal u-invisible u-scroll u-vertical">
<table class="table mw-table" style="width: 1140px;">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<thead>
<!-- insert table headers here -->
</thead>
</table>
</div>
</div>
<!-- Content -->
<div class="mw-contents u-scroll u-horizontal mw-vertical" style="height: calc(185px + 17px);">
<table class="table table-striped mw-table mw-left mw-right" style="width: 1140px;">
<colgroup>
<!-- insert column definitions here -->
</colgroup>
<tbody>
<!-- insert table data here -->
</tbody>
</table>
</div>
</div>
</div>
</div>You need Javascript to synchronize scrollbars
If you want combine horizontal and vertical scrolls, you need to use javascript to synchronize your scrollbars who are splitted in differents small view.
Ribbon
The ribbon, a modern menu bar to display all commands.
Demo
<style>
.gallery-style {
width: calc(4 * 80px + 4 * (2 * 5px) + 4 * (2 * 2px) + 25px); /* item style width + padding + border + button width */
height: calc(45px + 20px + 2px * 2); /* style preview height + style label height + border */
}
.gallery-style-preview {
width: 80px;
height: 45px;
overflow: hidden;
white-space: nowrap;
font-size: 2rem;
line-height: 50px;
}
.gallery-style-label {
width: 80px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.25rem;
}
</style>
<div class="mw-ribbon demo-ribbon">
<div class="mw-tabs">
<ul class="u-list-unstyled">
<li class="mw-tab mw-primary"><a href="#tab-home">Home</a></li>
<li class="mw-tab mw-active"><a href="#tab-editor">Editor</a></li>
</ul>
</div>
<div class="mw-panels">
<div class="mw-panel" id="tab-home">
<!-- Insert your commands here -->
</div>
<div class="mw-panel mw-active" id="tab-editor">
<!-- Edit Commands -->
<div class="mw-group">
<div class="mw-title">Edit</div>
<div class="mw-split mw-command mw-horizontal" title="Paste">
<div class="mw-command mw-option" title="Default action">
<div class="mw-icon mw-size-200">
<i class="fa fa-paste"></i>
</div>
</div>
<div class="mw-divider mw-horizontal u-mg-y-0"></div>
<div class="mw-command mw-options mw-dropdown" title="More action">
<div class="mw-label">
Paste options
</div>
<button class="btn btn-default mw-button" type="button">
<i class="fa fa-angle-down"></i>
</button>
</div>
</div>
<div class="mw-command">
<div class="mw-icon">
<i class="fa fa-copy mw-size-200"></i>
</div>
<div class="mw-divider mw-horizontal mw-invisible u-mg-y-0"></div>
<div class="mw-label">Copy</div>
</div>
<div class="mw-command">
<div class="mw-icon">
<i class="fa fa-cut mw-size-200"></i>
</div>
<div class="mw-divider mw-horizontal mw-invisible u-mg-y-0"></div>
<div class="mw-label">Cut</div>
</div>
</div>
<!-- Style commands -->
<div class="mw-group">
<header class="mw-title">Style</header>
<div>
<div class="mw-command">
<i class="fa fa-bold mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-italic mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-underline mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-strikethrough mw-size-100"></i>
</div>
</div>
<div>
<div class="mw-command">
<i class="fa fa-header mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-paragraph mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-link mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-eraser mw-size-100"></i>
</div>
</div>
</div>
<!-- Font commands -->
<div class="mw-group">
<header class="mw-title">Font</header>
<div class="mw-gallery">
<div class="mw-inner gallery-style">
<ul class="mw-list">
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Georgia;">AaBbCc</span></div>
<div class="gallery-style-label">Georgia</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Book Antiqua';">AaBbCc</span></div>
<div class="gallery-style-label">Book Antiqua</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Times New Roman';">AaBbCc</span></div>
<div class="gallery-style-label">Times New Roman</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Arial;">AaBbCc</span></div>
<div class="gallery-style-label">Arial</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Comic Sans MS';">AaBbCc</span></div>
<div class="gallery-style-label">Comic Sans MS</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Impact;">AaBbCc</span></div>
<div class="gallery-style-label">Impact</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Tahoma;">AaBbCc</span></div>
<div class="gallery-style-label">Tahoma</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Verdana;">AaBbCc</span></div>
<div class="gallery-style-label">Verdana</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Courier New';">AaBbCc</span></div>
<div class="gallery-style-label">Courier New</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Lucida Console' ;">AaBbCc</span></div>
<div class="gallery-style-label">Lucida Console</div>
</div>
</li>
</ul>
<button class="btn btn-default u-position-absolute u-right-0 u-top-0 u-height-100 u-pd-0" style="width: 25px;" type="button">
<i class="fa fa-angle-down"></i>
</button>
</div>
</div>
<div class="mw-commands">
<div class="u-mg-bottom-25">
<select class="mw-select">
<option style="font-size: 8px;">8</option>
<option style="font-size: 9px;">9</option>
<option style="font-size: 10px;">10</option>
<option style="font-size: 11px;">11</option>
<option style="font-size: 12px;">12</option>
<option style="font-size: 14px;">14</option>
<option style="font-size: 16px;">16</option>
<option style="font-size: 18px;">18</option>
<option style="font-size: 20px;">20</option>
<option style="font-size: 24px;">24</option>
</select>
</div>
<!-- Command picker -->
<div class="mw-command mw-split mw-vertical">
<div class="mw-command mw-option">
<i class="fa fa-font mw-size-100"></i>
</div>
<div class="mw-command mw-picker mw-options">
<button class="btn btn-default mw-button" type="button">
<i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Ribbon basic
To create a ribbon, add a mw-ribbon.
Inside your ribbon, you need to create at least a mw-pannel wrapped in a mw-panels.
Then, you need to set the height of mw-panels element.
<div class="mw-ribbon">
<div class="mw-panels" style="height: 100px;">
<div class="mw-panel"></div>
</div>
</div>Ribbon tab
To add tabs, add mw-tab element wrapped inside mw-tabs element.
To set the tab as active, add the css class mw-active on the mw-tab element.
<div class="mw-ribbon">
<div class="mw-tabs">
<div class="mw-tab mw-primary">
<a href="#tab-home">Home</a>
</div>
<div class="mw-tab">
<a href="#tab-home">Edit</a>
</div>
<div class="mw-tab mw-active">
<a href="#tab-home">View</a>
</div>
</div>
<div class="mw-panels">
<!-- Insert your code here -->
</div>
</div>Ribbon group
To create a group, add a mw-group inside a mw-pannel.
To add a title to your group, add mw-title inside.
You can add a contextual highlight on your mw-group. To add a highlight, you must add mw-highlight mw-contextual as children of mw-group element.
<div class="mw-ribbon">
<div class="mw-panels" style="height: 100px;">
<div class="mw-panel mw-active">
<div class="mw-group">
<div class="mw-title">Group 1</div>
<div class="mw-highlight mw-contextual">Contextual highlight</div>
</div>
</div>
</div>
</div>Ribbon command
To add a command, you must add mw-command.
You can add an mw-icon and/or a mw-label inside your command.
To create a splitted command, create 2 mw-command elements wrappend in mw-split mw-command element.
Then set the css class mw-option on the main command and the css class mw-options on the secondary command.
asc
desc
-
sort alphabetic
-
sort numeric
-
sort by popularity
<div class="mw-ribbon">
<div class="mw-tabs">
<div class="mw-tab mw-active">
<a href="#tab-edit">Edit</a>
</div>
</div>
<div class="mw-panels" style="height: 100px">
<div class="mw-panel mw-active" id="tab-edit">
<div class="mw-group">
<header class="mw-title">Group title</header>
<div>
<div class="mw-command">
<i class="fa fa-list-ul mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-list-ol mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-indent mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-outdent mw-size-100"></i>
</div>
</div>
<div>
<div class="mw-command">
<i class="fa fa-align-left mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-align-center mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-align-right mw-size-100"></i>
</div>
<div class="mw-command">
<i class="fa fa-align-justify mw-size-100"></i>
</div>
</div>
</div>
<div class="mw-group">
<header class="mw-title">Group title</header>
<!-- Classic Command -->
<div class="mw-command" title="Ascending Sort">
<div class="mw-icon">
<i class="fa fa-long-arrow-down mw-size-200"></i>
</div>
<div class="mw-label mw-multiline">sort <br />asc</div>
</div>
<!-- Classic Command -->
<div class="mw-command" title="Descending sort">
<div class="mw-icon">
<i class="fa fa-long-arrow-up mw-size-200"></i>
</div>
<div class="mw-label mw-multiline">sort <br />desc</div>
</div>
<!-- Stacked Commands -->
<div class="mw-commands mw-stacked">
<ul class="u-list-unstyled u-inline-flex u-column">
<li class="mw-command u-text-smaller" title="Alphabetic Sort">
<div class="u-flex u-row u-items-center">
<div class="mw-icon">
<i class="fa fa-sort-alpha-asc"></i>
</div>
<div class="mw-label">sort alphabetic</div>
</div>
</li>
<li class="mw-command u-text-smaller" title="Numeric Sort">
<div class="u-flex u-row u-items-center">
<div class="mw-icon">
<i class="fa fa-sort-numeric-desc"></i>
</div>
<div class="mw-label">sort numeric</div>
</div>
</li>
<li class="mw-command u-text-smaller mw-disabled" title="Popularity Sort">
<div class="u-flex u-row u-items-center">
<div class="mw-icon">
<i class="fa fa-sort-amount-asc"></i>
</div>
<div class="mw-label">sort by popularity</div>
</div>
</li>
</ul>
</div>
<!-- Dropdown Command -->
<div class="mw-command mw-dropdown" title="Filter by field">
<div class="mw-icon mw-size-200">
<i class="fa fa-filter"></i>
</div>
<div class="mw-divider mw-horizontal mw-invisible u-mg-0"></div>
<div class="mw-label">
Filter By
</div>
<button class="btn btn-default mw-button" type="button">
<i class="fa fa-angle-down"></i>
</button>
</div>
<!-- Split Command -->
<div class="mw-split mw-command mw-horizontal" title="Split Command">
<div class="mw-command mw-option" title="Default action">
<div class="mw-icon mw-size-200">
<i class="fa fa-filter"></i>
</div>
</div>
<div class="mw-divider mw-horizontal u-mg-0"></div>
<div class="mw-command mw-options mw-dropdown" title="More action">
<div class="mw-label">
More actions
</div>
<button class="btn btn-default mw-button" type="button">
<i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>Ribbon gallery
To add a gallery, you must add a list item inside a mw-gallery.
-
AaBbCcGeorgia
-
AaBbCcBook Antiqua
-
AaBbCcTimes New Roman
-
AaBbCcArial
-
AaBbCcComic Sans MS
-
AaBbCcImpact
-
AaBbCcTahoma
-
AaBbCcVerdana
-
AaBbCcCourier New
-
AaBbCcLucida Console
<style>
.gallery-style {
width: calc(4 * 80px + 4 * (2 * 5px) + 4 * (2 * 2px) + 25px); /* item style width + padding + border + button width */
height: calc(45px + 20px + 2px * 2); /* style preview height + style label height + border */
}
.gallery-style-preview {
width: 80px;
height: 45px;
overflow: hidden;
white-space: nowrap;
font-size: 2rem;
line-height: 50px;
}
.gallery-style-label {
width: 80px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.25rem;
}
</style>
<div class="mw-ribbon">
<div class="mw-panels" style="height: 100px;">
<div class="mw-panel mw-active">
<div class="mw-group">
<div class="mw-title">Gallery</div>
<div class="mw-gallery">
<div class="mw-inner gallery-style">
<ul class="mw-list">
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Georgia;">AaBbCc</span></div>
<div class="gallery-style-label">Georgia</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Book Antiqua';">AaBbCc</span></div>
<div class="gallery-style-label">Book Antiqua</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Times New Roman';">AaBbCc</span></div>
<div class="gallery-style-label">Times New Roman</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Arial;">AaBbCc</span></div>
<div class="gallery-style-label">Arial</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Comic Sans MS';">AaBbCc</span></div>
<div class="gallery-style-label">Comic Sans MS</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Impact;">AaBbCc</span></div>
<div class="gallery-style-label">Impact</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Tahoma;">AaBbCc</span></div>
<div class="gallery-style-label">Tahoma</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: Verdana;">AaBbCc</span></div>
<div class="gallery-style-label">Verdana</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Courier New';">AaBbCc</span></div>
<div class="gallery-style-label">Courier New</div>
</div>
</li>
<li>
<div>
<div class="gallery-style-preview"><span style="font-family: 'Lucida Console' ;">AaBbCc</span></div>
<div class="gallery-style-label">Lucida Console</div>
</div>
</li>
</ul>
<button class="btn btn-default u-position-absolute u-right-0 u-top-0 u-height-100 u-pd-0" style="width: 25px;" type="button">
<i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>Ribbon dockable
You can dock your ribbon. In others words, you can hide your ribbon if you don t need to see everytime at first plan.
To add a dockable behavior, add the css class mw-dockable on your mw-ribbon element.
To dock a ribbon, add the css class mw-docked on your mw-ribbon element.
To undock a ribbon, add the css class mw-undocked on your mw-ribbon element.
<div class="mw-ribbon mw-dockable mw-undocked">
<div class="mw-tabs">
<ul class="u-list-unstyled">
<li class="mw-tab mw-home"><a href="#tab-home">Home</a></li>
<li class="mw-tab mw-active"><a href="#tab-view">View</a></li>
</ul>
</div>
<div class="mw-panels">
<div class="mw-panel" id="tab-home">
</div>
<div class="mw-panel mw-active" id="tab-view">
</div>
</div>
</div>Menu
The menu, the effeciente way to display some actions or some options to the user.
Demo
<div class="mw-menu mw-divided mw-contextual">
<div class="mw-panes mw-theme-light">
<ul class="u-list-unstyled" role="menu">
<li class="mw-header">Header menu</li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<div class="mw-title">Action</div>
</a>
</li>
<li class="mw-pane mw-disabled">
<a class="mw-inner u-flex" href="#">
<div class="mw-title">Action</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<i class="fa fa-picture-o u-fg-black"></i>
<div class="mw-title">Action</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<img class="mw-icon" alt="icon" src="~/resources/Image/image.svg" />
<div class="mw-title">Action</div>
</a>
</li>
<li class="mw-divider mw-horizontal"></li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<i class="fa fa-check-square-o u-fg-black"></i>
<div class="mw-title">Option</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<input class="mw-icon" type="checkbox" checked />
<div class="mw-title">Option</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<i class="fa fa-dot-circle-o u-fg-black"></i>
<div class="mw-title">Option</div>
</a>
</li>
<li class="mw-pane">
<a class="mw-inner u-flex" href="#">
<input class="mw-icon" type="radio" checked />
<div class="mw-title">Option</div>
</a>
</li>
</ul>
</div>
</div>Utilities
Some usefull css class
Utilities display
You can customize the display of any element.
-
To customize the display, you must set the css class
u-*on your element, * specifies the display.
You can choose between 5 size: inline, block, inline-block, flex, inline-flex.
Utilities hide
You can customize the existence of any element.
-
To customize the existence, you must toggle the css class
u-hiddenon your element.
Use the hidden attribute
You should use the hidden attribute if you want to hide an element.
You can customize the visibility of any element.
-
To customize the visibility, you must toggle the css class
u-invisibleon your element.
Utilities position
You can customize the position of any element.
-
To customize the position, you must set the css class
u-position-*on your element, * specifies the position.
You can choose between 4 positions: absolute, relative, fixed, sticky.
To customize the part of position, you can use the css classu-*-*²on your element, * specifies the direction, *² specifies the value for the positioning.
You can choose between 4 direction : left, top, right, bottom.
You can choose between 2 values for the positioning: 0, auto.
Utilities float
You can add a float behavior to any element.
-
To add a float behavior, you must add the css class
u-float-*on your element, * specifies the direction.
You can choose between 2 directions: left, right. -
To remove a float behavior, you must add the css class
u-float-clearon your element.
Utilities size
You can customize the width of any block element.
-
To customize the width, you must set the css class
u-width-#on your element, * specifies the width in percentage.
You can choose between 14 size: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100.
You can customize the height of any block element.
-
To customize the height, you must set the css class
u-height-#on your element, * specifies the height in percentage.
You can choose between 14 size: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100.
Utilities ratio
You can customize the ratio of any block element.
-
To customize the ratio, you must set the css class
u-ratioand the css classu-ratio-*on your element, * specifies the ratio.
You can choose between 5 ratio: 1-1, 2-1, 1-2, 4-3, 16-9.
Utilities align
You can customize the horizontal align of any block element.
-
To customize the horizontal block-align, you must set the css class
u-align-*on your element, * specifies the alignment.
You can choose between 3 align: left, center, right.
You can customize the vertical-align of any inline or cell element.
-
To customize the vertical-align, you must set the css class
u-align-*on your inline or cell element, * specifies the alignment.
You can choose between 8 vertical-align: baseline, sub, super, text-top, text-bottom, middle, top, bottom.
Utilities spacing
You can customize the margin of any element.
-
To customize the margin, you must set the css class
u-mg-*-#, * specifies the direction and # specifies the size.
You can choose between 6 direction: left, top, right, bottom, x, y.
You can choose between 9 size: 0, 25, 50, 75, 100, 150, 200, 250, 300. Theses sizes are in rem (25 is equal to .25 rem and 100 is equal to 1.00 rem).
You can customize the padding of any element.
-
To customize the padding, you must set the css class
u-pd-*-#, * specifies the direction and # specifies the size.
You can choose between 6 direction: left, top, right, bottom, x, y.
You can choose between 9 size: 0, 25, 50, 75, 100, 150, 200, 250, 300. Theses sizes are in rem (25 is equal to .25 rem and 100 is equal to 1.00 rem).
Utilities flex
You can add a flex behavior to any element
To add a flex behavior, you must add the css class u-flex or u-inline-flex on your element.
-
To customize the direction, you must set the css class
u-*on youru-[inline-]flexelement, * specifies the direction.
You can choose between 4 direction; col, col-reverse, row, row-reverse. -
To customize the content align, you must set the css class
u-content-*on youru-[inline-]flexelement, * specifies the content align.
You can choose between 5 content align; start, center, end, around, between. -
To customize the align, you must set the css class
u-self-*on youru-[inline-]flexelement, * specifies the align.
You can choose between 5 items align; start, center, end, stretch, baseline. -
To customize the items align, you must set the css class
u-items-*on youru-[inline-]flexelement, * specifies the items align.
You can choose between 5 items align; start, center, end, stretch, baseline. -
To customize the items order, you must set the css class
u-unorderedoru-[inline-]flex-*on your element, * specifies the order.
You can choose between 2 orders; first, last.
Utilities text
You can customize the text-size of any element.
-
To customize the font-size, you must set the css class
u-text-*on your element, * specifies the font size.
You can choose between 9 size: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
You can customize the text-align of any element.
-
To customize the text-align, you must set the css class
u-text-*on your element, * specifies the alignment.
You can choose between 6 text-align: left, center, right, justify, start, end.
You can customize the text-transform of any element.
-
To customize the text-transform, you must set the css class
u-text-*on your element, * specifies the transformation.
You can choose between 3 text-transform: lowercase, uppercase, capitalize.
Utilities color
You can customize the color of background of any element.
- To customize the color of background, you must set the css class
u-bg-*on your element, * specifies the color or the shader.
You can customize the color of foreground of any element.
- To customize the color of foreground, you must set the css class
u-fg-*on your element, * specifies the color or the shader.
You can customize the color of border of any element.
- To customize the color of border, you must set the css class
u-bd-*on your element, * specifies the color or the shader.
You can choose between 22 basic color;
teal-light, teal-dark, green-light, green-dark, blue-lighter, blue-light, blue-dark, blue-darker, purple-light, purple-dark, yellow-dark, orange-light, orange-dark, orange-darker, red-light, red-dark, lightgrey-light, lightgrey-dark, grey-light, grey-dark, darkgrey-light, darkgrey-dark.
or
you can choose between 7 shaders;
black, dark, darker, light, lighter, white, transparent.
- *-teal-light
- *-teal-dark
- *-green-light
- *-green-dark
- *-blue-lighter
- *-blue-light
- *-blue-dark
- *-blue-darker
- *-purple-light
- *-purple-dark
- *-yellow-dark
- *-orange-light
- *-orange-dark
- *-orange-darker
- *-red-light
- *-red-dark
- *-lightgrey-light
- *-lightgrey-dark
- *-grey-light
- *-grey-dark
- *-darkgrey-light
- *-darkgrey-dark
- *-white
- *-black
- *-transparent
- *-dark
- *-darker
- *-light
- *-lighter
- *-dark
- *-darker
- *-light
- *-lighter
a title
Utilities gradient
You can customize the background gradient color of any element.
- To customize the background gradient color, you must set the css class
u-bg-gd-*-*²on your element,
* specifies the gradient color and *² specifies the direction of gradient.
You can customize the border gradient color of any element.
- To customize the border gradient color, you must set the css class
u-bd-gd-*²on your element,
* specifies the gradient color and *² specifies the direction of gradient.
You can choose between 22; teal-light, teal-dark, green-light, green-dark, blue-lighter, blue-light, blue-dark, blue-darker, purple-light, purple-dark, yellow-dark, orange-light, orange-dark, orange-darker, red-light, red-dark, lightgrey-light, lightgrey-dark, grey-light, grey-dark, darkgrey-light, darkgrey-dark .
- u-*-teal-light
- u-*-teal-dark
- u-*-green-light
- u-*-green-dark
- u-*-blue-lighter
- u-*-blue-light
- u-*-blue-dark
- u-*-blue-darker
- u-*-purple-light
- u-*-purple-dark
- u-*-yellow-dark
- u-*-orange-light
- u-*-orange-dark
- u-*-orange-darker
- u-*-red-light
- u-*-red-dark
- u-*-lightgrey-light
- u-*-lightgrey-dark
- u-*-grey-light
- u-*-grey-dark
- u-*-darkgrey-light
- u-*-darkgrey-dark
a title
Utilities background-image
You can customize the background-image of any element.
-
To customize the background-image, you must set the css class
u-*on youru-bg-imageelement, * specifies the transormation.
You can choose between 4 transformation: fill, fit, stretch, center.
Utilities border
You can customize the border of any element.
-
To remove a border, you must set the css class
u-bd-0oru-bd-*-0, * specifies the direction.
You can choose between 4 direction: left, top, right, bottom. -
To add a border radius, you must set the css class
u-rounded.
To remove a border radius, you must set the css classu-rounded-0.
To transform the border into circle, you must set the css classu-rounded-circle.
Utilities transform
You can rotate any element.
-
To rotate an element, you must set the css class
u-rotate-#on your element, # specifies the angle.
You can choose between 4 angle: 90, 180, 270, 360.
You can flip any element.
-
To flip an element, you must set the css class
u-flip-*on your element, * specifies the direction.
You can choose between 2 direction: horizontal, vertical.
Utilities scroll
You can customize the scroll of any block element.
-
To customize the scroll behavior, you must set the css class
u-*on youru-scrollelement, * specifies the scroll type.
You can choose between 3 scroll type: auto, horizontal, vertical. -
To customize the visibility of a scrollbar, you must set the css class
u-invisibleon au-scrollelement. -
To customize the display of a scrollbar, you must set the css class
u-hiddenonu-scrollelement. -
To have a gap equals to the scroll bar width, wrap your
u-scrollelement with au-scroll-gap
It will have as effect to create and hide the scroll bar with an overflow hidden.