Basics: Grids, Frameworks

Android 4.x is still a major issue for me; it even does not support VW/VH… and it’s a mobile device, imagine that :slight_smile:

I can not switch to a technique when about 25% of my target-audience can not use it.

Of course I use polyfills and buggyfills for it, but some older versions of iPhone / iOS do not accept buggyfills when wrapped in a Cordova project :frowning:

  1. My favorite flexbox polyfill - https://github.com/jonathantneal/flexibility
  2. My favorite VW/VH buggyfill (not iOS / Cordova) - https://github.com/rodneyrehm/viewport-units-buggyfill/

- edit -

More about one of my heavily VW/VH created projects (Kirby powered!)

One code, 100% scale-able on all devices (besides iOS).

2 Likes

I’ve decided to stick with skeleton for now –tx to @1n3JgKl9pQ6cUMrW– but Flexbox is definitely on my things-to-learn-and-love-list.

Skeleton is cool, in my opinion.

It’s Bootstrap, without all the hazzle - and it uses clean code :slight_smile:

When you manage to create this project, you can always create the grid yourself… just take a look how others did :stuck_out_tongue:

- edit - Just discovered Toast - http://daneden.github.io/Toast/

https://github.com/daneden/Toast/blob/master/css/grid.css

1 Like

Speaking as someone who has been in the industry for 18 years (My day job is as a Senior Developer and i’ve trained people in web design). I would definitely avoid frameworks like Bootstrap and Foundation. The benefits are over shadowed by the downsides.

These frameworks are very heavy in file size if you used the vanilla version. This can be reduced if you use the alternatives versions which allows you to removed some parts that are not necessary for your current project. In my experience though, they are more trouble than they are worth because you end up fighting the framework sometimes in order to complete your design.

You will have much more fun and learn a heck of alot more if you put your own framework together. I will give you some hints:

  1. Use Gulp
  2. Use SASS
  3. Use Normalize rather then a browser reset (Normalize)
  4. Make your own SASS grid or integrate one already available. I use the Profound Grid (Profound Grid)
  5. Get Typography right. This is hard but something like SASSLine will get you started. (Sass Line)

Hope that helps.

4 Likes

I couldn’t agree more.

I think I can just chime in here with a related question: during the last year I used Foundation a lot. For me it was a way to learn more about responsive design and visibility traits. Now I see that I can go without much that they offer in the package (well, it is possible to kick out the unused components). But a great advantage is the setup of different kinds of navigation. Can anybody recommend something similar to Skeleton (which has no navigation) but for navigation?

This site for instance (Responsive Navigation) is a good start, but is there anything else where I can find many and more sophisticated examples in one place?

1 Like

Hi, Kate.

You could have a look at Brad Frost’s Responsive Resources - particularly the Navigation section.

Hope this is useful

John

1 Like

Yes, thank you, it’s indeed very useful.

I made a lot of progress in looking at Bootstrap’s 12-column grid. Unfortunately, their SCSS files are over-complex, so looking at the CSS output can be more helpful to understand how it works. Especially the use of negative margins on grid rows and box-sizing: border-box on the columns eases the pain of using grids a lot.

Just some advice on selector-naming. While I’m using a naming scheme, that is similar to BEM to avoid side effects in my CSS wherever possible, I can only recommend after using something like .grid__column--md--2, that you should prefer something shorter for better readability and easier editing. I went with the following scheme (where “md” and “lg” are breakpoint names):

<div class="row">
  <div class="col md-6 lg-4">
    […]
  </div>
</div>

If you prefer fraction-based grids, you could – of course – also write it like this:

<div class="row">
  <div class="col md-1/2 lg-1/3">
    […]
  </div>
</div>

Note the “/” character within class names? This is totally fine, as long as you escape it in your CSS file by using a backslash "":

.md-1\/2 { width: 50% }

Why? There’s zero chance that these naming schemes will collide with something else if you write your while CSS from scratch and you will probably use your grid a lot in your templates. I also take the step of improving readability a little further by using separators in my class attributes:

<article class="article [ row ]">
  <header class="article__header [ col md-4 lg-3 ]">
    […]
  </header>
  <div class="article__body [ col md-8 lg-9 ]">
    […]
  </div>
</article>

Yes, you can safely use separator characters in your class attributes to separate or group class names. Although this may look weird at a first glance, it comes at no cost (okay, a few extra bytes …). If you don’t believe me, see this article by Harry Roberts. Just make sure, that there are always spaces between the separators and your actual class names.

1 Like

Kate - For navigation Ill point at an old resource but still useful, and can easily be turned into sass.

http://css.maxdesign.com.au/listamatic/

If it’s powerful multilevel drop downs with keyboard accessibility, vertical or horizontal, and with support for mobile devices… that is very tall order and there is only one menu that can do this as far as I know:

http://www.smartmenus.org

This looks good, especially the parts that don’t refer to the Bootstrap examples.:slight_smile:

1 Like