6 ms·

Common patterns of markup & style

111 points by zachwaugh 15y ago

rglover 15y ago
Awesome resource. Quite jealous of those just starting out. I wish I would have had stuff like this when I first started.
- sjwright 15y ago
  Don't be jealous, on the contrary -- be thankful you got to learn without having the correct answer handed to you on a silver platter. If there's anything to be thankful for in the current climate, it's the diversity of browsers and device form factors forcing designers to think about the layout outside of Photoshop.
nazar 15y ago
Overall I like it, It can be very usefull for initial mark up where design isn't much inportant. Definitely took a place at my bookmarks. Only one thing I noticed. I am not sure if it is a bug, but please check this page http://pea.rs/forms/multi-left-labels http://pea.rs/forms/multi-left-labels (and apparently same at http://pea.rs/forms/top-labels http://pea.rs/forms/top-labels) It has some problems with displaying textarea, at least for me it looks like that: http://i.imgur.com/tJKiG.png http://i.imgur.com/tJKiG.png I am using Windows 7 with Firefox 9.0.1
- dangrossman 15y ago
  That's because the markup says <textarea id="bio"></textarea> instead of <textarea id="bio"></textarea> It's going to look like that for everyone.
  - nazar 15y ago
    the question is, was it intended to look like that? I doubt it
    - ejpastorino 15y ago
      I don't think so either, but editing the form on Firebug or WebKit's inspector is really easy. And the text area is looking nice, really similar to text fields :)
- deleted 15y ago
  [deleted]
jmsduran 15y ago
Awesome stuff. Are these layout elements valid HTML & CSS (I'm too lazy to run it through a validator at the moment)? This is a great resource of commonly used web elements, kudos to you.
sakopov 15y ago
I'm a web developer trying to be a designer as well and the one thing that always frustrates me with HTML 5 resources is that they focus on the definition of each new element and not proper use which preserves its semantic value within a document. This one pretty much nailed it with good examples. Thanks for sharing!
shinuza 15y ago
It's a good initiative but utterly wrong regarding best practices for css selectors. ol.tags li a span.meta Really? Why not something like: .tags-vertical .meta I like the overall style a lot tho.
- mahmud 15y ago
  It says it's a Word Press theme. Maybe WP expects those identifiers?
  - shinuza 15y ago
    Maybe for the top level, but anything between that and the classname is useless IMHO.
swah 15y ago
Looks good, but what should I be learning from this?
- ejpastorino 15y ago
  It's look like it's just a base for creating nice wordpress themes. It's not intended to learn much I think. Anyway, it has really great style. Very good looking components and very useful to get started easily with a cool site, not necessarily a wordpress one.

111 points by zachwaugh 15y ago

Awesome resource. Quite jealous of those just starting out. I wish I would have had stuff like this when I first started.

sjwright 15y ago
Don't be jealous, on the contrary -- be thankful you got to learn without having the correct answer handed to you on a silver platter. If there's anything to be thankful for in the current climate, it's the diversity of browsers and device form factors forcing designers to think about the layout outside of Photoshop.

nazar 15y ago

Overall I like it, It can be very usefull for initial mark up where design isn't much inportant. Definitely took a place at my bookmarks. Only one thing I noticed. I am not sure if it is a bug, but please check this page http://pea.rs/forms/multi-left-labels http://pea.rs/forms/multi-left-labels (and apparently same at http://pea.rs/forms/top-labels http://pea.rs/forms/top-labels) It has some problems with displaying textarea, at least for me it looks like that: http://i.imgur.com/tJKiG.png http://i.imgur.com/tJKiG.png I am using Windows 7 with Firefox 9.0.1

dangrossman 15y ago
That's because the markup says <textarea id="bio"></textarea> instead of <textarea id="bio"></textarea> It's going to look like that for everyone.
- nazar 15y ago
  the question is, was it intended to look like that? I doubt it
  - ejpastorino 15y ago
    I don't think so either, but editing the form on Firebug or WebKit's inspector is really easy. And the text area is looking nice, really similar to text fields :)
deleted 15y ago
[deleted]

jmsduran 15y ago

Awesome stuff. Are these layout elements valid HTML & CSS (I'm too lazy to run it through a validator at the moment)? This is a great resource of commonly used web elements, kudos to you.

sakopov 15y ago

I'm a web developer trying to be a designer as well and the one thing that always frustrates me with HTML 5 resources is that they focus on the definition of each new element and not proper use which preserves its semantic value within a document. This one pretty much nailed it with good examples. Thanks for sharing!

shinuza 15y ago

It's a good initiative but utterly wrong regarding best practices for css selectors. ol.tags li a span.meta Really? Why not something like: .tags-vertical .meta I like the overall style a lot tho.

mahmud 15y ago
It says it's a Word Press theme. Maybe WP expects those identifiers?
- shinuza 15y ago
  Maybe for the top level, but anything between that and the classname is useless IMHO.

swah 15y ago

Looks good, but what should I be learning from this?

ejpastorino 15y ago
It's look like it's just a base for creating nice wordpress themes. It's not intended to learn much I think. Anyway, it has really great style. Very good looking components and very useful to get started easily with a cool site, not necessarily a wordpress one.