Herokus Design Styleguide

Heroku just recently made their ui styleguide/style kit public available. This is another great example of a good structured and visual appealing reference for the frontend elements. You provide code examples and actual design in this living document for typography, buttons, forms, grids, etc…

http://purple.herokuapp.com/

Such a reference can make a huge impact in terms of communication between different departments and stakeholders. Combine it with wireframes you get a really fast instrument to talk over and improve new design plans.

If not, don’t wonder if your end result is a design chaos, and your css/html is duplicated all over the place…

How CSS is structured at large sites

Recently some big players are describing how they are structuring their frontend (css) code. It’s about tooling, build workflow, coding styles, serving etc….

Github:
http://markdotto.com/2014/07/23/githubs-css/

Codepen:
http://codepen.io/chriscoyier/blog/codepens-css

Lonely Planet:
http://ianfeather.co.uk/css-at-lonely-planet/

Stylesheet limits in Internet Explorer <= 9

One point on the web performance list is: “Concatinate and minify all your css into one file”. However in IE (version lower than 10), you have an internal limit regarding the stylesheet file.

These are the facts:

• A sheet may contain up to 4095 rules
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep

The official statement on the MSDN blog here:  http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

If you eventually  get over these marks (and with an optimized generated css file, it is more likely) , you have to split your stylesheets into multiple files (in Production).

For example, github.com currently uses two css files for its normal website, named github.css and github2.css.

 

Link: More “big websites” going responsive

More and more websites, especially tech blogs are switching to a responsive layout. Here are some of them:

• Mashable: http://mashable.com/
• Smashing Magazine: http://www.smashingmagazine.com/
• The Next Web: http://thenextweb.com/
• ReadWrite: http://readwrite.com/

Note: Fontpath for Compass

In the latest project using a sass/compass development environment, I had problems to get the fonts referenced correctly, after the scss had been converted to css.

But there is a (yet undocumented) config variable named “fonts_dir“, analogue to the other standard variables like css_dir, sass_dir and javascripts_dir, which compass uses in order to generate the correct path.

So add it to your config.rb and you are ready to go!

Reference: Zen Coding Syntax

For HTML:
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Example:
div#content.wrapper>h1+p*2

Result:
<div id="content" class="wrapper>
<h1></h1>
<p></p>
<p></p>
</div>
 

For CSS:
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

Cheatsheet (PDF):
http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf