Twenty Thousand Leagues Under the CSS

A cartoon drawings: An old submarine and some people fighting underwater against a giant squid

OK, there were only a bit more than 2000 lines of CSS in the basic style of Twelve Eleven theme of WordPress, and today I revised half of it, shrinking the code as much as possible. I do not know (yet) how to minify programmatically a file CSS, so I am checking line after line everything.
Diving in the code helped me in finding interesting piece of web design code, that I was unaware of like the measurement ex that value the x-height of a font, the text-overflow:ellipsis and a wonderful piece of animation that it is the input search of this theme.

I am still quite unhappy about the redundancy of the code (too many nested tags dependency), the reset of Eric Mayer (which I do not find positive at all) or finding pieces of empty CSS classes and that we load all the CSS in one big files while I know that is possible to load various CSS in one only HTTP request. So a little by little I am cleaning up, and trying to remove all the silly nesting (a “return” and a “tab indentation” occupy 2 bites). I already reduced the code to 1500 lines. And even some silly part of html too I commented through PHP.

Anyway, what I am most proud of, it is not the cleaning of the code, but the implementation of WebKit and have the possibility to insert my logo using proper typography. For the moment I am working with 3 fonts mainly: Adobe Pro Garamond, Helvetica Neue and obviously Ltc Bodoni 175. It is a pleasure to work finally on the web with typography, I am about to cry by the sheer joy of it.

It is a pity that I do not have enough time to fix more my blog web page and I am obliged to go to bed because it is 2 AM in the morning. Anyway I changed a bit the style and the blog start to have the shape that I want. Still many details to take care, but at least I am reaching there.

Of my objective list I can move forward of a 20% the first objective (a lot of work need to be done there)

  • Get the most similar WordPress theme to my objective: Write HTML5 & Responsive Design (Twenty Eleven by WordPress), than strip the whole CSS, loading only the essential. Rewrite CSS and HTML on the style that I need to communicate. [30% done]

But I have to go backward on this, because the plug-in of Facebook that I found it is not working like I was thinking, so I have to take a look about plug-ins. I can share on Facebook, but I want to post automagically my post from here to there.

  • Implement social sharing to improve visibility (Twitter, Google PlusOne and Facebook). [90% done]

OK time to a proper rest 😀

Previous post related

Life is simple, strikes back.

Finally after many years, I decided to refresh my website, and give it a proper voice. Naturally the only things that I could choose were the best services availables on the web to make it happen: MediaTemple Hosting service, WordPress blogging capability, latest web standards in comunication and my personal imagination and vision on how the web should be used to talk.

The task at hand it is not a simple one, and I will break down in simple steps, to help me (and everyone else) in the future to follow the same approach in my everyday routine of web design.

  1. Get the most similar wordpress theme to my objective: Write HTML5 & Responsive Design (Twenty Eleven by WordPress), than strip the whole CSS, loading only the essential. Rewrite CSS and HTML on the style that I need to communicate. [10% done]
  2. Look at the content already available on the web that I am writing or considering relevant and connecting it to my communication platform (Twitter, Flickr, Delicious, Google Reader). [75% done]
  3. Implement social sharing to improve visibility (Twitter, Google PlusOne and Facebook). [100% done]
  4. Implement Google Analytics and Sitemap Xml. [100% done]
  5. Create a Taxonomy hierarchy of Categories and Tags to help me to keep a proper organization of content, helping the users in finding what they need. [100% done]
  6. Write every single time that I want to communicate something across, about design and comunication a blog post and do not wait for it. [ongoing]
  7. Choose a proper selections of fonts for each article like if was a magazine. An example: Dustin Curtis, Jason Santa Maria, Trent Walton. [0% done]
  8. Design and Code my new website page. [10% done]
  9. Rewrite Curriculum Vitae in a more designer way. [0% done]
  10. Insert a redirect page from my old hosting to the new one. [0% done]

I’ll keep updated this post, to keep track of my progression, until I’ll reach 100% in everything.

Next post related