Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Binding Metro UI Tiles with Knockout.js

, 10 Jan 2013 CPOL
Knockout is a JavaScript library which dynamically binds data between different html contents and follow Model-View-View-Model (MVVM) design pattern.  It’s one of the core feature is Observable, which can detect changes in the view model....
/* DEFAULTS
----------------------------------------------------------*/

body {
    background: #fff;
    font-size: .80em;
    font-family: 'Open Sans', Helvetica Neue, Lucida Grande, Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #fff;
}

a:link, a:visited {
    color: #034af3;
}

a:hover {
    text-decoration: none;
}

a:active {
    outline: 3px solid;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
}

.header {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #0072BC;
    width: 100%;
}

    .header h1 {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: #f9f9f9;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

.main {
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink {
    background-color: #3a4f63;
    width: 100%;
}


/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label {
        display: block;
    }

    fieldset label.inline {
        display: inline;
    }


/* MISC  
----------------------------------------------------------*/

.clear {
    clear: both;
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

    .title p {
        font-size: 25px;
        color: white;
        font-size: 33px;
        margin-left: 12px;
        margin-top: 5px;
    }



.tile-elem {
    width: 200px;
    height: 200px;
}

    .tile-elem:hover {
        outline: 2px solid grey;
    }

.tile-description {
    color: White;
    font-size: 16px;
    margin-left: 10px;
    bottom: 0px;
    width: 180px;
    height: auto;
}

.tile-title {
    color: White;
    font-size: 25px;
    margin-right: 10px;
    top: -40px;
    position: relative;
    float: right;
}

.bottom-bar {
    width: auto;
    height: 20px;
    background-color: #bfcbd6;
}

    .bottom-bar span {
        cursor: pointer;
    }

.edit-panel {
    background-color: #BFCBD6;
    float: left;
    height: 116px;
    margin-top: 0px;
    position: absolute;
    width: 200px;
    z-index: 2;
    border-bottom: 1px solid white;
}

    .edit-panel label {
        color: #000;
        margin-left: 6px;
    }

    .edit-panel input {
        width: 151px;
    }

    .edit-panel textarea {
        height: 61px;
        margin-left: 6px;
        margin-top: 3px;
        width: 181px;
    }

.btn-add-tile {
    background-color: #49AFCD;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 20px;
    height: 34px;
    text-align: center;
    width: 101px;
}

    .btn-add-tile:hover {
        outline: 2px solid #5a5a5a;
    }

    .btn-add-tile:active {
        outline: none;
    }

.tile-area {
    width: 200px;
    float: left;
    margin-top: -9px;
    margin-left: 25px;
}

.tile-container {
    margin-top: 26px;
}

.close-btn {
    margin-left: 180px;
    position: absolute;
    margin-top: 1px;
}

.arrow {
    margin-left: 161px;
    position: absolute;
    margin-top: 2px;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sk. Tajbir
Software Developer (Senior) Desme
Bangladesh Bangladesh
I've started working on C#.Net WinForm in 2011 and developed a desktop application named NoseOp for Microsoft Imagine Cup 2011 and my team scored one of the top 6 teams of Bangladesh. NoseOp is an application for physically disable person to operate computer easily and do everyday work. Later on I scored 1st in software exhibition of American International University - Bangladesh's(AIUB) Software Engineering day.
 
After that I've started working on Asp.Net and developed several websites which are running successfully in different countries. I'm very much interested and passionate about learning new technologies.
 
www.sktajbir.com
 
My Projects:
 
CodeProject Achievement:
  • 2nd in Best Web Dev article of December 2012
  • 7th in Best overall article of April 2013
  • 3rd in Best Web Dev article of April 2013
Follow on   Twitter   LinkedIn

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 10 Jan 2013
Article Copyright 2012 by Sk. Tajbir
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid