100DaysOfCode Day 2 – The Building Blocks

I’m still a little bit ahead of schedule but I’m back on track today. Today’s update was focused on building out my knockoutjs component shells and a little bit of CSS styling.

Knockoutjs Components

All these files currently have similar code in them.

dashboard-albums.js

define(['ko'], function (ko) {
    var koModel = function (params) {
        var self = this;
        self.title = "Dashboard Albums";

    };
    return koModel;
});

dashboard-albums.html

<div>
    <h2 data-bind="text:title"></h2>
</div>

app.js

require(['ko'], function (ko) {
    ko.components.register('dashboard', {
        viewModel: { require: "dashboard/scripts/dashboard" },
        template: { require: "text!dashboard/templates/dashboard.html" }
    });
    ko.components.register('dashboard-albums', {
        viewModel: { require: "dashboard/scripts/dashboard-albums" },
        template: { require: "text!dashboard/templates/dashboard-albums.html" }
    });
    ko.components.register('dashboard-photos', {
        viewModel: { require: "dashboard/scripts/dashboard-photos" },
        template: { require: "text!dashboard/templates/dashboard-photos.html" }
    });
    ko.components.register('dashboard-posts', {
        viewModel: { require: "dashboard/scripts/dashboard-posts" },
        template: { require: "text!dashboard/templates/dashboard-posts.html" }
    });
    ko.components.register('dashboard-sidebar', {
        viewModel: { require: "dashboard/scripts/dashboard-sidebar" },
        template: { require: "text!dashboard/templates/dashboard-sidebar.html" }
    });
    ko.components.register('dashboard-to-do', {
        viewModel: { require: "dashboard/scripts/dashboard-to-do" },
        template: { require: "text!dashboard/templates/dashboard-to-do.html" }
    });
    ko.components.register('dashboard-to-dos', {
        viewModel: { require: "dashboard/scripts/dashboard-to-dos" },
        template: { require: "text!dashboard/templates/dashboard-to-dos.html" }
    });
    ko.applyBindings();
});

It’s not much yet, but I have big plans.

LESS, or is it CSS?

I’ve also added a little bit of layout styling using a grid system. I prefer not to nest more than 2 or 3 levels deep, but this seems to work pretty well. I may refactor it at some point though. The main take-away here though is that a typical layout with a sidebar and content panel is achieved by giving a block element the following class string:

ngts-panel ngts-sidebar ngts-content

I can also split panels vertically as much as I want by adding a block element with these classes:

ngts-panel ngts-content ngts-content-split

I plan to add ngts-content-divide as an option for splitting horizontally.

layouts.less

.ngts-panel {
    &.ngts-sidebar {
        &.ngts-content {
            display: grid;
            grid-template-columns: minmax(200px, 300px) 1fr;
            grid-template-rows: 100vh;

            &.ngts-content-split {
                grid-template-columns: minmax(200px, 300px) 1fr 1fr;
            }
        }
    }

    &.ngts-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100vh;

        &.ngts-content-split {
            grid-template-columns: 1fr 1fr;
        }
    }
}

@media screen and (max-width : @var-bp-small) {
    .ngts-panel {
        &.ngts-sidebar {
            &.ngts-content {
                display: grid;
                grid-template-columns: 100vw;
                grid-template-rows: 60px 1fr;

                &.ngts-content-split {
                    grid-template-columns: 100vw;
                    grid-template-rows: 60px 1fr 1fr;
                }
            }
        }

        &.ngts-content {
            display: grid;
            grid-template-columns: 100vw;
            grid-template-rows: 1fr;

            &.ngts-content-split {
                grid-template-columns: 100vw;
                grid-template-rows: 1fr 1fr;
            }
        }
    }
}