css javascript framework - Windows 8 metro web framework with no dependencies. Build in pure javascript ad plain css.
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
core
examples
README.md
readme.jpg

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