background preloader

Less Framework 4

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. This is how I still work today and definitely a method I advocate. /* 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):

Related:  responsive designGrid systemsframeworksTools

Using Media Queries in the Real World Warning This article was written over six months ago, and may contain outdated information. Recently I’ve been working on the new website for my employers, Poke London, which launched last week. One of the things of which I’m proudest is the use of media queries to create a site which is sympathetic to small-screen devices. I learned a lot from developing with media queries, not least of which was the limit of what’s possible with them, so I thought it would be useful to present some of the key lessons learned in this post.

A Simple CSS Framework Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing. Introduction to Sass for New WordPress Theme Designers As a new WordPress theme designer, you would quickly learn the challenges of maintaining long CSS files while keeping them organized, scalable, and readable. You will also learn that many designers and front-end developers recommend using a CSS preprocessor language like Sass or LESS. But what are these things? Avalanche - Responsive, Sass-based, BEM-syntax CSS grid system Code quality Easy, flexible naming convention Avalanche gives you a choice of three naming conventions for your width class names: fraction (1/4), percentage (25) or fragment (1-of-4).

Andy Clarke at Smashing Conference In his talk at Smashing Conference, Andy Clarke talks about how responsive design needs to transcend designers, we need to rework our design process, and we need to be more honest and open with our clients. Responsive design is not just our problem We need to fix our design process How to tell your client they’re an idiot to their face and not get fired. Responsive design is not just our problem A better Photoshop grid for responsive web design Posted on 20 January 2012 • 90 comments In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%.

Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system.

User Interface UI Kit Introduction Gumby v2 is here. You haven't a moment to waste! So many new, amazing features await you! But first a quick crash course on the latest and greatest Gumby Framework. Some things you will need with you on this journey are: Essential Website Features for Starting Rental Property Maintenance Business Airbnb has given homeowners a great way to monetize their houses by turning them as peer-to-peer rentals. However, this very P2P nature of the marketplace leaves a void in it. For most Airbnb hosts, keeping their rentals ready for guests is a huge pain in the neck. And that’s where short-term rental maintenance service providers like Pillowhomes, Guesty, Proprly, and Urban Bellhop jump-in to ease the troubles of homeowners. These technology-driven rental property maintenance platforms are in full swing in American and European Markets.

A pixel is not a pixel is not a pixel Page last changed today Yesterday John Gruber wrote about the upped pixel density in the upcoming iPhone (960x640 instead of 480x320), and why Apple did this. He also wondered what the consequences for web developers would be. Now I happen to be deeply engaged in cross-browser research of widths and heights on mobile phones, and can state with reasonable certainty that in 99% of the cases these changes will not impact web developers at all. The remaining 1% could be much more tricky, but I expect Apple to cater to this problem by inserting an intermediate layer of pixels.

Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column Rolling Your Own Grid Layouts on the Fly Without a Framework Do you hate CSS grid frameworks but love the rapid layout benefits that they provide? Do you struggle with the math and code necessary to create your own flexible multi-column layouts on the fly? Today we’re going to walk you through creating your own basic, reusable system for creating multiple columns that you can implement anywhere any time with only a few lines of code. No bloated code or non-sematic class names required! Grid Frameworks: Pros and Cons I’m a pretty big fan of CSS grid frameworks.

Getting Started NativeScript strips the complexity from native development both in terms of required coding skills and system setup. To get started, you need JavaScript or TypeScript knowledge to implement your business logic, XML and CSS knowledge to design your UI and an idea for a mobile app. You do not need Java or Objective-C knowledge. Once you have your app idea, you can get started in a few minutes.

Related:  CSSCSSDesignWeb Development & HTML5CSS3Grids & FrameworksHTML5 Part 2frameworksFrame WorksDesign FrameResponsive WebdesignCSS et Webdesign (code)Web designcss3Wordpress