Brian Dys

Tag: HTML

  • 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…

  • Press Time: Using CSS Transform to Nudge a Button

    —

    by

    Brian Dys
    in

    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…

  • The Separation of HTML and CSS

    —

    by

    Brian Dys
    in

    In its basic sense, HTML is standalone. It is independent from CSS especially from the perspective of screenreaders and search engine crawlers. This goes to show about the importance of semantics and content structure in the HTML markup. In this regard, I strongly advocate for the manipulation of the style sheet instead of the manipulation…

  • I Agree to the Terms of Agreement

    —

    by

    Brian Dys
    in ,

    A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read. My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox…

  • Recreating Spotify’s Album Cover

    —

    by

    Brian Dys
    in

    Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis. Circular images everywhere No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius enabled designers to carve the sharp edges into rounded corners. And take…

  • 100% parent, definite-width child

    —

    by

    Brian Dys
    in

    You want to have a 100% expanding parent while still having control over the child to have a definite width? What’s the use for this? A 100% background not interfering with the child that has width. [code title=”HTML” lang=”html”] <div class="container"> <div class="content"> Content </div> </div> [/code] [code title=”CSS” lang=”css”] .container { background-color:red; } .content…

  • CSS border box, here we come

    —

    by

    Brian Dys
    in

    Hey, remember that time when you switched from the table layout to div layout? This is the time to be “out with the old and in with the new”. We’ll be leaving behind the contraption that alleviate the pains of the CSS box model. Just to refer to that contraption, familiar with this? [code] <div…