this is rachelandrew.co.ukhttp://rachelandrew.co.uk/archives
Blog of Rachel Andrew, web developer, writer and public speakerEditorial Layouts, Exclusions, and CSS Gridhttps://www.rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/
https://www.rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/
A little while back at An Event Apart Chicago, I chatted to Rob Weychert about a grid use case he felt the spec couldn’t solve. He has now written that use case up, which you can read on his blog - Editorial Layouts, FLoats, and CSS Grid.

At the time I thought that this sounded like an Exclusions use case, and I’ve taken his demo and created a version which uses CSS Exclusions. To see the demo working you will need to use Edge.

A CodePen version of the example at the end of Rob’s article can be found here.

For the Exclusions version, both the image and the text need to be direct children of the grid. We then position the image using CSS Grid, and the content. This will result in the image and content overlapping, and is what you will see if you visit the demo in any browser other than Edge.

This is where the exclusions comes in, we apply -ms-wrap-flow: both to the image as the wrap-flow property is prefixed in Edge. As the image comes first in the source I also needed to give it a higher z-index than the content. In Edge the text will now clear the image on all sides.

The neat thing about the Exclusions version is that Exclusions are not limited to floating up and left or up and right. You could place the image anywhere on the grid and wrap the text around it. This would make creating thngs like pullquotes far easier too.

Exclusions would be such a great addition to our set of layout tools if we had wider implementation. For more see and earlier post here on CSS Exclusions and Grid Layout.

]]>
Fri, 09 Nov 2018 13:39:00 +0000The Way We Talk About CSShttps://www.rachelandrew.co.uk/archives/2018/10/04/the-way-we-talk-about-css/
https://www.rachelandrew.co.uk/archives/2018/10/04/the-way-we-talk-about-css/
I’ve been writing new talks, creating new workshop material, and thinking about how best to teach CSS as we head all too quickly towards 2019. One of the things I’ve been thinking about is how we have typically thought about CSS, and how that should be changing given where the language is now.

CSS has been seen as this fragile language that we stumble around, trying things out and seeing what works. In particular for layout, rather than using the system as specified, we have so often exploited things about the language in order to achieve far more complex layouts than it was ever designed for. We had to, or resign ourselves to very simple looking web pages.

However that has changed. Over the last few years CSS has developed a real layout system, one which has been designed for the complexities and challenges of the environment we work in. That system isn’t Flexbox, nor is it Grid Layout. It is these specifications and more and, as so often is the case, it is the behind the scenes elements and not the star players, that really pull everything together as a system.

On the web we can never be sure how much space we have, so CSS gives us alignment properties based on the distribution of available space. No available space? That’s ok. Nothing is going to break. We often don’t know how much content we have, so CSS gives us sizing based on min and max content sizes, allowing items to grow and shrink into their containing boxes. We don’t necessarily know the direction text is flowing on the page, so CSS gives us the ability to size, align and place our items relative to the flow of text rather than the physical dimensions of the screen. These features are part of the Box Alignment, CSS Intrinsic and Extrinsic Sizing, Writing Modes, and Logical Properties and Values specifications. These specifications tie together the individual layout methods into one system, with various methods to create the type of layout we need to see.

We do that system, and our ability to use it in an elegant way, a disservice if we simply concentrate on the properties and values in the big-name specifications of Flexbox and Grid.

Modern day specifications are incredibly detailed. It’s why we have so few interoperability bugs in CSS Grid Layout. Things are not left to whatever the user agent decides, if a decision has to be made it is made at the spec level, to ensure that all user agents interpret it in the same way. So when I see people writing and speaking about CSS pointing to some behaviour and saying, “oh this behaves in a weird way”, I want to ask them (and sometimes do) if they have looked to see why it is behaving like that. Most of the time, if you look at the spec, you find that the answer is not all that weird. In general, if all of the browsers are doing that weird thing in the same way, it has been specified to behave like that. Perhaps we should start reframing the way we talk about these things. They are not weird, we just haven’t identified the reason yet. Perhaps because we who have been doing this for such a long time, don’t always expect there to be a reason.

There is frequently talk about how developers whose main area of expertise is CSS feel that their skills are underrated. I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else. However we can start to understand it as a designed language, with much consistency. It has codified rules and we can develop ways to explain and teach it, just as we can teach our teams to use Bootstrap, or the latest JavaScript framework.

There are things in CSS that are not intuitive, or seem at odds with the rest of the system. Many of those are due to legacy reasons and the fact we can’t break the web, however they can be read about and understood. We know these things exist. The fact they exist does not prevent us from moving forward to redefining our understanding of CSS as used for layout. An elegant system, far more powerful than any framework, designed for the realities of a flexible, multilingual, multi-device web. Then, as we push at the edges of that new system, to find the gaps, the things we cannot yet do, and help to make the next phase a reality.

]]>
Thu, 04 Oct 2018 14:12:00 +0000Why I'm moving from MacOS to Windowshttps://www.rachelandrew.co.uk/archives/2018/08/21/why-im-moving-from-macos-to-windows/
https://www.rachelandrew.co.uk/archives/2018/08/21/why-im-moving-from-macos-to-windows/
Over the past week I’ve been moving my primary development machine from a Macbook Pro to a Surface Book. I will write up some of the detail of actually switching, however this post is essentially because I keep answering the same questions over and over again on Twitter. Therefore here it is for those who seem to be far more interested in what I’m typing on than I am. The answers to the questions and “statements” from Twitter.

What prompted the move?

Apple hardware, and being tired of being locked to it. The breaking point was the Touchbar Macbook Pro. I’ve had it just over a year, it has caused me to need to borrow a computer just before walking on stage to present twice. It has a battery life of 2 hours. The keyboard stops working when it gets warm. The fact that these issues are widespread, and it isn’t just me with a lemon, is concerning. If I were to replace it, would I just end up with the same problems? There is no choice when you run MacOS and need a portable, Pro-level machine.

Which Windows machine do you have?

A Surface Book 2. It has decent battery life, a lovely keyboard, and seems very stable. However the particular hardware isn’t what I’m switching for - in fact the opposite. I’m switching so I don’t need to have particular hardware.

Let me explain hardware to you.

No need. I built my own desktops for years. I’m a little out of date in terms of which components I’d pick if I were to do so now, but I know a reasonable amount about hardware. Enough to make my own decisions as to when stopping using a particular brand of hardware is a good idea. I am pretty sure that there would be a lot more people dropping Apple hardware if they had the option to run MacOS elsewhere. And yes, I do know about the “Hackintosh”, I’m trying to get more stability, not less!

Linux exists.

Yes it does. I’m a decent Linux sysadmin, I also ran Linux on the desktop as my main computer for years. I would have loved for Desktop Linux to become a real competitor, and for major tools to become available for it, but that hasn’t happened. I travel for 50% of the year so I need one portable computer that is powerful enough to do all of the things I want to do. It needs to run MS Office, Adobe products and either Keynote or PowerPoint. It also needs to run VMs and Docker and allow me to develop (in PHP) and to run the various tools I use for the different things I do. I promise you I am aware of all of the alternatives to MacOS and Windows only tools. I ran Desktop Linux for years. However, I don’t want to be battling with software to do my job, and especially not when I’m on the road and don’t have easy access to another computer.

As it happens I use Linux every day, and Windows now has the WSL and I can run Linux right there on my Windows machine. This is actually an improvement over MacOS, things that I would typically need to run inside a Docker container, I can run in bash on Ubuntu without needing Docker.

Keynote or PowerPoint, why not use an HTML slides solution?

I keep trying these things, but I go to a lot of conferences and I see a lot of people present, and I rarely see anyone battling to get Keynote or PowerPoint to work on stage. I consistently see people presenting from their HTML solution and needing to show all their browser chrome or just having huge issues getting the thing to work at all. I love the idea of being able to build my slides in HTML and CSS, however the important thing when I’m presenting is my audience and their experience of my talk. My convenience when creating the talk is nowhere near as important as their experience when watching it. I have yet to see an HTML slide solution that is robust enough for me to feel confident in using it. I’d rather use the solution I know works. You do you. I’ve seen great talks that really use the fact they are being presented on web technologies, but for the sort of presentations I do, Keynote or PowerPoint work well right now.

For those who have emailed to tell me online slide solutions exist, those are great if you are presenting in a room with great wifi. However, conference wifi is often less than great. Why add the additional peril of needing an internet connection to essentially show some pictures?

