It makes the region as a block container, and associates it with a named flow. (2) specify the layout region with flow-from property with the same name you just defined (foo in my sample code). This name of your choice defines the named flow, which the contents will be laid out in the region chain associated with that named flow. (1) specify the contents with flow-into property with the value as a name, where you see foo in the code sample. To achieve the “regions” layout, you need to: The sections are where the content will be flown into, and the sections can be stylized in any ways you want. As you can see in my code sample, there are a few empty sections, separated from the actual text content in article. I omitted the vender prefix in the code sample, however, you do need -webkit prefix for Safari and Chrome for now. The css used for the example is incredibly simple. When the window is wider than 200 x 2 + margin + column-gap (1em but browser dependent) pixels, the content text is displayed in two column, when 200 x 3… and so on and so forth. When the width of the browser windows is pretty small, the page layouts with no multi-column (actually, only 1 column). Let’s start from a small screen (Mobile-first, yo!). The actual demo code of the screenshot can be found on my CodePen at. CSS3 Multi-column layout modules is currently under Candidate Recommendation, which means it is a stable web standard, and has a good browser support by now although still requires vendor prefixes. With CSS3, building the fluid column layout is incredibly easy. In the era of the responsive web design, these CSS3 fluid layout also can be responsive!Ĭurrently, these CSS 3 layout modules are W3C candidate recommendation, or yet to be determined to be standard. Now and Future: Late for the party with CSS3Īs browser vendors have been implementing, we finally started taking advantage of the CSS 3, to create semantic web sites with complex layout with no external libraries. With CSS and help with the libraries, we, developers felt more comfortable building modern-looking web sites. In 2006, we got jQuery, then jQuery UI later. YUI was probably the first UI libraries came with complicated layouts like grids. In 2005, around the time when we first heard the word, Ajax, Yahoo! had launched The Yahoo! User Interface Library (YUI). About 10 years has passed, and we still somewhat dislike using CSS floats, negative margins and all the hacks to make come columns. We were excited about the “Holy Grail” column layout, as the same time the Holy Grail gave us such a pain especially when it came to the cross-browser development. When CSS was well-standarized in ealry-2000s, “table-less” layout became a job requirement for web developer positions. Yes, CSS was there already, but too immature to be used for the web page layout. (OMG! remember the HTML 4.01 Frameset DTD!?). Frameset was an another way to separate navigations from the contents. So here, I am focusing some of the shiny new CSS3 layout modules that are perfectly responsive! Party like 1999īack in the time, when delivered you pizza and video, and a sock puppet was advertising, we developed web sites with complicated layout using. Responsive Web Design has been a hot topic in past years yet I hardly cover in my blog.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |