{"id":311592,"date":"2020-05-25T07:07:59","date_gmt":"2020-05-25T14:07:59","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=311592"},"modified":"2020-05-25T07:24:46","modified_gmt":"2020-05-25T14:24:46","slug":"200-flexible-grids-inset-page-transitions-and-more","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/200-flexible-grids-inset-page-transitions-and-more\/","title":{"rendered":"200: Flexible Grids, Inset, Page Transitions, and More"},"content":{"rendered":"

The CSS inset<\/code> CSS property is like a combination of…<\/h3>\n\n\n

… top<\/code>, bottom<\/code>, left<\/code> and right<\/code>. Adam Argyle brought showed this off the other day<\/a>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As the docs on MDN<\/a> reveal, this will set the element to be set in all corners of its parent element. Nifty! Or it takes values for the edges in the same format as margin<\/code> or padding<\/code>.<\/p>\n\n\n\n

\n\n\n

Framer Web has moved to the browser<\/h3>\n\n\n

It looks pretty great.<\/a> I\u2019ve yet to design anything substantial with it yet but I love the UI\u2014the use of colors and the smart way they display critical information is quite lovely. What differentiates it from other design tools? Well, it looks like that Framer specializes in animations and prototyping; two pretty let-down features in design tools to date. But no more! Framer is looking to really change things here, and I think it shows.<\/p>\n\n\n\n

They also have a ton of examples built in Framer<\/a> to get started with:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

These are definitely worth checking out because I think from a distance it\u2019s easy to say that all design tools do a lot of similar things but… well… I think this could be different. Check out this video we did on Framer Motion<\/a> a bit ago, which is already a standout in the world of React animation. <\/p>\n\n\n\n

\n\n\n

Here\u2019s how to make Google Fonts load 20% faster<\/h3>\n\n\n

Earlier this week Harry Roberts wrote a great piece where he investigates how fonts served from Google Fonts load and how he can help us make them load even faster<\/a>:<\/p>\n\n\n\n

It\u2019s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negotiation, predictable URLs mean we can preload<\/code>, self-hosted means we can set our own cache-control<\/code> directives<\/a>, and full ownership mitigates the risks that come with leaving static assets on third-party origins<\/a>.<\/p><\/blockquote>\n\n\n\n

That said, the convenience of a service like Google Fonts cannot be overstated. Their ability to serve the tiniest possible font files tailored to specific user agents and platforms is amazing, and with such a huge, freely-available library served from Google-grade CDNs\u2026 I definitely see why people continue to turn to it.<\/p><\/blockquote>\n\n\n\n

The trick here is really 3 things: using preconnect<\/code> on the Google Fonts URL:<\/p>\n\n\n\n

<link rel=\"preconnect\"\n      href=\"https:\/\/fonts.gstatic.com\"\n      crossorigin \/><\/code><\/pre>\n\n\n\n
Then preload<\/code>ing the fonts and setting it to use display: swap<\/code>:<\/p>\n\n\n\n
<link rel=\"preload\"\n      as=\"style\"\n      href=\"$CSS&display=swap\" \/><\/code><\/pre>\n\n\n\n
($CSS<\/code> is the URL that Google gives you after you\u2019ve selected which font you want). <\/p>\n\n\n\n
And finally we need to use a rather clever trick with the stylesheet:<\/p>\n\n\n\n
<link rel=\"stylesheet\"\n      href=\"$CSS&display=swap\"\n      media=\"print\" onload=\"this.media='all'\" \/><\/code><\/pre>\n\n\n\n
This is using Filament Group\u2019s smarty pants trick of using that Scott Jehl wrote about in The Simplest Way to to Load CSS Asynchronously<\/a>. It\u2019s a nifty trick that\u2019s worth keeping in the ol\u2019 toolbox, that\u2019s for sure.<\/p>\n\n\n\n
This reminds me: Scott\u2019s new video course, Lightning Fast Web Performance<\/a>, dropped the other day. In it, he walks us through how to make a website load as quickly as the speed of light. Scott looks at the dev tools, the tricks, and the theory behind why websites need to be fast.<\/p>\n\n\n\n
\n\n\n
Flexible grids are the coolest!<\/h3>\n\n\n
In this post<\/a> (part of our in-progress book of the best CSS tricks), Chris takes a gander at CSS Grid and how to make a column layout that doesn\u2019t declare the number of columns or rows, but automatically instead. Chris calls this \u201cthe most famous and useful code in all of CSS Grid\u201d<\/em>:<\/p>\n\n\n\n
.grid {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}<\/code><\/pre>\n\n\n\n
What we\u2019re doing with that last line of code is saying \u201cI want a grid with infinite columns, but each column must be at least 200px and always the same width as each other.\u201d That\u2019s certainly a mouthful but it\u2019s extremely powerful. I tend to forget this each time I need it so I\u2019m jotting it down again for the future, too.<\/p>\n\n\n\n
Speaking of CSS Grid… even when you’re just trying to have a bunch of boxes fall into a horizontal row, which is often flexbox territory, you can use grid for that also<\/a>:<\/p>\n\n\n\n
.grid {\n  display: grid;\n  gap: 1rem;\n  grid-auto-flow: column;\n  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));\n}<\/code><\/pre>\n\n\n\n
Still flexible! And supports gap<\/code>, which flexbox is only just starting to.<\/p>\n\n\n\n
\n\n\n
Enhance your Page Transitions <\/h3>\n\n\n
Native-like transitions have always been a thing that web developers have looked at and been enraged with pure jealousy because getting those types of animations to work for everyone can be a bit of a giant un-ending pain. But! Sam Smith has taken a look at how to progressively enhance them<\/a> so they do just that. He writes:<\/p>\n\n\n\n
Page transitions on the Web are typically very abrupt – you click a link, then the browser replaces the current page with the new one, as quickly as it can. This is a good starting point, and perhaps sometimes what we want, but a more gradual transition can be easier for people to follow. Visual transitions are what we are used to in the “real world”; sudden changes don’t tend to happen, aside from perhaps a power outage (which is never welcome). Animating transitions can offer continuity and make it easier to retain context.<\/p><\/blockquote>\n\n\n\n
Sam does all this with the help of barba.js<\/a>, a handy dandy animation library.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
Interested in more about page transitions?<\/h3>\n\n\n
They are a big deal, as it is one thing that native apps tend to do much better than websites and it can give them a UI\/UX edge sometimes. <\/p>\n\n\n\n