Hello and welcome to RWD Weekly Edition #272.
This week I decided to repay one of the older articles on RWD.is and have a look at multiple columns with CSS column-count. I found that by applying the column count to a parent container vs a direct container will have different effects (as you would usually expect, but these were surprising for me).
Let's say that we have the following HTML markup for both cases:
<div class="container">
<h2>Multiple Column Example</h2>
<div class="columns">
<p> content.... </p>
....
<p>content....</p>
</div>
</div>
I left the <h2> outside of the columns because I didn't want the header to be a part of the content in the columns (it looked weird).
The first pass I then applied the following CSS
.columns {
column-count: 3;
column-gap: 2em;
}
This divided the content equally(ish) between three columns but due to the amount of content I had, there was some scrolling involved. I then applied
.container {
height: 100vh;
}
to see if I could balance out the columns a little more while keeping everything within the viewport. You can see this example in this codepen.
That didn't work so I tried applying the same rule against the columns themselves
.columns {
height: 80vh;// set to 80 because the h2 takes up the top part of the screen
column-count: 3;
column-gap: 2em;
}
This didn't just keep the content within the 3 columns, but instead provided three columns within the current viewport, kept the height of the columns to 80vh, and then extended additional columns horizontally to contain the remainder of the text... kind of like a newspaper layout approach. You can see this in work on this code pen.
I'm not sure if that's helpful or a surprise to anyone, but I thought it was neat.
Headline A great blog post from Tammy that looks at the increasing size of the average web page. She takes a look at what 'average' actually means and whether the overall size of a webpage is the right metric to be looking at.
Lets take a look at the highlights - Moved from Less to Sass.
- Flexbox and an improved grid system.
- Dropped wells, thumbnails, and panels for cards.
- Forked Normalize.css and consolidated all our HTML resets into a new CSS module
- Brand new customization options.
- Dropped IE8 and IE9 support,
- Rewrote all our JavaScript plugins
- New build tools completely rewritten in npm scripts
And so much more! Custom form controls, a redesigned carousel, an overhauled navbar, HTML5 form validation styles, hundreds of responsive utility classes, new components, and more have also been included.
Please take part in this image survey so that Jeremy Wagner (who wrote the article on paint timing api this week) can work out what good and bad images are based on user feedback. | | | Casper is an internet sensation, with thousands of five-star reviews and countless awards. The Casper mattress is obsessively engineered and sleeps cool. Plus it ships for free, straight to your door in a "how did they do that?" sized box. Use our special RDWEEKLY offer code for $50 off a Casper mattress for the new era of comfort. Try it risk-free for 100 nights. | | Articles I've been loving Vitaly's new deep dives into specific common UI elements and this week is no different. Comparision tables are something that are on every other website yet I'm constantly seeing issues with most of them and wondering why.
A refreshing piece from Christian about stepping away from the fast paste of our industry and learning to look after yourself.
There's been an update to the way that Web Page Test will handle tests now by making everything Private unless explicitly changed to public. This shouldn't mean anything to your usage, but it means that people won't be able to easily scrape the results and send emails to people.
Zach has put together a small style guide for his personal site to keep a watch on future updates to the CSS. It gives him the ability to easily look through all the components that have been built up over the years, almost like a reminder as to what resources you have to use for your next article.
Tutorials This week I was working on something similar to this, and although I ended up going with another solution this is an interesting way to branch your content out horizontally. To start with you'd want this vertically though... y'know the whole mobile thing.
Why is this metric important to know? Because it signifies to us the earliest possible point at which something appears after a user requests a page. The article shows you how to use the Paint Timing API to write to your own metrics to the console, or you can take it further and write them out to Calibre, Speed Curve, or Google Analytics
Allowing users to POST content/forms while offline using progressive web apps, and more specifically using the service worker.
A great flow diagram to decide whether or not you should be using a web font or just roll with systems fonts. While I use web fonts on the RWD site I'm working towards changing this and seeing the results.
I love the approach that the Government Digital Service in the UK has taken.
You can also just use <picture> and allow the browser to decide which image type should be loaded.
Combining a black stroked SVG on a white background, and then applying a blend mode with a gradient layer we get this lovely new approach to styling icons.
Plugins, Resources, & Tools Hologram is a pioneer Desktop app that let you create and prototype WebVR in interactive and fun way. It requires no previous coding knowledge, so anybody can start designing cool VR experiences. It only takes a few steps.
This chrome plugin allows you to set styles for a domain that will stick with you as you navigate through the site. Great for making small test changes to certain pages and seeing how they might affect other areas with your production site.
TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.
Lighthouse has had an upgrade. If you haven't seen lighthouse before it is _the_ tool when it comes to testing your site from a PWA point of view, ranking it out of 100 and providing a series of hints and tips on how to get there (if you're not already).
That's it for this week. If you like our RWD site of the week, Milwaukee Ballet, be sure to check out the review in the examples section. Also if you've seen a great responsive site and want to know how they put it together please hit reply and let me know and I'll add it to the list.
See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment