Brian Dys

Category: Frontend Design

  • UI Condition

    —

    by

    Brian Dys
    in ,

    Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object. Example To denote that an article entry does not have content, we add the class ui-cond__entry–blank which translates to “the UI condition of entry is blank”. <div class=”ui-cond__entry–blank”> … </div>

  • Generic Class Names

    —

    by

    Brian Dys
    in

    The main idea behind generic class names is to have a standard naming convention for common HTML patterns and attaching it to specific class names. For example, here’s a simple HTML markup of Skip Link component: Notice that there are two generic class names attached to specific class names: comp – short for component axn…

  • Notes in Front-end Design

    —

    by

    Brian Dys
    in

    Post in context: I am “refactoring” the existing HopScotch Free WordPress Theme . This is due to several improvements in standardization and content structure. The example that I will be using is the most common element of web sites – the web site name and description. One encounters this in the form of web site logos…

  • Categorizing Topics of Web Concepts

    —

    by

    Brian Dys
    in

    There are several blog entries in Design DriveThru about the practical application of HTML and CSS, simple ideas as well. In order to put these entries in a clearer light, there needs to be specific categories where they fall under. This will put things in context so that the reader would know to which extent…

  • Using to Define UI States and Types

    —

    by

    Brian Dys
    in

    Previously, I’ve discussed a class naming convention in the form of: In this manner we are using a UI State class located up in the DOM tree – particularly in the body to manipulate different UI elements under it. Take this as an example: in a site’s header, both the main navigation and search form…

  • Designer Who Codes, You’re Special

    —

    by

    Brian Dys
    in

    During the heyday of IE6, frontend design was in murky waters. The frontend designer would need to employ lots of hacks, patches, and workarounds just to achieve the look and feel of a grand mock-up. Remember: when we used table for layout? when we used a 1×1 transparent pixel as spacer image? when we exported…

  • Layers of Frontend Design

    —

    by

    Brian Dys
    in

    Information (HTML) Information Architecture Semantics Content Structure Interaction Presentation (CSS) Visual Design Interactivity (JS) Interactivity Animation References The Elements of User Experience

  • Elements of Style(sheets)

    —

    by

    Brian Dys
    in

    There’s an update to this entry: Elements of CSS V2 — Nature Inherent characteristics of an element (display) Layout Positioning (float, position) Dimension (padding, width, height) Spacing (margin) Theme Colors (color, background-color) Typography (font-size, font-family)

  • CSS Principles #1

    —

    by

    Brian Dys
    in

    Mobile First Responsive Web Design Device-Agnostic Separation of style elements (nature, layout, theme)

  • Notes on SASS File Structure

    —

    by

    Brian Dys
    in

    Currently, my CSS folder structure is arranged in such a way (based on Group Buddies): css |– sass |– default |– structure |– atoms |– molecules |– organisms Originally, there’s an additional templates folder alongside structure. The common difficulty I encountered was categorizing a rule-set between molecules and organisms. I didn’t bother including templates since…