CSS Plugins Freebies Plugins 

Metro UI Article Layout CSS

SONHLAB , , , , , , ,

Metro UI Article Layout CSS is a layout that is designed for article pages and blogs with Metro UI. This layout supports responsive view to work on almost devices.

[ga_res]

 

[tile_bt btstyle=”tile-bt-2 solid-orange-2 hovershadow-orange left-2 margin-10″ icon=”demo-white-circle-48″ title=”Demo”]http://demo.siterepo.com/metroarticlelayout/demo.php[/tile_bt][tile_bt icon=”download-white-circle-48″ title=”Download”]http://goo.gl/c3vul[/tile_bt][clearspace][/clearspace]

 

[free_license]

 

Metro UI Article Layout Features:

  • Responsive design.
  • Works on almost devices.
  • Supports Article List or Grid.
  • One or Two Columns layout.
  • Simple Responsive Metro UI Menu.
  • Simple Tooltip.
  • Unlimited Color Schemes.
  • HTML5 and CSS3 ready.
  • Easy Customization.

 

Browsers Support:

  • Internet Explorer 8+.
  • FireFox.
  • Google Chrome.
  • Safari 4+.
  • Opera 10+.

 

Change Logs:

02 Apr 2013: Frist Version.

 

Credits:

 

Table of Contents:

  1. Setup Metro UI Article Layout.
  2. HTML Structures.
  3. Customization.
  4. SimpleNav and SimpleTip.

 

[ga_res]

 

Section 1: Setup Metro UI Article Layout.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

 

Include Google Free Fonts:

<link href='http://fonts.googleapis.com/css?family=Dosis|Open+Sans' rel='stylesheet' type='text/css' />

For Internet Explorer 8 ( and older ) works we need to add this code:

<!--[if lt IE 9]>
<script type="text/javascript">
var is_ie_lt9 = true;
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->

 

Include CSS for Article List Page – One Column Verstion:

<link rel="stylesheet" href="css/ma-base.css" type="text/css" />
<link rel="stylesheet" href="css/ma-global.css" type="text/css" />
<link rel="stylesheet" href="css/ma-listview.css" type="text/css" />
<link rel="stylesheet" href="css/ma-responsive.css" type="text/css" />

Include CSS for Article List Page – Two Columns Version:

<link rel="stylesheet" href="css/ma-base.css" type="text/css" />
<link rel="stylesheet" href="css/ma-global-2c.css" type="text/css" />
<link rel="stylesheet" href="css/ma-listview-2c.css" type="text/css" />
<link rel="stylesheet" href="css/ma-responsive-2c.css" type="text/css" />

Include CSS for Article List Page – Grid Version:

<link rel="stylesheet" href="css/ma-base.css" type="text/css" />
<link rel="stylesheet" href="css/ma-global.css" type="text/css" />
<link rel="stylesheet" href="css/ma-gridview.css" type="text/css" />
<link rel="stylesheet" href="css/ma-grid-responsive.css" type="text/css" />

Include CSS for Article Single Page – One Column Version:

<link rel="stylesheet" href="css/ma-base.css" type="text/css" />
<link rel="stylesheet" href="css/ma-global.css" type="text/css" />
<link rel="stylesheet" href="css/ma-singlepage.css" type="text/css" />
<link rel="stylesheet" href="css/ma-responsive.css" type="text/css" />

Include CSS for Article Single Page – Two Columns Version:

<link rel="stylesheet" href="css/ma-base.css" type="text/css" />
<link rel="stylesheet" href="css/ma-global-2c.css" type="text/css" />
<link rel="stylesheet" href="css/ma-singlepage-2c.css" type="text/css" />
<link rel="stylesheet" href="css/ma-responsive-2c.css" type="text/css" />

 

In this layout we include Javascript/jQuery for Responsive Menu and Tooltip (in Grid version). These two features base on jQuery library so we need to include jQuery library first:

<!-- jQuery Library ver 1.8.3 -->
<script type="text/javascript" src="js/jquery/jquery.min.183.js"></script>

Then to use Responsive Menu ( SimpleNav ), include:

