CSS Grid Positioning Module Level 3 Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119] Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this: Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this: Note, this is an informative note. The specification will remain Candidate Recommendation for at least six months.
SharonTanPF® Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
WebHome < ASAP ActionScript Application Framework - Practical, Free and Open Source Grid System Generator Infinite Scrolling Best Practices by anthony on 12/23/10 at 1:06 am Infinite scrolling is a new interface technique you’ll find popping up on various websites. It allows users to browse through content without clicking on pagination links. Instead, all users have to do is scroll to the bottom of the page and new content will automatically load on the current page. This not only cuts the clicking, but it also cuts the need to load new pages. This new and efficient way to browse content has many advantages. Keep the navigation bar persistently visible When you scroll down a normal web page, the navigation bar gradually loses its visibility. Give users feedback when loading new content When new content is loading, users need a clear sign that the website is doing this. Show how much content has loaded and how much is left With infinite scrolling, users will inevitably load a lot of content on their page. Use a More button if you have a footer Bring users back to their previous spot when they click back
Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture .
960 Grid System RIM’s Plans for 2011 Leaked 28 January '11, 02:34am Follow BGR has just posted leaks from Crackberry.com of what appears to be RIM’s plans for 2011 and the first quarter of 2012. The leaked Montana (Bold Touch) specs show the device will sport a 5mp camera and will do HD recording at 720p. The Monaco Touch is one of the sexiest BlackBerry we’re seen and it seems to have a thin and light curved body.
Responsive Design in 3 Steps Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I've put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge). Step 1. Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. Internet Explorer 8 or older doesn't support media query. Step 2. In this example, I have a basic page layout with a header, content container, sidebar, and a footer. Step 3. CSS3 media query is the trick for responsive design. The following set of rules will be in effect if the viewport width is 980px or less. You can write as many media query as you like. Conclusion
Grid-Based Web Design, Simplified