Layout experiments

I've been really excited about recent developments in web layout. I've finally decided to get my act together and start building layouts using these new tools. I don't know how many of these layouts will make it to a production site but it's always fun to play with them.

A grid is truly successful only if, after all of the literal probblems have been solved, their designer rises abovethe uniformity implied by its structure and uses it to create a dynamic visual narrative of parts that will sustain interest page after page.

Timothy Samara -- Making and Breaking the Grid

Examples, Demos and Projects

Index
This page. First experiment placing content in a grid.
Demo 1: Ichi-Go Ichi-E
The basic document I'll be working with.
Demo 2: Text in masthead
This is my version of the text covering part of the masthead image.
I chose not to brek the content into multiple sections but chose to change the background color of the content div to match that of the document background.
Demo 3: Vertical Title
Take the title content and use writing modes to place it verically in browsers that support the CSS rules. I've used feature queries to check that the browser supports writing-modes.
This demo currently only works in Firefox.
Demo 4: Two column Floater
My attempt at creating a document with a single image on one side and scrolling text on the other. The first attempt is a single column of text using an actual article from eldesconcierto.cl
Demo 7: Flexbox Gallery
The simplest way to create an image gallery.
Houdini Gradients
Gradient demos using Houdini APIs. The example gradients uses CSS.registerProperty() to define a --stop-colorproperty that is used in the stylesheet to create a gradient. We then create a hover state for each gradient and animate that.
Currently only works in Chromee 67+
CSS Filters
Creating effects with CSS is not as complex as it used to be (they don't require SVG) and they are farily easy to set up. Set an initial filter (grayscale in this case) and then set an effect that will work on hover (remove the grayscale effect to reveal the original color).
One further area of exploration is combining different filters to test the results.
CSS only solution hover only works on desktop machines. Mobile devices don't have a hover state and would probably require Javascript to work consistently accross devices.
Do weight, width and line height affect readability?
Using Roboto VF implementation I've configured a quick experiment to prove the hipothesis. There are 4 blocks of text at different widths and one with multiple columns and 3 variables you can adjust (font weight, font width and line height).
The idea is that we can take the values and plug them in to our production stylesheets as a starting point for further experiments.
Also, please forgive the code... I know it's messy but it's the first time I do sliders to control CSS from Javascript.
This currently doesn't work in mobile. Researching the reasons and suspecting Mobile Safari and iOS stack for it. It did not work on iPhone X.
Blending Colors Example
The web allows you to create many of the graphical effects that we see in magazines and other printed media. Based on the pen Vertical split layout text effect by Mandy Michael. I started playing with the idea of using the effect for headings or other highlighted elements.
Blending Text and Images
Code adapted from the article on The New Code by Dudley Storey about creating text masks using blend modes.
This may not work in older browsers that don't support blend modes. This example prioritizes text over the image.
Font Specimen Collection
Using a template by Tim Brown'sidea that we should test all out fonts with actual text (no Lorem Ipsum) before deciding if the font works for the project you're working on.
The links to the different font stacks are not working. Trying to figure out how to fix them (and with what).
Book Chapter with Roboto VF — V1
Using a manual transcript of chapter 73 of Rayuela, I built an example of what a page of that book may look online. A next step will be to test is different starting width for the content impact the reading experience.
Book Chapter with Roboto VF — V2
Using a manual transcript of chapter 73 of Rayuela, I built an example of what a page of that book may look online. This version makes the content narrower.
CSS Houdini Image Place Holders
Using a demo from Will BoydI built a mock of a Wikipedia page using his placeholder boxes to mock the placement of the images.
Yes, I know I could use SVG to do so and it may be a good idea when working with Service Workers to provide a good offline fallback but this way I can play with the dimensions of the place holder and see how it looks at different dimensions before deciding on the final image.

Tools

Most of these tools are Javascript based so I may have to start thinking about concatenating scripts and, possibly, bundling them together.

Font Face Observer
Font Face Observer gives you control over web font loading regardless of where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.
Rellax
I'm exploring using Parallax in a few experiments so I've been looking at what may be the best tool for the use cases I want and, so far, Rellax seems to be the best.
The New Defaults
Dudley Storey's SASS replacement for the standard CSS keyword color system. Available in Github.
GSAP JS
While we can do a fair amount of animations with CSS alone there are times when we need the heavy hitter tools. That's where GSAP comes in.

The tools below are for reference and help in generating CSS for some Variable font data that I may want to use.

Axis Praxis
Axis Praxis was the first site that showed me what Variable Fonts can do.
Wakamainfondue
This tool works with Variable fonts and it shows you what the font can do, creates special CSS for you to use in your documents when working with the font and gives you the CSS to download for your own projects :).
Variable Fonts
Variable fonts is another playground for Variable fonts. What distinguishes it is the number of fonts available and the ability to play with the custom axes for each font and see the results on the same page.

Inspiration and Ideas

Bibliotype
One of the earliest ideas on digital publishing outside closed ebook ecosystems. I've been wondering how much more we can do with web technologies as they exist today as opposed to what was available in 2011.
Demo at http://caraya.github.io/bibliotype/
Variable Font Demos by Jason Pamental
One of the first collections of applications of Variable Fonts.
Variable Font Demos by Mandy Mitchell
Another collection of experiments using Variable Fonts.
The work of Rachel Nabors
I think I fell in love with her web animation work when I heard her speak at SFHTML5.
The work of Sarah Drasner
Starting with her work with SVG animations and her SVG Animations book she has always impressed me with her skills and how she can translate complex animation work to easy to understand concepts.

Reference Books and Sites

CSS: The Definitive Guide
The latest version of my favorite CSS book. Eric Meyer and Estelle Weyl do a very thorough and exhaustive analaysis and explanation of CSS and its different components.
The Experimental Layout Lab of Jen Simmons
I love the work Jen has done in teaching, writing and demoing web layout technologies.
The New CSS Layout
Grid By Example
Awesome resource to learn about CSS grid.
The Elements of Typographic Style Applied to the Web and Web Typography, the book it originated
These two projects take Robert Bringhurst’s The Elements of Typographic Style and applies its principles to working in the web and with web content.
Responsive Typography by Jason Pamental
Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography?
Flexible Typesetting by Tim Brown
I've always thought of typography as part of the design proces not as first step in working the content in to your site or app. Reading this book is making me think morre about the text I'm working with and how to provide a good reading experience.
On Web Typography by Jason santa MarĂ­a.
This, to me, is the original typography book. It's a great reference for typography on the web, both the technical and the human side.
 
Webfont Handbook by Bram Stein
This is a more specific book on using web fonts.
Introducing Variable Fonts
Good technical introduction to Variable Fonts. Not for beginners.
Introduction to variable fonts on the web
This article by Mustafa Kurtuldu (Design Advocate at Google) does a good job of introducting variable fonts without the technical language from the previous article. It also introduces the CSS needed to make variable fonts work on browsers.
One File, Many Options: Using Variable Fonts on the Web
CSS Tricks article on Variable Fonts. It's the gentlest introduction article I've found, so far.