Brian Dys

Tag: CSS

  • Revisiting CSS Levels

    —

    by

    Brian Dys
    in

    I am currently making a curriculum for the basics of HTML and CSS. Revisiting CSS Levels, I have written in the past about it: Building CSS in Levels Elements of CSS V2 CSS Principles #1 The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility…

  • Putting “Skip to Content” Into Context

    —

    by

    Brian Dys
    in

    Does the HTML markup of your website has an accessibility function in the form of “Skip to Content”? If yes, then you would notice that it is located at the topmost of the markup. This is as such in order to make it the first focus when using keyboard to navigate. Now you may ask,…

  • 3 Layers of an Active Element

    —

    by

    Brian Dys
    in

    Imagine this ombre cake: It looks yummy and it has layers. It is similar with active elements – they must have three levels for the purpose of CSS. The first level is the textual element itself. The second level holds the function of the active element (e.g., <a> or <button>). The third level is for…

  • Building CSS in Levels

    —

    by

    Brian Dys
    in

    After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS). To be able to ease the process of writing the style sheets, we must segment it into levels: Level 1: Default (browser level) Level 2: Normalize (boilerplate level) Level 3: Modify (visibility and sizes level)…

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

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

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

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