The question is: I want to learn how to impose quickly. Really quickly, while not "gaining experience over the years." What I mean?

For example, there is a standard template for a three-column site.

ШАПКА ЛЕВАЯ_СТОРОНА ПРАВАЯ_СТОРОНА ЦЕНТР ПОДВАЛ

With this template, almost no one argues, almost all use it. Here I would like to know more of these templates. Better, in the form of an online manual with examples (because most of the designs contain common elements).

What interests first.

  1. Focused horizontal menu in rubber layout with variable width buttons and drop-down submenus. It's easy to display without submenus: display: table-cell.
  2. A block centered vertically on a blank page. More precisely, why sometimes it can not be centered.
  3. Dimming from modal dialogue.

Individually, these examples are easy to find. I would like everything together (or an answer that all together is not), moreover, that it was “correctly” put together.

  • What prevents all this to take and blind together? - Artem
  • Nothing interferes. But on the search for solutions separately spent nth time. And not always found the result is quite a literate. - knes

7 answers 7

http://csstemplater.com/ and, if not, http://www.google.com/search?q=html+generator . This is the first part of the question.

  • mmmm .... it's almost necessary. But this is quite the first part. This is the generation of global patterns. I already know them. I'm more interested in all sorts of small internal features. For this, I gave examples =) - knes

Emmet significantly increases the speed of layout.

  • Nenene =) My typing speed is normal. Abnormal speed of awareness as the proposed layout cram into blocks. - knes

I advise you to search for the phrase css framework. Most likely what you need.

  • Hmmm ... Yes, this is probably the closest to the truth. Although, this is more a set of ready-made CSS classes, not a collection of blocks. = / Thanks anyway. - knes

Well, it means you were lucky with the same layouts in structure, personally in my work the structure is constantly changing, and I hardly see standard templates anymore, there are a lot of script dynamics everywhere, non-standard locations, and probably I haven’t seen any standard templates in the last year, nobody wants to be like everyone else, everyone needs originality. So answering your question, I can say that quickly learn to impose will not work.

  • one
    What, no one wants a pop-up picture in your gallery? Intrusive registration form in the same dialogue? Unusually floating in the cap of the phone? Crowds of smiling girls carrying different elements of the site? An endless list of products in the catalog with pictures and a bunch of descriptions that can unfold without breaking the entire site? Then you, of course, very lucky. But personally, I meet just such ... - knes
  • knes, I’m also saying that I have the same clients as you, I haven’t seen clients with typesetting for the standard for a long time. - Horus

The “architecture” of a site, like design patterns, always depends on needs. For example, a business card site or a “stall site” does not need templates at all, since a couple of photos and several paragraphs of the text do not need a complex structure, and the structure in general ...

  • This is all good. But often it is not stalls that you have to impose. And knowing patterns that apply to all types of sites is always helpful. - knes
  • sit down for the evening, open a couple of sites \ think up the templates yourself and create HTML markup for them, then in the future you will be exchanging the code for yourself and that's it? or much faster ?? take some editor, like a DreamViewer, put a bear on it all - it generates markup for you with everything and everything - Gorets
  • If so, then you can develop templates yourself .... but what’s so complicated? He sat down, a couple of minutes on his knee sketched how many divs it is necessary and that's it! Delov that =) - AseN
  • @Asen, sketched out how many divs are needed and that's all // And how many do you need? ^^ For the same rounded corners there are at least three solutions for old browsers. What's so complicated? // Difficult Nothing. But it must be fast. - knes

  1. Using flexbox instead of float, clear, etc. hacks

  2. The BEM methodology greatly enhances creation (at the expense of simplicity) and further maintenance.

  • one
    BEM - this is not about the "speed" layout. - neluzhin

The only thing that really increases the speed of development is the use of an advanced IDE and preprocessors. For HTML , this is Pug (formerly Jade ), and for CSS , Stylus .

Not only do preprocessors shorten coding, they also improve perception. Yes, and getting confused with writing the closing structures in Pug and Stylus hard - they are simply not there. Well, I "advertise" my development , in which compilations of preprocessors, font generation and graphics optimization are configured by default.