McGivrer's Home

Next Step in coder tooling ?
- 23 May 2011
- 0 Responses
- views
- code css html language tools zen
- Edit
- Delete
- Tags
- Autopost
Why not using an intuitive language to explain to other language what to do ? This is the basic idea for the "Zen Coding" tool !

Just write some simple hieroglyph like line bellow, and execute the "zen coding transformation":
#page>div.logo+ul#navigation>li*5>a
The you will get :
<div id="page"> <ul id="navigation"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
Cool tool, no ?

have a try in your favorite code editor !

you can also discover Zen Coding power through the following video:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.
- Tweet
CSS: how to reset default value in a multi browsers scope ?
- 9 Jun 2010
- 1 Response
- views
- css design reset web
- Edit
- Delete
- Tags
- Autopost
Already have to produce web page to public target ? And by public i mean out of intranet or extranet of the world of enterprise, targetting any public.
Yes ?
So the first thing to do before creating a CSS styles sheet is to start from the same point for all browser. And as all CSS specification version didn't tell a word about what are the default values, all browser developers go with there own randomly choosen values ;)
A first solution
So, it's mandatory to reset these values to be sure that your CSS will have chance to produce the same visual result on all web client of the world, any OS, any browser.
The first technic is to reset individualy all html tags to some common values:

html, body, div, form, fieldset, legend, label {
   margin: 0;
   padding: 0;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

th, td {
text-align: left;
vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

Quick and dirty ?
The second technic is to reset with a one big line :

* {

vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0;
padding: 0;
margin: 0;

}

Thanks to "Carrer Blog : CSS Mini Reset" for this very fast solution covering 80% rules.

References
Other solutions exists :
- Tweet
Web Font: here we are !
- 9 Jun 2010
- 1 Response
- views
- css desgin fonts web
- Edit
- Delete
- Tags
- Autopost
Did you already dream, as a web designer, to embed your own Fonts in your web page ( without using dynamic images, I mean ;) ?
Yes ? so please, switch your old scrappy web browser to a brand new Goggle Chrome 4.x or Safari 4 to be able to show you skills in design and page composition ;)
http://ajaxian.com/archives/2010-web-fonts-are-here-and-ready-to-use

Have a Good Day.
- Tweet
What is HTML5 ?
- 9 Jun 2010
- 0 Responses
- views
- css design graphics html html5 schema specifications
- Edit
- Delete
- Tags
- Autopost
Thanks to Focus, we can have a nice view of what you get out of the box with HTML5.
- Tweet
Simple design with simple color and simple tools !
- 6 Apr 2010
- 0 Responses
- views
- css demo design html js web
- Edit
- Delete
- Tags
- Autopost
Yes, working as Web developer prevent me to be a good web designer. And sometime, I need focus on state of my knowledge about simple web languages as HTML and CSS.
This is my "State Of the Art" about web design. A tentative of design ;)
Comments are welcome.

Note: please, notate that red part at bottom is only for debug purpose ;)
- Tweet

Next Step in coder tooling ?

CSS: how to reset default value in a multi browsers scope ?

Web Font: here we are !

What is HTML5 ?

Simple design with simple color and simple tools !

About

Archive

Get Updates