This weekend I was invited to have a remote presentation on Responsive Web Design with students from the Autonomous University of Queretaro (UAQ) in Mexico. Introductory concepts are presented in code, so you have the chance to apply them immediately. The video is in spanish.
Happy coding.
The following one-liner will help you remove comments, spaces, and more from your CSS files. Suggestions are always welcomed.
Important: Before running this command, create a copy of your original file. Try the resulting CSS in a test environment before releasing it.
cat style.css | sed -e ' s/^[ t]*//g; # leading spaces s/[ t]*$//g; # trailing spaces s/([:{;,]) /1/g; # spaces after a colon, brace, semicolon, or comma s/ {/{/g; # spaces before a brace /^$/d # blank lines ' | sed -e :a -e '$!
HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
Are you tired of dealing with different screen sizes for your web pages? Well, this information is for you.
I will show you some CSS tricks to help you reorganize a webpage depending on your browser window width.
We will start with a simple HTML 5 skeleton that includes a contents and a navigation section:
<!DOCTYPE html> <html lang="en"> <head> <style> /* we will add our style here on the next step */ </style> </head> <body> <div role="main"> <h1>This is the contents</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Here it is. Start with a conventional item list like the following:
<ul class="hmenu"> <li><a href="">Option 1</a></li> <li><a href="">Option 2</a></li> <li><a href="">Option 3</a></li> <li><a href="">Option 4</a></li> <li><a href="">Option 5</a></li> </ul> Don’t forget to add the class parameter to the ul tag – that will help us do the magic. The previous list is rendered in a regular browser like the following: Now, add the following CSS to your file:
.hmenu { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .
