[thelist] Static application mockup

[Renoir Boulanger]

Hey guys

I am wondering if any of you have some experience with creating reusable HTMl/CSS patterns

I am working along with a team of 7 programmers and I have to provide them all html blocks so they can concentrate on the logic.

So the idea is simple and here's how I do it. I'd like your opinion:

1. I create a folder in the public folder for my work (i call it "static").  That's where I do all application states and layouts.
2. I create a directory of screenshots or graphic mockups available. (I call it "reference" in static/)
3. I number them in chronological order and keep them in reference/
4. I draw on a piece of paper all types of elements and variants and required behaviors  that I need (pager, data tables, tables with sorting,  lists, accordion, etc)
5. Once every kind of container is listed I validate against the reference/ examples
6. I start with the first overall layout. What that is repeated everywhere.

Some conventions I created:

1. The first level of menus represents differents views. I use title attribute to hint the programmer of what the hovered link is about
2. Never repeat as much as possible

Then. The programmers can pick Html parttern and create logic generating the established html.

I tried it recently on a project and it makes life easier!

I was using
- Symfony 1.4
- Sass/Compass
- Basic php loops to create the "static" part


Pros
1. Always compare static html and the code must be as close as possible
2. When modifying CSS you can compare against three reference, generated and static
4.  Frontend dev concentrate on html/css markup and makes them efficient
5. Create arrays (hash tables if you want) of complete data set, from the model before going to the view enforces best practice in that matter


Cons:
1. Code on the static (some basic loops through arrays to generate redundant html) side is almost not usable (sad enough)
2. When adapting the static to the ligic sometimes we have to modify ots markup+css and then reflec the new representation in the static version
3. Creating partials too specific or to do-it-all tend to break anyway


My question:

I'd like your suggestions about:
1. Form generation on the framework side configuration that then follow markup conventions
2. Partials (or whatever name) to generate repeatable chunks of html 
3. General workflow you use

I cant wait to have your suggestions

Cheers


RENOIR BOULANGER //

devLABmtl.org/
ConFoo.ca/
evocatio.com/

(envoyé de mon téléphone)
~