Blog

Download View in new tab »

Tutorial

Step 1: Boilerplate HTML

First, start with an empty file and paste in the MUI boilerplate HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
    <style>
     /* Tutorial CSS goes here */
    </style>
  </head>
  <body>
    <!-- Tutorial HTML goes here -->
  </body>
</html>

Step 2: Body Layout

Next, create a sidebar and a main content window:

<div id="sidebar">
  <div class="mui--text-light mui--text-display1 mui--align-vertical">SAMPLE BLOG</div>
</div>
<div id="content" class="mui-container-fluid">
  <!-- blog posts go here -->
</div>

Next define the CSS:

/**
 * Body CSS
 */
html,
body {
  height: 100%;
}

html,
body,
input,
textarea,
button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}


/**
 * Sidebar CSS
 */
#sidebar {
  background-color: #E57373;
  padding: 15px;
}

@media (min-width: 768px) {
  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 180px;
    height: 100%;
    padding-top: 30px;
  }
}

/**
 * Content CSS
 */
@media (min-width: 768px) {
  #content {
    margin-left: 180px;
  }
}

Note that we used media queries to move the sidebar to the top for screens smaller than 768px. We also used MUI CSS helpers to style the "SAMPLE BLOG" label in the sidebar.

Step 3: Content Layout

Next, define the content layout in <div id="content"></div>:

<div class="mui-row">
  <div class="mui-col-sm-10 mui-col-sm-offset-1">
    <br>
    <br>
    <div class="mui--text-dark-secondary mui--text-body2">PINNED POST</div>
    <div class="mui-divider"></div>
    <br>
    <!-- blog goes here -->
    <br>
    <br>
    <div class="mui--text-dark-secondary mui--text-body2">RECENT POSTS</div>
    <div class="mui-divider"></div>
    <br>
    <!-- blog goes here -->
    <br>
    <!-- blog goes here -->
  </div>
</div>

Note that we used MUI's grid system to center the content with padding on either side.

Step 4: Add Blog HTML

Next, add the blog html:

<div class="mui--text-headline">MUI Acquires New Features</div>
<div class="mui--text-dark-secondary">By <a href="#">Team MUI</a> 3 days ago</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis
  aliquam ipsum sed dignissim. Sed ac accumsan odio. Vivamus tristique
  dignissim neque. Interdum et malesuada fames ac ante ipsum primis in
  faucibus. Nunc cursus felis nec purus condimentum vestibulum. Donec mauris
  nisi, sollicitudin eget iaculis id, suscipit id odio.
  <a href="#">Read more...</a>
</div>
« Previous Next »