But Windows … eww

Have you actually used it recently? More seriously I’ve been bemused by some of the reactions to my questions around switching, however I have never been someone who treats the devices I own as anything more than tools that help me do my job. I have no deep affection for Apple, or any other company. If a tool stops being useful, or a particular brand of that tool lets me down, I find an alternative. Windows is a decent alternative, and gets me away from a reliance on what Apple may or may not ship. Even if they ship an update to the MacBook Pro line which doesn’t have the issues of the one I own, I’m happy to have broken the connection between my OS and my hardware.

]]>
Tue, 21 Aug 2018 07:56:00 +0000Coming to a browser near you - faster than ever before!https://www.rachelandrew.co.uk/archives/2018/08/07/coming-to-a-browser-near-you-faster-than-ever-before/
https://www.rachelandrew.co.uk/archives/2018/08/07/coming-to-a-browser-near-you-faster-than-ever-before/
Back in 2001 I became a member of the Web Standards Project (WaSP). For over fifteen years, I’ve been working to try to ensure an interoperable and open web.

I’ve seen the web during the browser wars, where new features were shipped by browsers trying to gain a competitive advantage, in a process that meant web developers had to build two versions of their websites in order for them to work in Netscape and Internet Explorer. I wrote tutorials and Dreamweaver Extensions to help people move on from Netscape 4. I remember how excited we were about the relatively good support for CSS in IE6, and the pain of the stagnation of the platform when that browser was not updated. Throughout, I’ve tried to figure out and encourage best practice, to use my ability to explain things to help people make the best of the tools we have. It has always been an imperfect environment, well suited to a person like me with no formal training but an ability to solve problems and then explain the answers.

Putting together an issue of my weekly CSS Layout newsletter today, I included a blog post from the Chrome team about the features going into Chrome 69 - Scroll Snap, logical properties and more. In addition a managed approach to a spec change which impacts the Chrome implementation. If you have used percentages in row track sizing or gutters, the console will flag a warning so you know to change your code before Chrome 70 ships.

Firefox will be shipping Variable Fonts in Firefox 62, Variable Fonts are already supported in Chrome, Safari and Edge. Firefox will also be shipping CSS Shapes in Firefox 62, along with an excellent inspector to help you work with Shapes. These are just a very few of the many things happening in CSS and in browsers right now. The pace that things are shipping, and at which bugs are fixed is like nothing we have seen before. I know from sitting around a table with representatives from each browser vendor at the CSS Working Group how important interop is. No-one wants features to be implemented differently in browsers. This is what we were asking for with WaSP, and despite the new complexity of the platform, browsers rendering standard features in different ways is becoming increasingly rare. Bugs happen, sometimes in the browser and sometimes in the spec, but there is a commitment to avoid these and to create a stable platform we can all rely on. It is exciting to be part of it.

You can be part of it too, anyone can log bugs in browsers, or against specs. Anyone can try out new features and write up their findings, show their examples. We can all promote web platform features that we find interesting, to show that there is interest from developers. I know we all have limited time, we all have to earn money as well as play with interesting things. Yet due to the speed at which things are shipping now, the input you make today is going to be helpful to you far more quickly than ever before. You can help to shape and improve things that you can use in production within months in some cases. We’ve never had it so good.

I know posts like this can come across as a little like a discussion between the Four Yorkshiremen, however I still see people acting as if the web platform today is the same as the web platform ten years ago. Take it from one who was there, things are remarkably and excitingly different.

We nearly missed you at Battersea Old Windsor. Beth spotted you, shivering and scared in your cabin. The staff were keen to find a good match for this family who had never owned a cat before. A first cat, a cat who had no special needs, who just needed a place to call home. You were just right. You needed some dental work doing, so you stayed in the care of Battersea while that happened. We came to visit you in your enclosure there, and you immediately favoured Drew.

When the day came to take you home, I signed the forms. One of the things I had to agree to was that you wouldn’t be a performing animal. This made us all laugh, as I explained that I already had a performing child, so the very last thing I needed was a performing cat! I also had to agree that if we couldn’t take care of you any more, I would bring you back to Battersea. You would always be a Battersea Cat.

