Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

dlMetro: dress a Website with Windows 8 Metro ui

Getting started

  • Download at least dlMetro.js and dlMetro.css from the repository

  • Start from an empty html file like this

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
    <body>
    </body>
</html>
  • Add dlMetro in head (both javascript and css)
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../core/css/dlMetro.css">
    <script src="../core/js/dlMetro.js"></script>
</head>
  • Create into the body the minimal configuration
<body>
    <div class="main"> 
        <div class="flow">
            <div class="content all-size">
            </div>            
        </div>
        <div class="debug all-size" onclick="this.style.display='none';">
            <div class="fallback-size">fallback version <br> with<noscript>out</noscript> javascript</div>
            <div class="min-size">min version <br> with<noscript>out</noscript> javascript</div>
            <div class="mid-size">mid version <br> with<noscript>out</noscript> javascript</div>
            <div class="large-size">large version <br> with<noscript>out</noscript> javascript</div>
            <div class="xlarge-size">xlarge version <br> with<noscript>out</noscript> javascript</div>
            <div class="xxlarge-size">xxlarge version <br> with<noscript>out</noscript> javascript</div>
            <script>document.write("click to hide");</script>
        </div>
    </div>
</body>

and test resizing your browser

  • Add Header, footer and some cells
<div class="main">
        <div class="fixed-header fallback-size xlarge-size xxlarge-size">
            This is a fixed header
        </div>
        <div class="flow">
            <div class="flow-header min-size mid-size large-size">
                This header flows with content
            </div>
            <div class="content all-size">
                <div class="c6-all-size c3-xlarge-size c2-xxlarge-size"><div class="cell"><br><br><br><br><br><br><br><br><br></div></div>
                <div class="c6-all-size c3-xlarge-size c2-xxlarge-size"><div class="cell"><br><br><br><br><br><br><br><br><br></div></div>
                <div class="c6-all-size c3-xlarge-size c2-xxlarge-size"><div class="cell"><br><br><br><br><br><br><br><br><br></div></div>
                <div class="c6-all-size c3-xlarge-size c2-xxlarge-size"><div class="cell"><br><br><br><br><br><br><br><br><br></div></div>
                <div class="c6-all-size c3-xlarge-size c2-xxlarge-size"><div class="cell"><br><br><br><br><br><br><br><br><br></div></div>
                <div class="c6-all-size c3-xlarge-size c2-xxlarge-size"><div class="cell"><br><br><br><br><br><br><br><br><br></div></div>
            </div>
            <div class="flow-footer min-size mid-size large-size">
                This footer flows with content
            </div>
        </div>
        <div class="fixed-footer fallback-size xlarge-size xxlarge-size">
            This is a fixed footer
        </div>
        ...
    </div>
  • Create a new CSS file (00custom.css in this example) to set the height of headers and footers
/*.debug{display:none;} *//* decomment in production environment */

/* fallback */
.fixed-header   {height: 100px;}
.flow                  {top: 100px;bottom:50px}
.flow-header     {height:0px;}
.flow-footer     {height:0px;}
.fixed-footer   {height: 50px;}

/* min */
@media only screen and (max-width: 320px) {
    .fixed-header   {height: 0px;}
    .flow                 {top: 0px;bottom:0px}
    .flow-header     {height:50px;}
    .flow-footer     {height:55px;}
    .fixed-footer   {height: 0px;}
}

/* mid */
@media only screen and (min-width: 320px) and (max-width: 640px) {
    .fixed-header   {height: 0px;}
    .flow                 {top: 0px;bottom:0px}
    .flow-header     {height:60px;}
    .flow-footer     {height:55px;}
    .fixed-footer   {height: 0px;}
}

/* large */
@media only screen and (min-width: 640px) and (max-width: 960px) {
    .fixed-header   {height: 0px;}
    .flow                   {top: 0px;bottom:0px}
    .flow-header     {height:70px;}
    .flow-footer     {height:55px;}
    .fixed-footer   {height: 0px;}
}

/* xlarge */
@media only screen and (min-width: 960px) and (max-width: 1280px) {
    .fixed-header   {height: 100px;}
    .flow                   {top: 100px;bottom:50px}
    .flow-header     {height:0px;}
    .flow-footer     {height:0px;}
    .fixed-footer   {height: 50px;}
}

/* xxlarge */
@media only screen and (min-width: 1280px){
    .fixed-header   {height: 100px;}
    .flow                  {top: 100px;bottom:50px}
    .flow-header     {height:0px;}
    .flow-footer     {height:0px;}
    .fixed-footer   {height: 50px;}
}
  • Do not forget to include css in html file
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="../core/css/dlMetro.css">
        <link rel="stylesheet" type="text/css" href="./css/00custom.css">
        <script src="../core/js/dlMetro.js"></script>
    </head>

Optional: add colors to html file to see what you are doing

    ...
    <script src="./js/addSomeFun.js"></script>        
    </body>
</html>
  • Now you should see something like this readme example

  • Done! Test visualization: it changes resizing browser window.

  • See more examples take a tour of \examples\ to see more. The file 00_readme.html is this example

My playgound

See dlMetro in action here

About

css javascript framework - Windows 8 metro web framework with no dependencies. Build in pure javascript ad plain css.

Resources

You can’t perform that action at this time.