Materialize
The MATE theme uses the front-end framework Materialize, based on Material Design.
Colors
You find the palette of colors that Materialize provides on the Materialize website or in the theme under Elements and Colors. Each color consists of a base class and optional classes that make the color lighter or darker.
Background color
To change the background color of an element, simply add a class with the color name and a class with the desired lightness level to the element.
Text color
To set a text color, simply use the color name with the suffix -text.
Grid
Materialize uses a 12-column grid system. You also find examples and explanations on the Materialize website.
Screen sizes
| Mobile devices | Tablets | Desktops | Large desktops | |
|---|---|---|---|---|
| Resolution | <= 600px | > 600px | > 992px | > 1200px |
| Class prefix | .s | .m | .l | .xl |
| Number of columns | 12 | 12 | 12 | 12 |
The class col must always come first. If several elements should be displayed side by side,
the parent element must get the class row. For example, the classes col s12 m6 l4
make the element …
- 12 columns wide on mobile devices.
- 6 columns wide on tablets.
- 4 columns wide on desktops.
Usage
The extension Advanced Classes is used to assign these classes to elements. You can add the classes to content elements under Advanced CSS classes (see image 3), although not all elements are supported (e.g. the teaser or content box). If an element is not supported, add the classes manually under Expert settings.
Image 3: Setting advanced CSS classes
For the elements to be displayed correctly, the surrounding element must get the class row. The extension Contao Bootstrap Grid is used for this. Simply create an element of element type Grid Start and select the grid Umschlag mit Klasse row (see image 4). It should then look like image 5. The grid stop element is created automatically.
Under Themes and Manage grid definitions (the second-to-last icon) an empty grid element was created that makes sure a div element with the class row is created.
Image 4: Creating a grid wrapper
Image 5: Elements in a grid wrapper
Icons
To use icons, simply give the element the class material-icons and the icon name as content. You find all icons and their names either on the Material Design website or in the theme under Elements and Icons.
For example:
<i class="material-icons">insert_schedule</i>You can change size and color by adding further classes.
