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

Top

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.
We use feature queries (@supports) to test if the browser supports writing modes. If it doesn't then we leave the title on top of the image and switch the color to white.
This demo currently only works in Firefox (tested with Firefox Nightly).
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 require Javascript or Pointer Events 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.
Bibliotype 2
A prototype of a long-form web reader. Based on Craig Mod's original Bibliotype project, this new version attempt to use modern technologies such as variable fonts, CSS variables and ES2015 to create a customizable learning experience.
Does vertical text affect Grid Layout?
When using writing modes to layout text, does it affect the way Grid layout works? I've prepared some Japanese Lorem Ipsum text and laid it out using the same grid layout I created for Ichi-go Ichi-e.
I need to do more research to see what looks normal for Japanese readers using vertical layouts as opposed to the rtl horizontal layout that I've seen the most.
Another area to explore will be to search and copy mixed layouts of vertical and horizontal Japanese layouts.
CSS Custom Properties
What I call CSS Variables on Steroids. It allows for much better, error tolerant, CSS variables.
Deep Dive on Variable Fonts
Now that Roboto is an almost official variable font. It's worth taking a look at what it does and how it can make our designs better and provide a better user experience.
Magazine Interview
Using a web magazine article from a Revista Paula I started formatting it to see if we could make it look good using a single variable font and grid.
I'm discovering some of the problems with stretching images into a grid container. I cannot make it stretch on both ends, so I've had to come up with an alternative while I research the reasoning why this happens.
Lo Secreto — María Luisa Bombal
Experimenting with longer form content and Variable Fonts to see how we can make the text speak in its own voice.
I'm using two variable fonts. It is working fine in Chrome but one font is not loading in Firefox and can't troubleshoot why.

Tools

Top

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.
Zenscroll
Since I decided to use navigation links I wanted it to scroll smoothly up and down. I like the way that Zenscroll doesn't require configuration for a basic setup like the one I use here.

Inspiration and Ideas

Top

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.

Fonts and Font-related tools

Top

Roboto VF
A variable font implementation of Roboto, the default font for Material Design and other products. This is a completeimplementation and it seeks full parity with the regular Roboto font from Google.
WOFF2 compressor
A tool that will compress TTF or OTF fonts to provide smaller file sizes and faster downloads. When compressing Roboto (see above) it provided better than 50% file size reduction.
Glyphhanger
The best way to reduce a font's size is to remove all characters that we'll not use. This is extra important when working with large fonts that support non-latin languages.
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.
MDN Variable fonts guide by Jason Pamental
I met Jason a few years ago at Fluent and have followed his typography work since. He does a very good and detailed work of explaining and show what variable fonts are and how they work.
An Exploration of Variable Fonts
More variable fonts
CSS Fonts Module Level 3
The current candidate recommendation for fonts on the web.
CSS Fonts Module Level 4
More recent work on web fonts, including support for variable fonts and font synthesis.

CSS Paged Media

Top

CSS Paged Media provides extensions to CSS 2 and CSS 3 modules that will allow them to work in generating high quality printed PDF or good masters for printers to work with. The best example I've seen is Lea Verou's CSS Secrets that was created as HTML and then printed using CSS Paged Media.

Browser support for Paged Media and Generated content for paged media is slim so we have to use third party tools like PrinceXML, and Vivliostyle neither of which are free :(

CSS Paged Media Module Level 3
The specification that dictates how most of the content will work when we create printable versions of our web pages
CSS Generated Content for Paged Media Module
Handles generated content like page numbers, sequential numbering and others.
PrinceXML
The first and, in my opinion, the best tool to work with CSS Paged Media.
Vivliostyle / Trim-marks Inc.
Another CSS Paged Media conversion tool.

Reference Books and Sites

Top

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.
A New Canon
A good design philosophy article.