Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Great State of Design with CSS Grid Layout and Friends

Stacy Kvernmo
December 03, 2016

The Great State of Design with CSS Grid Layout and Friends

For far too long we've been forced to reuse layout patterns that have worked in the past, creating a web full of sites that all look the same. Narrow timelines, browser support restrictions and lack of a true grid system have led us to create work that is "good enough".

I've spent years exploring how we can make the web a more unique space. With some of the newer CSS techniques available, we can start to make more creative designs. CSS Grid Layout is on the horizon and will play a major role in the design of our sites. Finally having a true, 2 dimensional grid will give our layouts much more flexibility and it is on us to explore the possibilities.

This talk was given at CSS Day 2016.

Stacy Kvernmo

December 03, 2016
Tweet

More Decks by Stacy Kvernmo

Other Decks in Design

Transcript

  1. Steve Jobs Your work is going to fill a large

    part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. ‘‘
  2. a feeling of being satisfied with how things are and

    not wanting to try to make them better noun | com·pla·cen·cy | \kəm-ˈplā-sən(t)-sē\ complacency
  3. If I had asked people what they wanted, they would

    have said Henry Ford faster horses. ‘‘
  4. If I had asked people what they wanted, they would

    have said Henry Ford faster horses. ‘‘
  5. KLPA (Joshua Kulpa) Andy Clarke, “Counting Stars: Creativity over Predictability”

    ‘‘I fear that we're creating a web the full of safe designs because we’re driven by the need in some of us for predictability, reliability and for repeatability …
  6. Prague’s new coffee scene ◇ Making bikes with bamboo The

    enduring craft of screen printing ◇ Discover Riga Hand-made soap ◇ Manhattan’s fashion collaborators The sugar shacks of Quebec ◇ How to taste coffee Digital Edition, Autumn 2016 craft & create Artist Spotlight Shyama Golden Shyama Golden, 1 known for her huge, humorous paintings, has transitioned from being a graphic designer to an illustrator and, more recently, from oil paints to the iPad. interview Elliot Jay Stocks artwork courtesy of Shyama Golden Did you always want to be an illustrator? Yes — I’ve been drawing ever since I was really little, but I studied graphic design when I went to col- lege, and pretty much worked solely on graphic design for 10 years after that. However, the school I went to was really focused on studio art; it was more traditional, I think, than most schools. I did a lot of screen printing too, which I love because it uses both the problem- solving skills of a designer and the drawing skill of an illustrator. I stuck with graphic design for a really long time, but there was always a part of me that wanted to draw more. Recently I’ve transitioned into doing that: these days I do branding and identity design as a part-time job, and spend most of my time doing illustration. Even with 80 1. shyamagolden.com 95 With its origins seated deeply in the past, the process of screen printing continues to intrigue people, with the craft seeing a revival in modern times. Screen printer Jonny Akers walks us through screen printing’s origins and current incarnation. craft & create words Jonny Akers photographs Elliot Jay Stocks Enduring Crafts Screen Printing craft & create E N D U R I N G C R A F T S Screen printing in its basic form dates back over 2,000 years. Whether it be cutting shapes from banana leaves to make a stencil and forcing ink made from natural pigments through them, or making frames stretched with human hair to form a mesh, people all over the world have been using screen printing to reproduce imagery for quite some time. I encountered screen printing for the first time in 2004 while studying a fine art degree in Leeds. After a brief introduction to the printmaking facilities, I used screen printing on and off throughout my degree, but I never realised how involved I’d become with the process in the future. Today I run a wedding stationery business called The Old Market Printing Co 1 with my wife Charlotte. With her hand-lettering, illustration, and contemp- orary designs, we use heavyweight paper stock, and metallic and neon inks to make clean, modern, alter- native wedding stationery. Making and printing by hand is something I’m passionate about, and one reason why I’ve never ventured into automatic printing machines. I feel that once you’re no longer pulling ink through the screen by hand, the process is too commercial and loses part of the magic of printmaking. While I’m printing by hand, I’m still in full control of the finished print, and it contains more of the experience and skill that I’ve obtained over the past 10 years. And I’m not alone in my passion for screen printing by hand. Recently, there’s been a huge revival for all things artisanal, with screen printing included. Various websites have emerged, selling rudimentary illustration Ed J Brown 1. theoldmarketprintingco.com
  7. -1 grid-column: 1 / -1; -1 = value used to

    span the remaining row/column
  8. [ line-name ] size [ line2-name another-name ] size grid-area:

    row-main / col-large / row-gallery / col-small; grid-area
  9. dense - fill in holes earlier in the grid if

    smaller items come up later sparse | dense & row | column grid-auto-flow
  10. all together now repeat( auto-fill, minmax( min size, max size

    ) ) grid-template-rows: repeat(auto-fill, minmax(300px, 1fr) ) ;
  11. start | end | center | stretch | space-around |

    space-between | space-evenly justify-content: start; justify-content
  12. align-content start | end | center | stretch | space-around

    | space-between | space-evenly align-content: start;
  13. Wilson Miner “When We Build” ‘‘We’re actually in the process

    of building an environment where we’ll spend most of our time for the rest of our lives …