No-one knew your backstory, or even your real age. You had been brought into Battersea as a stray. The staff had given you the name Troy. With a little help from the internet we decided on the name Widget. As with all cats you soon had a multitude of nicknames, “Widgety Woo, the Ginger Ninja, Sir Widgealot”. That first day at home with us you scuttled behind the fish tank and hid. We had been warned that it might take several days, or even weeks, before you would sit with us. However that first night, as Drew and I sat quietly, you came out from your hiding place and sat between us.

You taught us about cats. Early on, Drew was out when Beth and I heard a crash from downstairs. We raced into the lounge, to discover you looking about twice your normal size, tail like a toilet brush. We were terrified, and had no idea what had happened to you. Neither of us knew that cat hair really would stand on end, as it does in the cartoons! Our best guess is that you laid eyes on another cat in the garden, rocketed into a chair leg causing the crash, and then paraded around trying to look as scary as possible to the interloper.

I had seen the staff at Battersea holding you up against their shoulder and I would pick you up and carry you like that. Beth would carry you about as if you were a baby, and you would reach up and put your paws on her face, “no paws on face, Widget!” It took a little while for Drew to confidently pick you up and carry you, however before long your favourite place to be was with your chin on his shoulder. And you loved Drew the best.

You were always a timid cat. You never went far, even in your younger days. You preferred to hang out with us, or to be in the garden with one of us close by. You hated the move to Bristol, and we felt so bad about taking you from the home you knew. However in time you established your routines here, although you were no fan of the Bristol seagulls which would occasionally stand on our shed and shout at you.

My “no cats on beds” rule eventually fell. I would find you sleeping next to Beth, your head on her pillow. As you became older, all you wanted to do was to be close to Drew. It seemed unfair to keep you out of the bedroom. So began a nightly event of you walking directly over my head in order to get close to your favourite person.

Working from home, you were always part of our day. You would stroll into our office, and I would pick you up for a cuddle. However, you would always look to Drew and sooner or later expect a cuddle from him, to rest your chin on his shoulder and purr. You would put your paws up on Drew’s lap to request picking up if he didn’t quickly comply with your cuddle requirements.

When I returned from a trip, I would look up the stairs to see you looking at me disapprovingly as if to say, “And where have you been this time?” I would then be ignored until the next morning, when you would behave as if you had just set eyes on me. Early mornings were our time together, your cue the coffee machine springing into life on its timer to make my 5am coffee. If I wasn’t already awake, I soon would find myself face to fuzzy face, as you would come to investigate why I was still in bed. You would follow me downstairs, and if I dared to put my laptop on my lap, you would nose under it until I moved it to make space for you. We spent our early mornings that way. Me answering email with my laptop perched on the arm of the sofa, you purring and sleeping on my knee.

Your last morning at home had started as usual, but the weather was warm and humid and you had hopped off my knee to sit beside me on the sofa. I went out to the gym, and when I came back you were sat at the top of the stairs, your chin on your paw. I snapped a photo with my phone, as you looked cute and serious. Minutes later you came down the stairs gasping for breath. Drew rushed you to the vets and then to the vet hospital, where they had you on oxygen while they ran tests to find out what had happened.

Worried, but still thinking the results would come back as a treatable infection or similar, I went to speak at an event in Scotland. Drew had planned to come along but stayed to be close to you. It became apparent that you were becoming increasingly poorly, and tests had shown there was nothing that could be done to give you back any quality of life. I will be forever grateful to the gentle kindness of the people of ScotlandCSS, who switched my talk to the first slot of the day so I was able to fly home, and be there for your final minutes.

You left our lives in a room not so different to the one we had collected you from, nine years ago. You were so obviously very poorly. The vet brought you to us, every breath was a struggle for you, yet all you wanted to do was cuddle into Drew, to rest your chin on his shoulder. I held you for a little while, but it seemed right that these last minutes should be spent exactly where you wanted to be. You wanted to be close to your special friend, your favourite.

As Drew held you I signed the forms to allow this last goodbye, just as I had signed the forms which made you part of our family. The end was quick, and peaceful, with us talking to you and stroking you. A final kindness for our lovely friend.

