Responsive Grids with Garden

 

Priyatam Mudivarti

Founder/Principal | Facjure, LLC

 

@priyatam

Clojure/West
Portland, OR, Mar 2015

Why Grids

Information Architecture

Typography

Graphic Design

Print Design

Web Design

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

 

— JOSEF MULLER-BROCKMANN

But I'm not a web designer!

Do you know CSS?

Many choices

 

960px

Bootstrap

Foundation

Jeet

Susy

Skeleton

Skeljs

Flexbox
 

https://github.com/priyatam/thinking-grids

> 50 grid libraries

Real designers 

design from scratch

they're hackers too

designer

Make the headings serifs and scale-types using four breakpoints (480 px increments). Use our brand settings on a 3-column grid

λgrammer

Let me write a higher order function



(defn create-minimal-grid [clazz pad]
  [[:* {:box-sizing "border-box"}]
   [clazz {:background "white"
           :margin [[0 0 pad 0]]}
    [:&:after {:content ""
               :display "table"
               :clear "both"}]
    ["[class*='col-']" {:float "left"
                        :padding-right pad }]
    [:.col-1-3 {:width "33.33%"}]
    [:.col-2-3 {:width "66.66%"}]
    [:.col-1-2 {:width "50.00%"}]
    [:.col-1-4 {:width "25.00%"}]
    [:.col-1-8 {:width "12.50%"}]
    [:.out-padding {:padding [[pad 0 pad pad pad]]}
     ["[class*='col-']:last-of-type" 
         {:padding-right pad}]]]])

A grid in a single function

Can we make it better?

https://github.com/facjure/mesh
(def gutter (px 20))

(def typesetting
  (list
   (typo/typeset-body typo/defaults :golden)))

(def grids
  (list (typo/baseline (rgba 0 0 255 0.5) (px 2))
        (grid/create ".grid" gutter)
        (grid/wrap-widths 978)
        (grid/create-nested-units)
        (grid/nuke-gutters-and-padding)
        (grid/respond-small (:mobile breakpoints) gutter)
        (grid/respond-medium (:tablet breakpoints))))

(def styles
  (css (merge grids typesetting)))

How about responsive
typography?


