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. The benefit of grid frameworks is a no-brainer: they make for ridiculous fast layout. However, CSS grid frameworks have some pretty serious downsides as well. Grid frameworks are also fairly fixed. Finally, many coders are real sticklers for semantic code and setting up generic, obscurely-named classes for layout really frustrates them to no end! Build Your Own As we just clearly laid out, some people love CSS grid frameworks, many absolutely hate them. Creating Columns in CSS Huh? Build It!
CodeVisually - Web Developer Resources & Tools 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. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. Later on I developed Frameless, the last entry in my early CSS grid system saga.
A Look Into: WebMatrix for Front-end Development There are plenty of web development applications for Windows system, such as Notepad++, Netbeans, Eclipse, Komodo, Aptana etc. These applications are working fine, and many of my developer friends are using them. But, if you want to have one that is integrated very well with Windows system at its core, then you need to check out WebMatrix. WebMatrix is a free, and lightweight web development tools that is developed by Microsoft. So, let’s see what WebMatrix has to offer. Recommended Reading: Top 10 Free Source Code Editors – Reviewed Installation Around 2009, Microsoft centralized their web application lines using Web Platform Installer. Once you hit Install, WebMatrix will automatically fetch its dependencies including .NET framework, IIS, and MsSQL. In addition, you might also need to install MySQL for working with PHP application that relies on it, like WordPress. Features Web Standard WebMatrix embraces web standards. Writing CSS3 syntax is easier. Open Source Web Applications Final Thought