Widget, 18th July 2018. You were the best cat, and we loved you so very much. Sleep well friend.

]]>
Thu, 19 Jul 2018 18:58:00 +0000Should I try to use the IE version of Grid Layout? Revisited for 2018https://www.rachelandrew.co.uk/archives/2018/07/17/should-i-try-to-use-the-ie-version-of-grid-layout-revisited-for-2018/
https://www.rachelandrew.co.uk/archives/2018/07/17/should-i-try-to-use-the-ie-version-of-grid-layout-revisited-for-2018/
In November 2016, I wrote an article in response to a question about Grid support in IE10 and 11. In that piece I wrote a quick rundown of what parts of the modern specification were supported in the older IE version. During a recent discussion onstage at An Event Apart, the issue of using the -ms prefixed version came up. As Jeremy Keith has documented his thoughts on that discussion, I thought I would post mine as a response to his post and also as an update to my previous article.

Should I create a fallback version specifically for IE10 and 11?

It is possible to use the -ms prefixed version to create a fallback, although it misses some features of the modern specification. The question really is, is it worth you going to that trouble for a diminishing number of visitors, when you will also need to create a fallback version for browsers which do not have grid and are not IE10 and 11. That’s three versions you are creating and, as Jeremy points out, it makes far more sense to make one fallback for everyone.

The only reason I would be considering using the -ms prefixed version at this point, would be in the following situation:

I need to do something which only grid can achieve.

And, the -ms prefixed version would be overwhelmingly better than a simpler fallback.

And, I have a large percentage of visitors in IE10/11.

If making your site look exactly the same in browsers which do not support grid as those which do support grid is that important, maybe don’t use Grid Layout. This is still a valid choice. That way you can use legacy techniques which work in modern browsers as well as legacy browsers. If you want to do something that can only be done with grid however, then you need to think about non-grid supporting browsers. This includes IE10 and 11.

In the majority of cases your float-based fallback will be just fine for all of the legacy browsers. If there was something that would be much better when using the -ms prefixed version, I wouldn’t try and do my whole layout in grid. I’d use my simple float-based legacy fallback, and in one or two places where it made sense, throw in some -ms prefixed grid to enhance the layout for IE10/11. Using the type of technique I describe in my article Pattern Library First makes that kind of component based approach much more straightforward.

An approach of enhancing browsers based on their capabilities will tend to get you the best results, whether the CSS in question is Grid, CSS Shapes or anything else. If you can enhance your layout for IE10/11 with judicious and careful use of the prefixed version, and you have the time to do so, that’s great. However you still need that float-based fallback, so start with that first.

Should I use Autoprefixer with Grid?

I would strongly suggest not.

To use Grid Layout with Autoprefixer means remembering which bits of the spec you can’t use and limiting your use of the spec. Then carefully testing to make sure Autoprefixer hasn’t blown up your layout in Internet Explorer because you accidentally used one of those bits. You are adding complexity and testing requirements, not taking them away, no matter how attractive being able to run something that promises to sort it all out for you might be. As the prefixed spec is so different, you can’t fix compatibility with an automated tool, this isn’t just prefixes. So you still have to remember a pile of stuff, in this case all of the things you can no longer use in order to use Autoprefixer. Does it really make sense, to take a spec which is implemented pretty much in entirety across modern browsers, and limit your use of it due to the fact that a particular old browser exists?

If using Grid in IE is so important to you, learn how Grid works in IE, and create fallback layouts with that spec, rather than hobbling your use of Grid in order to run Autoprefixer. However, with every month that passes, making special versions for two types of old browser makes less and less sense. Personally, I’d spend that time making my site more usable, accessible or beautiful for the majority of my users.

As Jeremy notes, the usefulness of a tool like Autoprefixer is diminishing, which is a good thing. It is becoming far easier to code in a way that supports all browsers, where support means usable in an appropriate way for the technology the user has in front of them. Embrace that, and be glad for the fact that we can reduce complexity based on the increasing interoperability of CSS in our browsers.

]]>
Tue, 17 Jul 2018 13:20:00 +0000Get Started with CSS Grid - Online Classhttps://www.rachelandrew.co.uk/archives/2018/07/16/get-started-with-css-grid-online-class/
https://www.rachelandrew.co.uk/archives/2018/07/16/get-started-with-css-grid-online-class/
Earlier this year I spent a fun day at the Skillshare offices filming a short course on CSS Grid Layout. The focus is newcomers to the spec, and I take you through developing a layout such as you might use for a blog. The introduction video for the course is below. It is designed for beginners, as a complete introduction, but I had fun doing some to-camera pieces as a change from the purely screencast style video I normally do.

