background preloader

Don't Overthink It Grids

Don't Overthink It Grids
The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid. If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Here's how I build grids. Context A block level element is as wide as the parent it's inside (width: auto;). Columns Let's start with a practical and common need: a main content area being 2/3 the width and a sidebar being 1/3 the width. <div class="grid"><div class="col-2-3"> Main Content </div><div class="col-1-3"> Sidebar </div></div> To make them next to each other, we just need to float them and apply widths. and individual width like this: That's the whole premise of not overthinking grids. Clearing Context

Related:  Code / Web DevelopmentSwagGrid systems

10 Interview Questions Every JavaScript Developer Should Know — JavaScript Scene Good to hear: Classes: create tight coupling or hierarchies/taxonomies.Prototypes: mentions of concatenative inheritance, prototype delegation, functional inheritance, object composition. Red Flags: No preference for prototypal inheritance & composition over class inheritance. Learn More: Kendo UI Gantt The Kendo UI Gantt widget displays a set of tasks and dependencies, which are used to visualize project planning data. The widget provides a Treelist section where the tasks can be edited, sorted and reordered in a grid-like fashion, as well as a Timeline section, where the tasks and dependencies are visualized under an adjustable time ruler, and can be resized, moved, edited and removed. It can also display the Timeline in three different views – day, week and month. Getting Started

Responsive Grid Frustrations - Susy, Zen and sub-pixel rounding - - blog of technology writer and web designer Ben Frain. The issues I’m about to describe aren’t particular to grid systems, these ‘sub-pixel’ rounding errors can affect any layout you want to work cross browser. I’m also not picking on IE here, this issue is exhibited when comparing the latest builds of Firefox, Safari and Chrome… Be aware that now, as of V1.06/March 2013, Susy also provides a mixin (@isolate-grid) to create container relative elements (if you don’t understand that already, read the post in full and you will). Therefore check out the Susy docs. Also, the technique is covered in my book, Sass and Compass for designers There are a few grid systems out there for Sass & Compass and they make creating responsive grids a whole lot easier.

Learn to Code: 13 Tips that Could Save You Years of Effort — JavaScript Scene Learn to Code: 13 Tips that Could Save You Years of Effort When you’re new to coding, it can be hard to know where to start, and it’s easy to get sucked down paths that could waste a whole lot of your time and money. I’m Eric Elliott, author of “Programming JavaScript Applications” (O’Reilly), development team leader, JavaScript instructor, and public speaker.

Putting It All Together The following code incorporates all of the methods that have been explained in the previous pages: <!DOCTYPE html><html><head><title>My first web page</title></head><body><h1>My first web page</h1><h2>What this is</h2><p>A simple page put together using HTML. <em>I said a simple page put together using HTML.

Grid System Just copy the file _UnitGS.scss from GitHub to your Sass directory and start using the grid. The UnitGS uses Sass, to setup it up go here. Even better with Compass. The Joel Test: 12 Steps to Better Code by Joel Spolsky Wednesday, August 09, 2000 Have you ever heard of SEMA? It's a fairly esoteric system for measuring how good a software team is. Inverse trigonometric functions with Sass You might think that math doesn't have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You'll need it if you want to do something complicated with 3D transforms. And it can be a lot of fun if you just want to impress your friends. Here's an example: This rotating icosidodecahedron is an advanced example of what you can do with trigonometry in CSS.

Salsa - Syntactically Awesome Layout System... Awesome! NOTE - Salsa was merged into Susy v2.x which is going to include all of Salsa's features and much more. See this demo page for some examples. CSS grid systems are nice, but we can do so much better... Salsa is a Sass based layout system that allows you to: Easily and quickly create both simple and complex layouts.Keep your HTML nice and clean, no presentational classes.Produce lighter CSS with only what you really need.Separate display order from source order for SEO and Accessibility.Support mobile devices by creating fluid, responsive layouts.Create non-grid layouts with a smart positioning system. Some Examples#