Layout Demos by Jen Simmons

> http://bit.ly/24cknxu
>
> The Experimental Layout Lab of Jen Simmons
>
> Check back often. This will keep changing.
> Includes the demos for:
> Revolutionize Your Page: Real Art Direction on the Web
> Progressing Our Layouts
> Modern Layouts: Getting Out of Our Ruts
>
> Shape Outside
> Tomato: shape-outside: circle
> Tomato: shape-outside: circle
> [on CodePen]
> Egg: shape-outside: ellipse
> Egg: shape-outside: ellipse
> [on CodePen]
> Grapes: shape-outside: polygon
> Grapes: shape-outside: polygon
> [on CodePen]
> Clip Path
> Simple Image Cropped by Clip Path
> Simple Image Cropped by Clip Path
> [on CodePen]
> Initial Letter
> A Drop Cap
> A Drop Cap
> [on CodePen]
> A Raised Cap
> A Raised Cap
> [on CodePen]
> Bug-fix 1
> Bug-fix 1
> [on CodePen]
> Bug-fix 2
> Bug-fix 2
> [on CodePen]
> Object Fit
> How photos work: fixed v fluid v. object-fit
> How photos work: fixed v fluid v. object-fit
> [on CodePen]
> Object Fit — comparing values
> Object Fit — comparing values
> [on CodePen]
> Grace Hopper Cover Page demo
> Grace Hopper Cover Page demo
> [on CodePen]
> “Cover sheet” Demo
> Typical Header with title & background, the height of the space needed
> Typical Header with title & background, the height of the space needed
> [on CodePen]
> Cover Sheet Header, taking up 100% of viewport
> Cover Sheet Header, taking up 100% of viewport
> [on CodePen]
> Cover Sheet Header, with tweaks for old IE
> Cover Sheet Header, with tweaks for old IE
> [on CodePen]
> Image Gallery Study
> Image Gallery, with no image layout
> Image Gallery, with no image layout
> [on CodePen]
> Image Gallery Old School Floats, Broken
> Image Gallery Old School Floats, Broken
> [on CodePen]
> Image Gallery Old School Floats, Squares
> Image Gallery Old School Floats, Squares
> [on CodePen]
> Image Gallery in Flexbox Rows (only works in Firefox, img {width: 100%})
> Image Gallery in Flexbox Rows (only works in Firefox, img {width: 100%})
> [on CodePen]
> Attempt at Gallery in Flexbox Rows (with img {width:auto} & smaller images)
> Attempt at Gallery in Flexbox Rows (with img {width:auto} & smaller images)
> [on CodePen]
> Image Gallery in Flexbox Columns
> Image Gallery in Flexbox Columns
> [on CodePen]
> Image Gallery in Multicolumn Layout
> Image Gallery in Multicolumn Layout
> [on CodePen]
> Image Gallery in CSS Grid: 7-column Symmetrical
> Image Gallery in CSS Grid: 7-column Symmetrical
> [on CodePen]
> Image Gallery in CSS Grid: TBA (awaiting implementation of more Grid spec)
> Image Gallery in CSS Grid: TBA (awaiting implementation of more Grid spec)
> [on CodePen]
> Jazz Poster Grid Demo
> Original Poster
> Original Poster
> Jazz at Lincoln Center Poster
> Jazz at Lincoln Center Poster
> [on CodePen]
> Rotated boxes
> Rotated boxes
> CSS Mondrian Grid
> Original Artwork
> Original Artwork
> Mondrian Art — 1
> Mondrian Art — 1
> [on CodePen]
> Mondrian Art — 2
> Mondrian Art — 2
> Mondrian Art — 3
> Mondrian Art — 3
> Mondrian Art — 4
> Mondrian Art — 4
> A Study of Flexbox vs Grid
> Study 1: A Grid of Boxes, 4 Ways
> Study 1: A Grid of Boxes, 4 Ways
> Study 2: That Same Grid of Boxes in Just Grid
> Study 2: That Same Grid of Boxes in Just Grid
> Multicolumn
> Multicolumn 1
> Multicolumn 1
> Rotation
> Rotation 1
> Rotation 1
> Rotation 2
> Rotation 2
> Rotation 3
> Rotation 3
> Rotation 4
> Rotation 4
> Under Construction Ideas
> Simple Vertical Scroll Snap
> Simple Vertical Scroll Snap
> TBA: Article Experiment 1
> TBA: Article Experiment 1
> Combining Shapes + Clip-path
> Combining Shapes + Clip-path
> New Order Movement
> Original Album
> Original Album
> New Order Movement
> New Order Movement
> Want to fork this on Github? You can. All the code for the examples are in the /examples/ directory.
http://%3E

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s