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):
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development What Is It? Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down To Mobile Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Fast to Start Skeleton is a tool for rapid development. Style Agnostic Skeleton is not a UI framework. The Grid Skeleton's base grid is a variation of the 960 grid system. One Eleven Two Ten Three Nine Four Eight Five Seven Six Code Example Typography The typography of Skeleton is designed to create a strong hierarchy with basic styles. Heading <h3> Heading <h4> Heading <h5> Heading <h6> This is a blockquote style example. Buttons Buttons are intended for action and thus should have appropriate weight. Click Me For Action Forms Support for Skeleton Examples & Extensions Downloads (A la 960.gs PSD template)
Top 10 Front-End Development Frameworks (Editor’s note: purely for reasons of length and readability, this article is the first of two parts. This one focuses on the Bootstrap family, more will be profiled in the second part.) As the Web matures and the range of mobile devices we use to access it rapidly grows, our jobs as web designers and developers get considerably more complicated. A decade ago things were much simpler. Then, it was almost certain that most of our users were visiting our sites while sitting at their desk, looking at a large monitor. 960 pixels was more or less considered as a good width for a web page. Soon, more people will be accessing the Web on their mobile and alternate devices than on a desktop computer. One of the primary strategies we use when we deal with unknown viewport size is the so-called responsive web design. This is where front-end development frameworks come into play. In brief, if you are serious in today’s web development then using frameworks is a must and not an option. 1. 2. 3. 4.
6 Great Responsive Frameworks for 2014 | Gridgum Responsive websites also allow the website to smoothly scale to a wide range of different sized devices without the need for an additional mobile/device specific site and these responsive frameworks help speed up the process. So lets get started with our list, please note this is not in order of popularity or favouritism. 1. Gumby is a responsive CSS framework that’s built with Compass and SASS. 2. Foundation is a lightweight front-end framework from ZURB, this framework enables the user to create complicated layouts without the need to create a large number of custom elements. 3. Skeleton is a small responsive framework designed for the rapid development of websites of any size. 4. The Responsive Grid System claims not to be a framework, or a boilerplate, but a ‘quick, easy & flexible way to create a responsive website’. 5. 6. And last and not least, Bootstrap.
The Psychology of Color in Marketing and Branding The psychology of color as it relates to persuasion is one of the most interesting — and most controversial — aspects of marketing. At Help Scout we believe the problem has always been depth of analysis. Color theory is a topic of complexity and nuance, but color psychology in marketing and branding is typically represented in splashy infographics that rarely go beyond See ‘n Say levels of coverage. These surface-level discussions leave us unequipped to make smart decisions about how to use the color spectrum to convey the right message with our marketing and branding. But why is such a potentially colorful conversation so unwaveringly shallow? What is color psychology? Color psychology is the study of how colors affect perceptions and behaviors. It’s an important field of study to consider when creating marketing assets, building a new business, or rebranding an existing one. The problem with the psychology of color in marketing and branding Try for free Why does this matter?
Web UI Frameworks Worth a Try We have been used to the fact that every second site looks like Twitter. That's because of their awesome Bootstrap UI framework. We've seen CSS frameworks before, but all of them were narrow enough to solve one problem at a time. Usually this meant a grid layout and resetting CSS. Twitter Bootstrap not only provides you with flexible responsive grids but adds many useful components. From another point of view, a site built with Bootstrap loses it's individuality. But how to make site look more unique? Let's try something different then. Foundation Foundation is the most advanced responsive front-end framework in the world. Fuel UX Extends Twitter Bootstrap with additional lightweight JavaScript controls. HTML KickStart Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production MetroUI Metro UI CSS allows to create a Web site in the style of Windows 8 quickly and without distractions on routine tasks. Groundwork Say hello to responsive design made easy. AlloyUI Kendo UI Ignite UI
Responsive Design Frameworks: Just Because You Can, Should You? Advertisement Responsive design is about building a website with a grid-based layout, images that resize and media queries, as described by Ethan Marcotte. After Marcotte defined the technique, responsive design frameworks began to emerge that incorporated these principles. Mostly based on CSS and JavaScript, many of these frameworks are open-source, free to download and quickly customizable. Some of the most popular today are Bootstrap1 and Foundation2, which we’ll focus on in this article. As responsive design frameworks became popular, a big debate emerged: Why would a professional designer use a responsive design framework? Internet debates rage on3. A designer could write their own grid system, and they probably should if they know any HTML and CSS.Websites based on frameworks load slowly.All websites based on frameworks look the same.Bloat is common, whether due to the extra div tags, the 5000+ lines of CSS or the large JavaScript files. A Place For Responsive Design Frameworks
All About Floats What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float Float's sister property is clear. Clear has four valid values as well. Video