<!-- Masonry Plugin -->
<script type="text/javascript" src="js/masonry/masonry.min.js"></script>
<!-- Metro Article Navigation Bar -->
<script type="text/javascript" src="js/ma-nav.dev.js"></script>

In Grid version we need one js file for Tooltip ( SimpleTip ):

<!-- Metro Article SimpleTip -->
<script type="text/javascript" src="js/ma-simpletip.dev.js"></script>

 

Section 2: Metro UI Article Layout HTML Structures.

In the package we have three version for Article List (One Column, Two Columns and Grid) and Two version for Single Page (One Column and Two Columns). All files in the package have the same structure:

<body>

  <!-- START NAVIGATION BAR -->
  <nav>
  // Navigation Bar Code
  </nav>
  <!-- END NAVIGATION BAR -->

  <!-- START HEADER -->
  <div id="header">
  // Header Code
  </div>
  <!-- END HEADER -->

  <!--START ARTICLE CONTAINER -->
  <div id="ma-maincontainer">
  // Article Code
  </div>
  <!-- END ARTICLE CONTAINER -->

  <!-- START RIGHT SIDEBAR ( Two Version only ) -->
  <div class="ma-right-sidebar-zone">
  // Sidebar Code
  </div>
  <!-- END RIGHT SIDEBAR -->

  <!-- START FOOTER -->
  <div id="footer">
  // Footer Code
  </div>
  <!-- END FOOTER -->

</body>

 

Section 3: Metro UI Article Layout Customization.

If you would like to edit the color, font, size or style of any elements, go to “css” folder and open files that you included in the HTML file then search the name of classes or IDs that you want to edit.

 

Section 4: SimpleNav and SimpleTip.

In all pages of this layout we have a responsive navigation bar – SimpleNav. The SimpleNav structure:

<nav>
  <ul class="ma-navbar">

    <li class="ma-nav-mainitem"><img src="images/icons/menu.png" alt="menu" />

      <!-- Start Sub Menu -->
      <ul class="ma-sub-nav">

        <li class="ma-nav-item">
        // Item Code
        </li>

      </ul>
      <!-- End Sub Menu -->

    </li>

  </ul>
</nav>

In the above code, when “ma-nav-mainitem” class is clicked the “ma-sub-nav” class will be showed (if the current status of subnav is hiding) or hidden (if the current status of sub nav is displaying).

 

In the Grid version we have a simple javascript code to show description of items- SimpleTip. To use SimpleTip you must follow the structure of items:

<!-- Start Grid Item -->
<div class="metro-article-grid">

  <!-- Start Preview Block -->
  <div class"ma-grid-preview-block">

    <!-- Start Preview Image -->
    <div class="ma-grid-previewimg">
      <p>
        <img src="image-path" class="ma-preview-image" />
      </p>
    </div>
    <!-- End Preview Image -->

    <!-- Start Description -->
    <div class="ma-description">

      <!-- Start Description Header -->
      <div class="ma-description-header">
        <p class="ma-description-close">
          <img src="images/icons/close-white-48.png" alt="close button" />
        </p>
      </div>
      <!-- End Description Header -->

      <!-- Start Description Content -->
      <div class="ma-description-content">
        <p>
          // Some Content
        </p>
      </div>
      <!-- End Description Content -->

    </div>
    <!-- End Description -->

  </div>
  <!-- End Preview Block -->

  <!-- Start Title Block -->
  <div class="ma-grid-title">

    <p>
      <a href="javascript:void(0);" class="show-description">
        // Some Title
      </a>
    </p>

    <!-- Start ReadMore button -->
    <div class="ma-readmore">
      <a href="">
        <img src="images/icons/right.png" alt="read-more" />
      </a>
    </div>
    <!-- End ReadMore button -->

  </div>
  <!-- End Title Block -->

</div>
<!-- End Grid Item -->

In the above code, when a “show-description” class is clicked the “ma-description” class will be showed (if the preview image is showing) or hidden (If the description is showing). Additionally, you can hide the description by clicking the close button also.

 

[ga_link_200]