Oct 16, 2014 0 Comments

Fall Cleaning & Code Reorganization

FallCode
Here at nibl, we are busy making some important changes to the architecture of our site. Originally we built nibl on aspx and ascx frameworks, but now we have been busy converting everything to MVC and AngularJS. We are also reevaluating what features are useful in nibl and what features to redefine. This reorganization has given me the opportunity to look at the basic structure of nibl’s pages and allowed me to improve upon old code. Hopefully this code rework will get every bracket and semi-colon in order, leaving us with a pure and clean code base on which to grow and expand nibl.

What was I thinking?

As the front-end designer and developer for nibl, I get to write most of the pure html and structure that all our model data hooks into. Of course my styles and tastes change from version to version, but this rewrite is really focused on the markup. And looking back at pages I wrote a year or more ago, I cannot believe how horrible some of my code looks. Check out this checkbox styled to look like a toggle switch:

Old Code

<div class="settingsToggle">
    <div class="switchDescription">Publish Crumb</div>
    <div class="switch">                                                  
        <label class="switch-label">                    
            <input type="checkbox" class="switch-checkbox api-publish" checked="checked" ng-model="upload.Published" />
            <div class="switch-inner Semibold"></div>
            <div class="switch-button"><span class="divit"></span></div>
        </label>
    </div>
</div>

New Code

<div class="Switch">
    <input id="check2-1" type="checkbox" ng-model="upload.Published" checked/>
    <label for="check2-1">Publish Crumb</label>
</div>

That’s just my favorite, most sweeping change to some of the components of nibl. There are many more like this, where I had used a ton of extra markup and classes to achieve a visual look. But as you can see, the new switch version is more functional, allowing the user to interact with the label instead of using a separate div for the switch description.

Magic in the CSS selectors

Many of the code rewrites I have been working on removing superfluous class names on elements that are already unique by type. Before I would have a class name on every child element of some element and write a style for that specific class. Now I will just style the element by type and use better markup to make sure I can still control the content easily. Let me show you this code from the home page:

Old Code

<div class="moduleSeven">
    <div class="SevenTitle Regular">How nibl works.</div>
    <ul class="moduleSevenbox boxsize">
        <li class="Sevenbox boxsize round">
            <span class="Sevenimg"><img src="<%= Page.ResolveUrl("~/images/content/create-account.png") %>" alt="Create a nibl account."></span>
            <span class="smalltitle Semibold">Create an Account</span>
            Start the process off by creating a nibl account and setting up your user profile and store details.
        </li>
        <li class="Sevenbox boxsize round">
            <span class="Sevenimg"><img src="<%= Page.ResolveUrl("~/images/content/upload-content.png") %>" alt="Upload content to nibl."></span>
            <span class="smalltitle Semibold">Upload Content to the Marketplace</span>
            Upload your content to nibl and set up your custom marketplace page with a price tag, engaging images, a useful description, and social media sharing options.
        </li>
            <li class="Sevenbox boxsize round">
            <span class="Sevenimg"><img src="<%= Page.ResolveUrl("~/images/content/sell-content.png") %>" alt="Price and sell your content."></span>
            <span class="smalltitle Semibold">Price, Market & Sell</span>
            Set pricing models that cater to your specific audience. Use <a href="<%= UploadManager.BaseUrl %>">our marketplace</a>, email, and your social networks to let them know what you're selling. Keep track of which items make the most profit with on-site analytics.
        </li>                             
    </ul>
    <div class="ActionCallWrap boxsize">
        <div class="ActionCall button Semibold">
            <a runat="server" href="~/Uploads?redirect=~/CreateAccount">Upload your Content</a>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

New Code

<div class="Component Three">
    <h2>How nibl works.</h2>
    <ul>
        <li>
            <img src="/images/content/create-account.png" alt="Create a nibl account.">
            <h3>Create an Account</h3>
            <p>Start the process off by creating a nibl account and setting up your user profile and store details. With an account you can buy anything in the marketplace.</p>
        </li>
        <li>
            <img src="/images/content/upload-content.png" alt="Upload content to nibl.">
            <h3>Upload Content to the Marketplace</h3>
            <p>Upload your content to nibl and set up your custom marketplace page with a price tag, engaging images, a useful description, and social media sharing options.</p>
        </li>
        <li>
            <img src="/images/content/sell-content.png" alt="Price and sell your content.">
            <h3>Price, Market & Sell</h3>
            <p>Set pricing models that cater to your specific audience. Use <a href="@UploadManager.BaseUrl">our marketplace</a>, email, and your social networks to let them know what you're selling. Keep track of which items make the most profit with on-site analytics.</p>
        </li>
    </ul>
    <a class="PrimaryButton ActionCall" href="/Uploads?redirect=/CreateAccount">Upload your Content</a>
</div>

No more extra classes, since most of the new styles can be obtained with just that class="Component Three" bit.

File reduction

Rewriting all this code has made my css much cleaner and easier to understand. Another benefit is I got to remove about 2/3 of all the bulk. The way-too-specific classes, the !important overwrites, and all the redundant styles for different class names. This cleanup goes a long way in improving the design of nibl as well as the consistency of styles found throughout the site. It makes my life easier, and it will make the user more at home when new features are added that have familiar styles and design patterns.

Comments