I was suppose to write an article each week for 52-Week Writing Challenge , but I was sick the entire week. So, I’m going to double up next week and write two articles. This is article 2 of 52.
Adding on from my previous article, My Journey to a Better CSS Framework, we at Creed Interactive felt the need to create a CSS framework that fit our team’s needs. We started to have great conversations on what we needed and how we would bridge the gap between design and development. One of the conflicts we were having were inconsistent component layouts. Some sections didn’t snap to the grid, while others went beyond the container. With further discussions, these are some of the features we decided on.
12 column grid
We decided to use a 12 column grid because the measurements made sense. In theory, 1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. That provides a lot of flexibility for creating components. So, overall, our grid is constructed in 12 columns, 80px column widths, with 20px gutter padding, and 10px padding on the outside of the grids.
With certain designs, we would remove the extra 10px on each side, but this was the standard we wanted to move forward with. Now, we have a good foundation to start our projects with.
Susy Grid System
Continuing the trend of a lean framework that doesn’t require loading unused styles, I decided to use Susy. At first, it was really different from what I was used to, but after working with it for a few months, I really enjoyed it. Building your grid on demand was key to my magic row. The idea wasn’t just to build identical columns with the row, but it was to build all sorts of different column combinations. Wouldn’t it be awesome if you could use “row-md-363” and it would create a 3 column grid with the first and last columns having a width grid size of 3 and the middle one being 6? Removing any and all column size call outs would allow for greater flexibility. We weren’t going to remove it entirely, but keep it as a fallback.
One Susy feature that was going to help me accomplish this was span nested context. It was quite confusing to me at first until I kept trying it. If you look at this example, it was going to allow me to build my row magic with Susy. The next step is to create a global variable that would generate the row classes I needed without manually creating them for all screen sizes.
https://medium.com/media/6c85b9311c27e16e34208f08cf2f7cc1/href
Breakpoints That Make Sense
Media query breakpoints can be difficult. You could use min and/or max width, you could define a range for the breakpoint, or you could target specific screens like retina monitors. After reading “The 100% correct way to do CSS breakpoints” by David Gilbertson, screen breakpoints made a lot more sense. We were working with the old way of pinpointing screen sizes according to what was popular back when NSYNC was the premier boy band. Nowadays, we have many different phones and tablet screen sizes. If you look at the example below, you can see why this new breakpoint view will make sense.
What’s Next
We will look at the actual code of the framework and continue to build it out. Setting up a github page would be a good start and open sourcing it.
Top comments (0)