👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
It’s easy to center-align a bunch of text:
[code lang=”html” title=”HTML”]
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
[/code]
[code lang=”css” title=”CSS”]
p {text-align:center;}
[/code]
But how do you center-align a list such as a ul or an ol with children set as inline (or side by side)?
Simply set the parent (ul) to text-align:center and the children (li) to display:inline-block
[code lang=”html” title=”HTML”]
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
[/code]
[code lang=”css” title=”CSS”]
ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
li {display:inline-block;}
[/code]
This is useful for footer links displayed in mobile browsers wherein you want texts to center-align.
Categories
Avoid making the user choose from too many options.
Do: set default options for users to choose from–ideally the most common and provide a way for them to choose what is not initially presented.
Avoid: presenting a wide array of options that the interface gets cluttered and the users confused on which to choose.
Choose the most common/natural path for the users.
Do: set default actions in the context of the task while still making other actions available.
Avoid: cramming available actions altogether; provide importance to actions which are more contextual than others.
—
Design principles are not rules to abide by but more of guidelines in designing products for users. They should be put in context and tweaked when necessary.
Categories
For the longest time, I’ve been using Adobe Dreamweaver and Notepad++ in developing the front-end of websites (and I remember trying out PageMill long ago and resorted to Notepad).
I’m looking into one of Adobe’s projects: Brackets.
Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.
Source: http://brackets.io/
It could be the middle ground between Dreamweaver and Notepad++–we’ll see.
Categories
…you’re translating all the features and functions of all software combined into styles and you’re making the browser a mashup of those software.
One day, Photoshop will have an “export to HTML and CSS” function wherein the lens flare filter I dearly love would be a bunch of vector shapes rendered by the browser.
And whenever I see the need to make the lens flare in my image more awesome, I could easily tweak it:
[code lang=”css” title=”CSS”]
img {
lens-flare-type:35mm-prime;
lens-flare-brightness:100%;
}
[/code]
By then, writing the stylesheet might become as easy as spelling my name in binary code due to its vast properties and values.
Then we’ll be back to GUIs again.
Categories
Your content will flow through various containers (called regions) which you specify.
The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.
Imagine a magazine layout where you could have multiple columns in your article or where the cut of a paragraph continues to the next page.
With all these CSS developments going on, one could really build a web app based on HTML and CSS as its front-end.
We’re really in the 21st century.
Also, checkout Adobe & HTML’s page on CSS Regions.
Categories
The browser unifies content. It forces us to adhere to standards.
Imagine a time wherein your doodles in Paper could be opened and edited freely in Illustrator then shared instantly on the web–all these would be possible if they would be speaking in discernible language.