calc(minFont +   (maxFont - minFont) 
*   ((100vw - minWidth) 
/ (maxWidth - minWidth))

 

based on viewport math



(defn calc [min-font max-font min-width max-width]
  (println "Viewport size:" (viewport-w))
  (let [(viewport-w .. js/document -documentElement -clientWidth) 
        font-diff (+ min-font (- max-font min-font))
        vp-diff (- (px (viewport-w)) min-width)
        wid-diff (- max-width min-width)
        res (* font-diff (/ vp-diff wid-diff))]
    (println "Calculated Fontsize: " (:magnitude res))
    (swap! state assoc :font-size res)
    res))

a single function + media queries

http://madebymike.com.au/writing/precise-control-responsive-typography/

Demos

Bootstrap

container
row
column

is limiting

Susy

most popular layout engine

not based on calc

~3000 SLOC

depends on context 

extension is hard

feels like "framework" 

Why stop there

(copy print-design)

Baseline

Grid?

DIN Paper system

16 columns  =  desktops
 

8 columns     =   tablets
 

4 columns     =   mobile
 

render any screen  from 240 up to 2560 px

*http://goldengridsystem.com

Demos

That's half
the truth

unsymmetrical grids need complex math

 

!browser issues

js framework integrations

 

perfection takes time

Foundations

columns

gutters

baseline grid

simple, fluid, nested, hierarchical

typographic rythms
modular scale
 

layout math

media queries

CONCEPTS

TYPES

CORE

CSS/SASS

are great, but limited

css doesn’t “talk to dom”

math impl is hard

 

not modular
not content driven

not dynamic


mixins are not composable


constrained by limitations—not by choice

 

Most Grid libraries are limited

Can you create columns with just one wrapping element?

Are you stuck with a set number of columns? 

Do you have to add several classes to your markup for the grid to function?

Are the gutters between columns created by padding or an actual space between them (margin) ?

Can you make vertical grids with it?

Can you pass other values to these gutters? For instance, 2rem *

 

* https://github.com/corysimmons/lost

Garden

written by Joel Holdbrooks

(author of a dozen clj/cljs libraries)

CSS as data

Vectors
= Selectors

 

Map
= Declarations

 

Rules
= Vector of Vectors

[:.grid {:*zoom 1}
  [:&:before :&:after {:display "table"
                       :content " "
                       :line-height 0}]
  [:&:after {:clear "both"}]]

Text

DRY Mixins & Functions 


;; DRY "Mixins" return declarations
(def reset
  {:margin 0
   :padding 0})


;; Real Functions return values (Rules)
(defn clearfix [clazz]
  [clazz {:*zoom 1}
   [:&:before :&:after 
       {:display "table"
        :content " "
        :line-height 0}]
   [:&:after {:clear "both"}]])

Text

Media Queries



(defn respond-medium [width]
  (at-media {:screen true :min-width width}
            [:.wider
             [:.grid {:max-width width
                      :margin "0 auto"}]]))

 

Abstraction is at the center of most work in
Computer Science &
User Interface Design.

 

Abstractions

Not in
CSS, 
Less,

Sass, Stylus

namespaces

 

pass css as functions at runtime

compose HTML and CSS in the same syntax

simple & powerful units & arithmetic


rEPL-driven design

programming stylesheets
in FP

 

separate  selectors and declarations

 

Ring-style middleware

Mesh,
a grid library—

early prototypes

http://github.com/facjure/mesh


Decouple

selectors * declarations

;; a bad example
(defn make-serifs [selector families]
  (fn [declarations]
    (let [styles (selector declarations)]
      (conj styles (font (:garamond families) 3 600 0.5 2)))))

;; slightly better
(defn scale-type [selector params]
  (fn [declarations]
    (let [styles (selector declarations)]
      (conj styles
            (at-media {:min-width (get-in params [:breakpoints :mobile])}
                      [:& {:font-size (* 1.5 (:min-font params))}])
            (at-media {:min-width (get-in params [:breakpoints :tablet])}
                      [:& {:font-size (* 1.75 (:min-font params))}])
            (at-media {:min-width (get-in params [:breakpoints :laptop])}
                      [:& {:font-size (* 2.25 (:min-font params))}])))))

Compose Declarations
and Selectors, with HoF

(defn headings [declarations]
  [:h1 :h2])

(-> headings
    (scale-type settings)
    (make-serifs brand-fonts)
    (make-sans-brand-fonts)
    (grid/create {:columns 3})

Create your own DSLs

Integrate with Om

store styles in app-state

 

store content in app-state

 

components mount their own styles and content as data on IWillMount, as values

 

unmount (if necessary)

 

Issues with Garden

learning clojurescript

 

low-level, no libraries 

 

integration with sass or postcss (@import "susy")

 

compile errors, spell checks

 

tools and gui

need a engineer who is a designer

Demo

let's create a storyboard-style magazine layout

Initial Content

(swap! app-state assoc-in [:content :logo] "/img/logo.png")

(css (merge
        (images/photos)
        grid-styles
        typography-base))

(reset! app-state new-content)

 

iterate: grid gutters, ratios, typesetting, edit content

There is no

perfect Grid 

a great Grid toolkit can provide tools to help designers create their own layout engine

 

Thanks, Joel Holdbrooks and David Nolen for creating Garden and Om.

 

 

don't overthink it: https://css-tricks.com/dont-overthink-it-grids/
bootstrap grid overview: http://www.helloerik.com/the-subtle-magic-    
   behind-why-the-bootstrap-3-grid-works
last "poster": joseph-mueller-brockmann
baselingrid example: http://goldengridsystem.com
movie poster: http://themanyfacesof.com/sigourney-weaver/

illustrations and logos: matt martini

Credits

References


slides
http://slides.com/priyatam/responsive-grids-with-cljs

garden
https://github.com/noprompt/garden
grid toolkit with garden (early stage)
http://github.com/facjure/mesh
live coding
https://github.com/bhauman/lein-figwheel
lein templates
https://github.com/priyatam/mala
https://github.com/swannodette/mies-om
Made with Slides.com