During the hour you will learn the main features of Grid Layout:

How to define a Grid

The various ways to size tracks

Nesting Grids

Placing items on the grid

Combining Auto-placement and placed items

Responsive Design

Using Grid alongside other layout methods such as Flexbox

View the course for free - and explore the other content on Skillshare - by signing up for a free two-month Skillshare membership.

]]>
Mon, 16 Jul 2018 16:30:00 +0000Launching a new product - from self-hosted to SaaShttps://www.rachelandrew.co.uk/archives/2018/05/31/launching-a-new-product-from-self-hosted-to-saas/
https://www.rachelandrew.co.uk/archives/2018/05/31/launching-a-new-product-from-self-hosted-to-saas/
Today our first product Perch will be nine years old, and perhaps rather neatly - although it wasn’t planned this way - we declared our new product out of beta this week. May just appears to be shipping month around here.

Notist is the slide-sharing, presenter portfolio application that I needed, however as we come out of beta it has already started to become the application that other people want. We’ve had an almost overwhelming number of feature requests and enhancement ideas as people have started to use the application, these are all very much welcome, and many have been added already.

Our first SaaS

With a product that is nine years old, we are no strangers to running a product business, but Notist is different. Perch and Perch Runway are self hosted, one-off purchases. People buy a license and off they go. Notist is our first Software as a Service (SaaS) application. While this does bring with it the challenge of hosting your data, it does remove many of the frustrations of a product which you don’t host. The majority of our support with Perch has absolutely nothing to do with our product. Instead we deal with terrible server configurations, on PHP hosts who do not care that they are broken. We can’t use the latest PHP versions, because those hosts won’t update. We increasingly deal with vanishing web designers who leave their clients in the lurch without the access details of their own site and hosting. Those clients end up coming to us, and we have very little that we can do to help them.

I’m sure that in the land of the SaaS there will be different challenges and frustrations, but that is part of the fun. We know what it is to sell and support a one-off licensed, downloadable product, it’s interesting to do something else as well. I’m sure that we’ll learn things running Notist that transfer back to Perch too.

Our priorities for Notist

There are many things we’d love to be doing with Notist, we’re bootstrapping however, and also have Perch to support so we need to be savvy with our time. Bootstrapping means we have little to no money to throw around, but as we already know, it brings great advantages in that the only people we need to consider are our customers aligned with our values as a company. No-one is pressing for fast growth and a quick return here.

We will focus on the things that we think most important. That’s why, with all the feedback we’ve received in the past few weeks, making improvements to accessibility has been a focus. We’d rather get our existing features to work well for more people before we add new ones. We also know that existing slide sharing solutions often perform poorly in terms of accessibility, both in terms of allowing users to add slides, and for those wanting to view them. We’d like to be different, and I think we’ve made in the last couple of weeks great strides towards that. It will be an ongoing process, and we are very grateful to those of you who have shared your expertise with us.

You can read about some of the things we have planned in our blog post. You can also take a look at some of my presentations on Notist. I’m especially pleased with the video page, which I’m slowly backfilling with data from years gone by!

If you speak at conferences and haven’t tried out Notist yet, I would love for you to give it a go. We do have a free tier for those of you who perhaps present at a meet up or two a year and can’t justify paying for a tool to create a portfolio. If you are part of any groups for public speaking, or know people who speak then please do spread the word. We have lots of interesting and useful ideas planned, in addition to looking into the features already requested. As bootstrappers, how much time we get to work on those really does come down to how many people are using the product.

]]>
Thu, 31 May 2018 12:59:00 +0000Grid Level 2 and Subgridhttps://www.rachelandrew.co.uk/archives/2018/04/27/grid-level-2-and-subgrid/
https://www.rachelandrew.co.uk/archives/2018/04/27/grid-level-2-and-subgrid/
CSS Grid fans are probably already aware that I have been very keen to see subgrid implemented in CSS Grid Layout after having been removed from the Level 1 specification last year in order to allow more time for discussion. As other people have started to use Grid, they have also discovered the use cases for subgrid and at this point it is the feature I am most asked about.

