The main layout is a common html structure to setup your pages.
<nav class="bottom">
<a>
<i>home</i>
<div>Home</div>
</a>
<a>
<i>search</i>
<div>Search</div>
</a>
<a>
<i>share</i>
<div>share</div>
</a>
</nav>
<main class="responsive">
<h3>Compact</h3>
</main>
<nav class="left">
<a>
<i>home</i>
<div>Home</div>
</a>
<a>
<i>search</i>
<div>Search</div>
</a>
<a>
<i>share</i>
<div>share</div>
</a>
</nav>
<main class="responsive">
<h3>Medium</h3>
</main>
<nav class="left drawer">
<a>
<i>home</i>
<div>Home</div>
</a>
<a>
<i>search</i>
<div>Search</div>
</a>
<a>
<i>share</i>
<div>share</div>
</a>
</nav>
<main class="responsive">
<h3>Expanded</h3>
</main>
<nav class="left">
<a>
<i>home</i>
<div>Home</div>
</a>
<a>
<i>search</i>
<div>Search</div>
</a>
<a>
<i>share</i>
<div>share</div>
</a>
</nav>
<main class="responsive">
<div class="grid">
<div class="s6">
<h3>Pane 1</h3>
</div>
<div class="s6">
<h3>Pane 2</h3>
</div>
</div>
</main>
<nav class="left">
<a>
<i>home</i>
<div>Home</div>
</a>
<a>
<i>search</i>
<div>Search</div>
</a>
<a>
<i>share</i>
<div>share</div>
</a>
</nav>
<main class="responsive">
<div class="grid">
<div class="s12 m12 l6">
<h3>Pane 1</h3>
</div>
<div class="s12 m12 l6">
<h3>Pane 2</h3>
</div>
<div class="s12 m12 l6">
<h3>Pane 3</h3>
</div>
<div class="s12 m12 l6">
<h3>Pane 4</h3>
</div>
</div>
</main>
Begin, Elements, Helpers, Settings, Summary, beercss.com
Badge, Button, Card, Checkbox, Chip, Container, Dialog, Expansion, Grid, Icon, Input, Layout, Main layout, Media, Menu, Navigation, Overlay, Page, Progress, Radio, Select, Slider, Switch, Table, Tabs, Textarea, Snackbar, Tooltip, Typography