I am currently making a curriculum for the basics of HTML and CSS.
Revisiting CSS Levels, I have written in the past about it:
The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility and Usability in mind.
And from there on, we build towards Visual Design.
Using this as basis, one could argue that Colors and Typography are “nice-to-haves”.
Can your design stand in black and white?
Can your design stand in a serif font?
Yes, it should.
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, “Shouldn’t the document title be at the topmost of the document?”
Not when you put this accessibility function into the context of its intended use. The user, upon arriving at your website might have come from a link or have typed a URL into the web browser. That could’ve served the purpose of document title that ensures the user where they are going to or arriving at.
The second part of this context is the user being able to go directly to the content — skipping every element that isn’t part of their purpose for visiting the website.
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 positioning. Initially, it appears that the default way to put it is this way:
[html]
<a>Label</a>
[/html]
And since this is for the purpose of CSS, we must implement Framing for the textual element and for positioning. These frames will act as hooks for CSS. Look at this example:
[html]
<div> <!– Frame for positioning –>
<a>
<span> <!– Frame for textual element –>
Label
</span>
</a>
</div>
[/html]
Here’s a demo to show a floated button:
Oh and by the way, here’s an ombre potato:
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:
Ideally, each level must be buildt on top of the previous one yet still independent. For example, leaving the style sheet at browser level must present usable information. The same principle applies as one builds the style sheet level per level.
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:
<div class="comp skip-link_comp">
<a class="skip-link_axn" href="#content">Skip to content</a>
</div><!-- skip-link_comp -->Notice that there are two generic class names attached to specific class names:
Only comp is suggested to have a separate class name for CSS debugging purposes.
The syntax is: specific-name_generic-name
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 the entry applies to him or her.
For example, as we talk about Notes on SASS File Structure, how does one try to absorb this concept? You might ask if this entry is important for you as a web or front-end designer. The answer can be made easier by categorizing the topics.
The first categories deal with a particular web concept as being either of the two:
Theory deals with general principles.
Theory is a contemplative and rational type of abstract or generalizing thinking, or the results of such thinking. Depending on the context, the results might for example include generalized explanations of how nature works.
Source: Wikipedia
An example of a theory is CSS Principles.
Technique on the other hand, deals with practical application.
A technique is a procedure to complete a task.
Source: Wikipedia
An example of Technique is Recreating Spotify’s Album Cover.
There could also be an entry with both Theory and Technique as its categories, for example: Using <body> to Define UI States and Types. This entry talks about principles and demonstrates how to apply it.
The second part of categories is about the web being generally split into two – it is either:
The latter is from The Elements of User Experience by Jesse James Garrett.
Web Documents deals mainly with information like Wikipedia or a WordPress blog. This is the primitive beginnings of HTML wherein information are linked to other information via anchor elements.
Web Applications deals mainly with services that foster activities and enable the users to accomplish specific tasks. Good examples range from Google Sheets to InVision.
This category set could be mutual like Flickr, for example – it is a webapp yet it deals with images and videos with rich information.
I would be using these categories to contextualize entries mostly discussing HTML because each web object, whether a simple web document or a webapp deals with HTML.
Hopefully this categorization technique will be useful in mapping the context of Front-End Design entries.
Previously, I’ve discussed a class naming convention in the form of:
<generic>__<identifier>–<specific>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 are located.
<header>
<h2 class="accessible-name">Header Content</h2>
<nav class="main-navigation">…</nav>
<form class="search-form">…</form>
</header>How would you be able to affect the main navigation depending on the state of the search form if its class is only confined within its container? The answer might be “thru JavaScript” – undeniably, we would need JS in this topic but only for manipulating class names. The trick lies in putting the UI Type or UI State class in a place wherein both main navigation and search form are under it.
What benefit do we get in having a global class located higher in the DOM tree? It lets us control different parts of the UI depending on the site’s or app’s UI Type or UI State.
It is important to reserve the highest element you can put a class on – which is html (for pertinent class names), thus, the second highest element we could attach a class attribute to is body.
Going back to our example, we would use the following UI State class to define the state of the search form:
<body class="ui-state__search-form–active">The body class, in words, translates to “The UI State of the Search Form is Active”.
Now, whenever the search form is active, you can already manipulate the main navigation based on that state.
Take a look at the demo on CodePen:
See the Pen Using <body> to Define UI States and Types by Brian Dys Sahagun (@briandys) on CodePen.
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.
To solve this difficulty, I plan to rearrange my SASS file structure and categorize rule-set files into just two folders:
The new structure would be:
css
|-- sass
|-- default
|-- structure
|-- objects
|-- components
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).