The CSS Grid Level 2 specification now has a First Public Working Draft, and this level of the specification will mostly deal with the subgrid part of the specification. At the CSS Working Group meeting in Berlin we resolved that subgrids should be able to be single axis only, returning them to the original concept rather than the revised one mentioned in my 2016 post. Therefore it would be worth looking at the Editor’s Draft of Grid Level 2, rather than the FPWD linked above as it has the latest edits.

What is a subgrid?

You can nest grids when using Grid Layout, a Grid Item can become a Grid Container by setting display: grid on it. However, as seen in the CodePen below, the tracks defined on that nested grid have no relationship to the tracks on the parent. In the example I have an item spanning three column tracks of the grid, it is also a Grid Container with three column tracks - however these do not line up with the tracks of the parent. You can test this by making the window small, or adding more content to a sub-item. If you are careful with sizing you can often make a nested grid look like everything lines up, however there isn’t a relationship enforcing that.

If the nested grid columns were to be defined as a subgrid, we would use the subgrid value of grid-template-columns on that child element. The child would then use the three column tracks that it spanned, and its children would lay out on those tracks. As single axis subgrids are allowable we could then define row tracks or allow them to be created in an implicit grid for the subgrid.

A CodePen is below, however no browser currently has an implementation this will work in.

Why is it different to display: contents?

We do now have some browser support for display: contents, the value of the display property which enables the removal of a box from the display. As noted in my post Why display: contents isn’t CSS Grid Layout Subgrid, this method works if we simply want to remove a box and allow the children to participate in the grid (or Flex) layout. It doesn’t give us the ability to create a mini-grid set up against one axis, nor does it allow us to add a background or border to the parent grid item - as that box is gone.

I have taken the example above and added display: contents to the item we were defining as a nested grid or subgrid, to demonstrate the difference. The child items now just participate in auto-placement on the grid and we lose the background colour.

What happens next?

Mats Palmgren at Mozilla has already put significant work into a prototype implementation, and he has been posting some screenshots and also raising issues against the specification over on the CSS WG GitHub repo. Some of those are as follows, however searching for css-grid-2 is a good way to see what has been raised against this level of the spec.

Specifications tend to be developed in parallel with at least one implementation, it is more of an iterative process than you might assume. Browser engineers try to implement, come back with questions about the spec, the spec is updated and implementation work carried out. So, if you are hoping for subgrid, all this activity should be good news.

If you are interested in the progress of subgrid then follow along, it will be useful to the spec editors and browser implementors alike if people who build websites add their thoughts to any questions.

If you are struggling to understand the conversations my advice is to build examples - even if they don’t work. My journey with Grid Layout (and the site Grid by Example) essentially started because I wanted to understand the emerging spec and the only way I know to understand a spec is to write code. Even when no browser supports it I write code, and try to think about how it would work. Building an example helps you to think, “what would I expect to happen here?” That will help you, but also knowing what people expect to happen is very useful when writing specifications, and figuring out what initial behaviour should be. So if you have questions or think something that is being proposed is unintuitive, your examples can help you participate in the discussion.

]]>
Fri, 27 Apr 2018 13:56:00 +0000The CSS Layout Workshop updated for 2018https://www.rachelandrew.co.uk/archives/2018/03/26/the-css-layout-workshop-updated-for-2018/
https://www.rachelandrew.co.uk/archives/2018/03/26/the-css-layout-workshop-updated-for-2018/
Yesterday I made live fourteen brand new videos, plus a bunch of updates to existing material on my CSS Layout Workshop. If you already subscribe, you will have access to the new material already.

The Complete course now contains 96 individual lessons, covering everything you might possible want to know about CSS Layout. If I teach all of this in person, it is two full days of material!

Keeping all of this up to date, and working out what to restructure when is an interesting challenge. From discussions I have with people following the course, there are a whole range of needs. Many people still need a thorough understanding of how a float-based grid works, because they are tied to working on projects that use such a system. Others are ready to launch right into Flexbox and Grid. I currently balance those requirements by providing material about both approaches, and everything in between. Perhaps by 2019 I’ll be able to retire any mention of a float-based grid to an archive of “things we used to do”.

To celebrate this mini-relaunch I’m offering the complete course at a $30 USD discount until the end of March 2018. Sign up at The CSS Workshop and I look forward to seeing you in the Slack!