Zhongde Liu

This is my personal "Clipboard" of web development stuff I come across

Tag Archives: css


by Leave a comment

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…


by Leave a comment

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.

 


by Leave a comment

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!


by 1 Comment

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