Brian Dys

Author: Brian Dys

  • UI Type and State Class Naming Convention

    There are numerous types of user interfaces that we use in our designs – there are pages, screens, popovers, dialog boxes, alert boxes, sliders, tooltips, overlays, and the list goes on.

    It is important for front-end designers to establish a system for naming such containers and reusing them all over our web projects via the class attribute of an HTML element (e.g., <div class="class-name">...</div>).

    Say, for example, you want to define a container to appear as a dialog box. There are two important things to consider: first is the type of UI and the second is the state of that UI. The solution to this task is to hook up the class name of an HTML element with CSS. Then in CSS, the visual design for a particular UI type is already defined, as well as its different states (active or inactive).

    The Naming Convention

    Instead of mindlessly coming up with names, we must establish a naming convention (very similar to BEM) to help and guide us with repeatedly naming class names depending on the need.

    In general, we would start from generic to specific in this syntax:

    [code]<generic>__<identifier>–<specific>[/code]

    The generic name says something about the whole naming convention – whether it’s a type of UI or a state of an element. The identifier is the element that narrows down towards the specific (in some cases if it answers to the generic name, it is the specific name). The specific name answers to the generic name similar to attribute="value" syntax (i.e., generic="specific").

    Consider wanting to classify an element under a dialog box type of UI:

    [html]
    <div class="ui-type–dialog-box">
    …
    </div>
    [/html]

    Or defining a state of the dialog box:

    [html]
    <div class="ui-type–dialog-box ui-state__dialog-box–active">
    …
    </div>
    [/html]

    In our example, the generic names are ui-type and ui-state and the specific names are dialog-box and active, respectively. In the case of the generic name ui-type, dialog-box acts as the specific. And lastly, the separator between a generic name and an identifier is a double-underscore __ and the separator between a generic name or an identifier and a specific name is a double-dash --. The separators make the relationship between the names easier to understand and the syntax, easier to read for different front-end designers sharing front-end documents.

    Further Reading

    Metadata Syntax on Wikipedia

  • First Post

    Hey there, welcome to Design DriveThru Blog.

    This serves as our idea scratch paper – like the tissue you get a hold of in a restaurant during a light bulb moment.

    The main purpose of this is to document work in progress about Front-end Design stuff. The secondary purpose is to share the thoughts with the design and development community.

    I hope this gets productive and helpful.

    ~ Dys

  • Notes on SASS File Structure

    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 I prefer to prioritize the object than the scope or context it is in.

    Object or Component

    To solve this difficulty, I plan to rearrange my SASS file structure and categorize rule-set files into just two folders:

    • objects – contains rule-sets of elements
    • components – contains rule-sets of two or more elements in combination

    The new structure would be:

    css
|-- sass
    |-- default
        |-- structure
            |-- objects
            |-- components

  • Stiffany

    They call her that. Stiffany. Like a cross between Stephanie and Tiffany. Her teeth protrude out of her lips and almost she could have been born to peck her food.

    But she is human. A being with some hopes and some dreams. Unlike other species – human or in- – they only exist, they thrive, survive day in and out.

    Not her the least. She acts on these hopes and dreams. In a cramped lady bedspacer she sleeps together with her best friend.

    She wakes up at night to make her body everybody’s business. She acts on her hopes and dreams.

    Nobody knows for sure if she is loved by her family and if she loved them back. Only that truth was running through her head that fateful early morning when she hazily got up from sleep to quench her thirst.

    By the kitchen table she grabbed what was there. It was done and she was done by a silver cleaner the clarity and taste of water. Was it because it was in a bottled water container?

  • Reeking, Leaking

    Reeking, Leaking

    I see boisterousness while tomorrow remains uncertain.

    It is our prerogative to calm down, to be happy, to live in the moment. But the same thing could be said about the opposite.

    What weighs in more is if we choose to be.

    We all want independence. But what we really need is freedom.

    “Leaked” is already a humdrum-ming buzzword – a scheme already exposed. Just like one knows a linkbait when one sees one.

    Here’s something for the morning:

    What a beautiful face
    I have found in this place
    That is circling all round the sun
    What a beautiful dream
    That could flash on the screen
    In a blink of an eye and be gone from me
    Soft and sweet
    Let me hold it close and keep it here with me

    ~ In The Aeroplane Over The Sea by Neutral Milk Hotel

  • Phone and Mouse

    The Phone

    The year was 1998. The place, Taft Ave., Manila. Clad in plaid shirt and my khaki slacks were accentuated by a brick in the left side pocket. It was a Nokia pre-5110 model (similar to the one pictured below). I took it out of my pocket, extruded the antenna to gather some signal and called my mom.

    Nokia 1620 and 100 Peso Bill
    Nokia and a regular bill – not to scale. But believe me, cellular phones were big in all dimensions.

    “I just finished the exam,” I said with a sigh of relief.

    “DLSU Engineering, here I come.” I smugly slid back the cellular phone into my pocket.

    The Mouse

    Gyromite
    The Gyromite device was cool.

    No doubt that kids are attracted to pretty graphics. That’s why my grade 3 classmate who owned a personal computer was more popular by owning a Gyromite device with his Nintendo.

    The PC screen was black and white and sported a keyboard and a dot-matrix printer. We used it to type and print some school papers. Then we’d trade NES game cartridges and play ping-pong on their dinner table.

    [soundcloud url=”https://api.soundcloud.com/tracks/167961809″ params=”auto_play=false&hide_related=false&show_artwork=true” width=”100%” height=”164″ iframe=”true” /]

    The mouse in the house came a little later in ’95. It had a ball that gathered dirt. And yeah, the PC screen was colored already and said Windows 95.

    Windows 95
    Older than you folks out there.
    Mouse Ball
    The “balled” mouse dies eventually.

    We might feel that technology is leaving us behind especially if we try to keep up with it. But just like the phone and mouse, they simply evolve into more functional tools – the mouse lost its tail – the phone dropped its antenna and dissolved physical buttons – but they are still the phone and mouse we use to communicate with someone and control something, respectively (or soon interchangeably).

    Maybe one day they will be totally transformed into something that we won’t recognize anymore (as compared with the pictures) — that’s how evolution goes as far as survival is concerned – you adapt and evolve or you simply perish and be forgotten.

  • Fire and Spark

    Fire & Spark

    Someone will notice your fire whether it is too bright or too dim only if you start a fire.
    ~ BS

    Sometimes you only have limited shots at something. You might have burned out and struck out twice. Make the next one count. It might be big, it might be a spark. But hey, that’s a start.

  • Spark

    2014-09-15 - Spark

    Someone will notice your fire whether it is too bright or too dim only after you start a fire.

    Brian Dys Sahagun

  • Still Smooth Around the Edges with Angular.js

    I just hit a deadspot with Angular.js tutorial at Code School.

    I wished that aside from the “Use a Hint” action, there’s also an available “Show the Answer” (for frustrated learners like me).

    Shaping up with Angular.js

    Time to skip this part!

  • Press Time: Using CSS Transform to Nudge a Button

    Two of the ways in which you can show an illusion of a button being pressed are: darkening the background-color and nudging its vertical position.

    See the Pen Press Time by Brian Dys Sahagun (@briandys) on CodePen.

    It is important to provide for a hint when a user activates an element in your user interface (in this example, a button). The feedback assures the user that the element “responds” to his action.

    The advantage of using transform: translateY is that it does not affect the elements around it (unlike using margin or padding).