Here’s a wonderful post by Nicolas Chevobbe on what the Firefox DevTools team was up to last year. What strikes me is how many improvements they shipped — from big visual design improvements to tiny usability fixes that help us make sure our code works as we expect it to in the console.
There are lots of interesting hints here about the future of Firefox DevTools, too. For example, tighter integrations with MDN and, as Nicolas mentions in that post, tools to make it feel like a playground where you can improve your design, rather just fixing things. Anyway, I already feel that Firefox DevTools has the best features for typography of any browser (make sure to check out the “Fonts” tab in the Inspector). I can’t wait to see what happens next!
I recently attended and had the chance to speak at WordCamp US 2018 in Nashville. I had a great time. I love conferences that bring people together around a tight theme because it’s very likely you’ll have something to talk about with every person there. Plus, I rather like WordPress and its community. The vibe was very centered around Gutenberg, as it was released in WordPress 5.0 just as the conference started.
Matt’s State of the Word gets into all that:
I took the opportunity to give a brand new talk I’ve been working on I’ve called, “Thinking Like a Front-End Developer”:
There were loads of wonderful people there and loads of wonderful talks. Here’s a playlist!
We’ve released the Most Hearted Pens, Posts, and Collections on CodePen for 2018! Just absolutely incredible work on here — it’s well worth exploring.
Remember CodePen has a three-tiered hearting system, so while the number next to the heart reflects the number of users who hearted the item, each of those could be worth 1, 2, or 3 hearts total. This list is a great place to find awesome people to follow on CodePen as well, and we’re working on ways to make following people a lot more interesting in 2019.
Last year, the team here at CSS-Tricks compiled a list of our favorite posts, trends, topics, and resources from around the world of front-end development. We had a blast doing it and found it to be a nice recap of the industry as we saw it over the course of the year. Well, we’re doing it again this year!
With that, here’s everything that Sarah, Robin, Chris and I saw and enjoyed over the past year.
There are a few themes that cross languages, and one of them is good code review. Even though Nina Zakharenko gives talks and makes resources about Python, her talk about code review skills is especially notable because it applies across many disciplines. She’s got a great arc to this talk and I think her deck is an excellent resource, but you can take this a step even further and think critically about your own team, what works for it, and what practices might need to be reconsidered.
I also enjoyed this sarcastic tweet that brings up a good point:
When reviewing a PR, it’s essential that you leave a comment. Any comment. Even the PR looks great and you have no substantial feedback, find something trivial to nitpick or question. This communicates intelligence and mastery, and is widely appreciated by your colleagues.
I’ve been guilty myself of commenting on a really clean pull request just to say something, and it’s healthy for us as a community to revisit why we do things like this.
Sophie Alpert, manager of the React core team, also wrote a great post along these lines right at the end of the year called Why Review Code. It’s a good resource to turn to when you’d like to explain the need for code reviews in the development process.
The year of (creative) code
So many wonderful creative coding resources were made this year. Creative coding projects might seem frivolous but you can actually learn a ton from making and playing with them. Matt DesLauriers recently taught a course called Creative Coding with Canvas & WebGL for Frontend Masters that serves as a good example.
CodePen is always one of my favorite places to check out creative work because it provides a way to reverse-engineer the work of other people and learn from their source code. CodePen has also started coding challenges adding yet another way to motivate creative experiments and collective learning opportunities. Marie Mosley did a lot of work to make that happen and her work on CodePen’s great newsletter is equally awesome.
You should also consider checking out Monica Dinculescu‘s work because she has been sharing some amazing work. There’s not one, not two, but three (!) that use machine learning alone. Go see all of her Glitch projects. And, for what it’s worth, Glitch is a great place to explore creative code and remix your own as well.
GitHub Actions
I think hands-down one of the most game-changing developments this year is GitHub Actions. The fact that you can manage all of your testing, deployments, and project issues as containers chained in a unified workflow is quite amazing.
Containers are a great for actions because of their flexibility — you’re not limited to a single kind of compute and so much is possible! I did a writeup about GitHub Actions covering the feature in full. And, if you’re digging into containers, you might find the dive repo helpful because it provides a way to explore a docker image and layer contents.
Actions are still in beta but you can request access — they’re slowly rolling out now.
UI property generators
I really like that we’re automating some of the code that we need to make beautiful front-end experiences these days. In terms of color there’s color by Adobe, coolors, and uiGradients. There are even generators for other things, like gradients, clip-path, font pairings, and box-shadow. I am very much all for this. These are the kind of tools that speed up development and allow us to use advanced effects, no matter the skill level.
Ire has been writing a near constant stream of wondrous articles about front-end development on her blog, Bits of Code, over the past year, and it’s been super exciting to keep up with her work. It seems like she’s posting something I find useful almost every day, from basic stuff like when hover, focus and active states apply to accessibility tips like the aria-live attribute.
“The All Powerful Front-end Developer”
Chris gave a talk this year about the ways the role of front-end development are changing… and for the better. It was perhaps the most inspiring talk I saw this year. Talks about front-end stuff are sometimes pretty dry, but Chris does something else here. He covers a host of new tools we can use today to do things that previously required a ton of back-end skills. Chris even made a website all about these new tools which are often categorized as “Serverless.”
Even if none of these tools excite you, I would recommend checking out the talk – Chris’s enthusiasm is electric and made me want to pull up my sleeves and get to work on something fun, weird and exciting.
Future Fonts
The Future Fonts marketplace turned out to be a great place to find new and experimental typefaces this year. Obviously is a good example of that. But the difference between Future Fonts and other marketplaces is that you can buy fonts that are in beta and still currently under development. If you get in on the ground floor and buy a font for $ 10, then that shows the developer the interest in a particular font which may spur more features for it, like new weights, widths or even OpenType features.
It’s a great way to support type designers while getting a ton of neat and experimental typefaces at the same time.
React Conf 2018
The talks from React Conf 2018 will get you up to speed with the latest React news. It’s interesting to see how React Hooks let you “use state and other React features without writing a class.”
It’s also worth calling out that a lot of folks really improved our Guide to React here on CSS-Tricks so that it now contains a ton of advice about how to get started and how to level up on both basic and advanced practices.
The Victorian Internet
This is a weird recommendation because The Victorian Internet is a book and it wasn’t published this year. But! It’s certainly the best book I’ve read this year, even if it’s only tangentially related to web stuff. It made me realize that the internet we’re building today is one that’s much older than I first expected. The book focuses on the laying of the Transatlantic submarine cables, the design of codes and the codebreakers, fraudsters that used the telegraph to find their marks, and those that used it to find the person they’d marry. I really can’t recommend this book enough.
Figma
The browser-based design tool Figma continued to release a wave of new features that makes building design systems and UI kits easier than ever before. I’ve been doing a ton of experiments with it to see how it helps designers communicate, as well as how to build more resilient components. It’s super impressive to see how much the tools have improved over the past year and I’m excited to see it improve in the new year, too.
It seems there was a lot of chatter this year about the impact of third party scripts. Whether it’s the growing ubiquity of all-things-JavaScript or whatever, this topic covers a wide and interesting ground, including performance, security and even hard costs, to name a few.
My personal favorite post about this was Paulo Mioni’s deep dive into the anatomy of a malicious script. Sure, the technical bits are a great learning opportunity, but what really makes this piece is the way it reads like a true crime novel.
Gutenberg, Gutenberg and more Gutenberg
There was so much noise leading up to the new WordPress editor that the release of WordPress 5.0 containing it felt anti-climactic. No one was hurt or injured amid plenty of concerns, though there is indeed room for improvement.
Lara Schneck and Andy Bell teamed up for a hefty seven-party series aimed at getting developers like us primed for the changes and it’s incredible. No stone is left unturned and it perfectly suitable for beginners and experts alike.
Solving real life issues with UX
I like to think that I care a lot about users in the work I do and that I do my best to empathize so that I can anticipate needs or feelings as they interact with the site or app. That said, my mind was blown away by a study Lucas Chae did on the search engine experience of people looking for a way to kill themselves. I mean, depression and suicide are topics that are near and dear to my heart, but I never thought about finding a practical solution for handling it in an online experience.
So, thanks for that, Lucas. It inspired me to piggyback on his recommendations with a few of my own. Hopefully, this is a conversation that goes well beyond 2018 and sparks meaningful change in this department.
The growing gig economy
Freelancing is one of my favorite things to talk about at great length with anyone and everyone who is willing to talk shop and that’s largely because I’ve learned a lot about it in the five years I’ve been in it.
But if you take my experience and quadruple it, then you get a treasure trove of wisdom like Adam Coti shared in his collection of freelancing lessons learned over 20 years of service.
Freelancing isn’t for everyone. Neither is remote work. Adam’s advice is what I wish I had going into this five years ago.
Browser ecology
I absolutely love the way Rachel Nabors likens web browsers to a biological ecosystem. It’s a stellar analogy and leads into the long and winding history of browser evolution.
Speaking of history, Jason Hoffman’s telling of the history about browsers and web standards is equally interesting and a good chunk of context to carry in your back pocket.
These posts were timely because this year saw a lot of movement in the browser landscape. Microsoft is dropping EdgeHTML for Blink and Google ramped up its AMP product. 2018 felt like a dizzying year of significant changes for industry giants!
“Don’t tell me how to build a front end!” we, front-end developers, cry out. We are very powerful now. We like to bring our own front-end stack, then use your back-end data and APIs. As this is happening, we’re seeing healthy things happen like content management systems evolving to headless frameworks and focus on what they are best at: content management. We’re seeing performance and security improvements through the power of static and CDN-backed hosting. We’re seeing hosting and server usage cost reductions.
But we’re also seeing unhealthy things we need to work through, like front-end developers being spread too thin. We have JavaScript-focused engineers failing to write clean, extensible, performant, accessible markup and styles, and, on the flip side, we have UX-focused engineers feeling left out, left behind, or asked to do development work suddenly quite far away from their current expertise.
GraphQL
Speaking of powerful front-end developers, giving us front-end developers a well-oiled GraphQL setup is extremely empowering. No longer do we need to be roadblocked by waiting for an API to be finished or data to be massaged into some needed format. All the data you want is available at your fingertips, so go get and use it as you will. This makes building and iterating on the front end faster, easier, and more fun, which will lead us to building better products. Apollo GraphQL is the thing to look at here.
While front-end is having a massive love affair with JavaScript, there are plenty of front-end developers happily focused elsewhere
This is what I was getting at in my first section. There is a divide happening. It’s always been there, but with JavaScript being absolutely enormous right now and showing no signs of slowing down, people are starting to fall through the schism. Can I still be a front-end developer if I’m not deep into JavaScript? Of course. I’m not going to tell you that you shouldn’t learn JavaScript, because it’s pretty cool and powerful and you just might love it, but if you’re focused on UX, UI, animation, accessibility, semantics, layout, architecture, design patterns, illustration, copywriting, and any combination of that and whatever else, you’re still awesome and useful and always will be. Hugs. 🤗
Just look at the book Refactoring UI or the course Learn UI Design as proof there is lots to know about UI design and being great at it requires a lot of training, practice, and skill just like any other aspect of front-end development.
Shamelessly using grid and custom properties everywhere
I remember when I first learned flexbox, it was all I reached for to make layouts. I still love flexbox, but now that we have grid and the browser support is nearly just as good, I find myself reaching for grid even more. Not that it’s a competition; they are different tools useful in different situations. But admittedly, there were things I would have used flexbox for a year ago that I use grid for now and grid feels more intuitive and more like the right tool.
I’m still swooning over the amazing illustrations Lynn Fisher did for both our grid and flexbox guides.
Massive discussions around CSS-in-JS and approaches, like Tailwind
These discussions can get quite heated, but there is no ignoring the fact that the landscape of CSS-in-JS is huge, has a lot of fans, and seems to be hitting the right notes for a lot of folks. But it’s far from settled down. Libraries like Vue and Angular have their own framework-prescribed way of handling it, whereas React has literally dozens of options and a fast-moving landscape with libraries popping up and popular ones spinning down in favor of others. It does seem like the feature set is starting to settle down a little, so this next year will be interesting to watch.
Then there is the concept of atomic CSS on the other side of the spectrum, and interesting in that doesn’t seem to have slowed down at all either. Tailwind CSS is perhaps the hottest framework out there, gaining enough traction that Adam is going full time on it.
What could really shake this up is if the web platform itself decides to get into solving some of the problems that gave rise to these solutions. The shadow DOM already exists in Web Components Land, so perhaps there are answers there? Maybe the return of <style scoped>? Maybe new best practices will evolve that employ a single-stylesheet-per-component? Who knows.
I’ve heard of multiple agencies where design systems are literally what they make for their clients. Not websites, design systems. I get it. If you give a team a really powerful and flexible toolbox to build their own site with, they will do just that. Giving them some finished pages, as polished as they might be, leaves them needing to dissect those themselves and figure out how to extend and build upon them when that need inevitably arrives. I think it makes sense for agencies, or special teams, to focus on extensible component-driven libraries that are used to build sites.
Machine Learning
Stuff like this blows me away:
I made a music sequencer! In JavaScript! It even uses Machine Learning to try to match drums to a synth melody you create!
Having open source libraries that help with machine learning and that are actually accessible for regular ol’ developers to use is a big deal.
Stuff like this will have real world-bettering implications:
🔥 I think I used machine learning to be nice to people! In this proof of concept, I’m creating dynamic alt text for screenreaders with Azure’s Computer Vision API. 💫https://t.co/Y21AHbRT4Ypic.twitter.com/KDfPZ4Sue0
You gotta check out the Unicode Pattern work (more) that Yuan Chuan does. He even shared some of his work and how he does it right here on CSS-Tricks. And follow that name link to CodePen for even more. This <css-doodle> thing they have created is fantastic.
Another year come and gone! As we do each year, let’s take a look at the past year from an analytical by-the-numbers perspective and do a goal review. Most importantly, I’d like extend the deepest of thanks to you, wonderful readers of CSS-Tricks, for making this place possible.
This site has a new design, doesn’t it? It does! I’ll write something more about that soon. If you have something to say about it right now, feel free to use our new public community on Spectrum. If it’s a bug or thought that doesn’t really need to be public, our our contact form would be great.
I can count the times I pop into Google Analytics per year on my two hands these days, but we’ve had the basic snippet installed since day one around here, so it’s great for keeping an eye on site traffic and usage over the long term. Especially since CSS-Tricks has been a fairly basic WordPress install the entire time with little by the way of major infrastructural changes that would disrupt how these numbers are gathered.
Page views over the entire lifespan of CSS-Tricks.
We had 91 million page views this year, up from 75 million last year. That’s great to see, as we were at 75 in 2017, 77 in 2016, and 72 in 2015. We’ve managed to do a bigger leap this year than perhaps we ever have. I’d love make a go at 100 million next year! That’s based on 65 million sessions and 23 million users.
Perhaps some of that traffic could be attributed to the fact that we published 636 Posts this year, up from 595 last year. I’d like to think they are higher quality too, as we’ve invested much more in guest writing and had a more thorough editing process this year than we ever have. We’ve had Geoff Graham as lead editor all year and he’s doing a phenomenal job of keeping our content train rolling.
For the last few years, I’ve been trying to think of CSS-Tricks as this two-headed beast. One head is that we’re trying to produce long-lasting referential content. We want to be a site that you come to or land on to find answers to front-end questions. The other head is that we want to be able to be read like a magazine. Subscribe, pop by once a week, snag the RSS feed… whatever you like, we hope CSS-Tricks is interested to read as a hobbyist magazine or industry rag.
We only published 25 new pages this year, which are things like snippets, almanac entries, and videos. I’d really like to see that go up this year, particularly with the almanac, as we have lots of new pages documented that we need to add and update.
I almost wish our URLs had years in them, because I still don’t have a way to scope analytic data to only show me data from content published this year. I can see the most popular stuff from the year, but that’s regardless of when it was published, and that’s dominated by the big guides we’ve had for years and keep updated.
Interestingly, flexbox is still our #1 guide, but searches for the grid guide are only narrowly behind it. It depends on the source though. I can see data for on-site search through WordPress.com (via Jetpack) which show grid searches at about 30% less than flexbox. Google Analytics have it about 60% less, which would be Google searches that end up on CSS-Tricks. Nevertheless, those are the two most popular search keywords, on-site and off. From #3 onwards: svg, border, position, animation, underline, background, display, transition, table, button, uppercase, css, bold, float, hover, transform.
I love that! People are landing on the site looking for fundamental CSS concepts, and hopefully finding what they need.
Site search has been a bit of a journey. Native WordPress search isn’t good enough for a site this big. For a long time I used Google Custom Search Engine, which is nice because it’s as good as Google is, but bad because it’s a bit hard to style nicely and is covered in ads that don’t make enough money to be worth it and are too expensive to remove. Last year I was using Algolia for a while, which is a fantastic product, but I needed to give it more development effort than I was able to at the time. Now I’m back on WordPress search but powered by Jetpack, which brings the power of cloud-hosted Elasticsearch, which is pretty sweet. I means I have native WordPress template and styling control, and lots of tweakability.
Search is also fascinating as it represents 81% of how people get to CSS-Tricks. That’s particularly interesting in it means that the growth in page views wasn’t necessarily from search, as we had 86% of traffic from search last year, down a full 5%. Growth came from other areas so strongly it pushed down search.
All of social media combined is 2%. I’m always reminded this time of year how much time and energy we spend on social media, and how perhaps the smart move is refocusing some of that energy toward on-site content, as that is far better for helping more people. Not that I don’t enjoy social media. Surely we’ve gotten countless ideas for posts and content for those posts from social media participation.
An interesting uptick was in direct traffic. 9% of visits this year were direct, up from just 5% last year. And referral traffic at 7% up from 5%. Social media remained steady, so really we have more people coming directly to the site and more links from other sites to thank for the uptick in traffic.
Speaking of social media, we got @CSS on Twitter this year, and that’s been fun. I would have thought it would have increased the rate of growth for followers, but it doesn’t appear to.
Chart from SocialBlade. I imagine that downblip was some sort of Twitter spam purge.
We hardly do anything with Facebook, beyond making sure new content is posted there. That sometimes feels like a missed opportunity since there is more people there than any other social network on Earth. But it doesn’t seem particularly huge in developer communities as best I can tell. Not to mention Facebook is constantly revealed to be doing sketchy things, which steers me away from it personally.
We’ve had a remarkably consistent year of the CSS-Tricks Newsletter, publishing it every single week. Robin Rendle works hard on that every single week. We started the year with 31,376 subscribers and ended with 39,655. So about an 8.5k increase, down from the 10k increase last year. It’s still good growth, and I suspect we’ll see much better growth next year because the new site design does a lot better job promoting it and we have some plans to make our authoring of it and displaying it on this site much better.
If the news about Edge going Chromium made you worry that Chrome would become too dominant of a browser… well, Edge hasn’t actually done that yet and Chrome is already pretty darn dominant already, particularly on this site. 77% of traffic is Chrome, 11% Firefox, 6% Safari, about 1.5% each for IE and Edge, and then the rest sprinkled out through 836 other identified browsers.
61% Windows, 22% Mac, 7% Linux, 7% Android, 3% iOS, and the rest sprinkled through 42 known operating systems.
Traffic geography has remained consistent. The United States has the lead at 22%, India at 13%, UK at 5%, Germany at 4%, Canada, France, and Brazil at 3%, Russia, Australia, Netherlands, Spain, Poland, Italy, Ukraine, China, Philipines at 2%, and the rest over 240 other identified countries.
Another surprising turn this year was mobile traffic. Internet wide, I believe we’re past the tipping point of more than half of all traffic being from mobile devices. On this site, we hovered at just 2 or 3% for many years. It was 6% last year, a big jump, and now 10% this year. I always suspected the main reason for the low numbers was the fact that this site is used in conjuction with doing active development, and active development is still a desktop-dominant task. Still, it’s growing and the rate of growth is growing too.
There were 3,788 approved comments this year, down from 5,040 last year. We’ve been hand-approving all comments for a while now. We’ve always moderated, but having to approve them before they appear at all slows down commenting activity and leads to less overall. I’d estimate maybe 50-60% of non-spam comments get approved. Absolutely worth it to me to maintain a positive vibe here. I also suspect the main reason for lower comments is just that people do a lot more of their conversing over social media. I’m sure if we tracked conversations on social media in relation to things we’ve published (somehow) that would be up.
Our commenting system is also dreadfully old timey. I’d love to see a system that allows for accounts, comment editing, social login, a fancy editor, Markdown, the whole nine yards, but I’ve yet to be swooned by something.
The contact form on site is up to ID #21458, so we got 1,220 messages through that this year.
Goal Review
❌ Publish something in a new format. Behind the scenes, we actually did some foundational work to make this happen, so I’m optimistic for the possibilities. But we didn’t get anything out the door. The closest thing we’ve been doing is organizing content into guides, which is somewhat of a new format for us that I also want to evolve.
✅ More editorial vision. I think we got close enough to call this a success. We did a bunch of themed weeks. We were always grouping content together that is thematically related. Our link posts got better at being referential and topical. We still covered news pretty well. I think I’d like to see us to more far-ahead planning so we can bring bigger ideas to life.
✅ Interesting sponsorship partners. I think we nailed it here.
❌ Create another very popular page. We’re at our best when we’re creating really strong useful referential content. When we really nail it, we make pages that are very useful to people and it’s a win for everybody. I’m not sure we had a run-away super popular page this year, so we’ll gun for it next year.
New Goals
Polish this new design. This is easily the most time, effort, and money that’s gone into a redesign since the big v10 design. There are a lot of aesthetic changes, but there was also quite a bit of UX work, business goal orientation, workflow tweaking, and backend development work that went along with it. I’d like to get some mileage out of it by not just sitting on it but refining it over a longer period.
Improve newsletter publishing and display. We sent our newsletter out via MailChimp, which is a great product, but over the years it has been good to us to bring as much under the WordPress umbrella as we can. I think we can create a pretty sweet newsletter authoring experience right within WordPress, then continue to send it via MailChimp via a special RSS feed. That’ll take some work, but it should make for a better newsletter that is more comfortable to produce and easier to integrate here on the site.
Raise the bar on quality. I’d be happy see the number of posts we publish go down if we could make the quality go up. Nothing aginast any of our authors work that is already out there, but I think we all know super high quality articles when we see them and I’d like to hit that mark more often. If that means posts spending more time in editing and us being a bit more demanding about what we’d like to see, we’ll do it.
Better guides. There are two sorts of guides: “complete guides” like our flexbox and grid guides (to name a few) and “guide collections” which are hand-chosen, hand-ordered, and hand-maintained guides along a theme, like our beginner guide. As a site with loads of content from over a decade, I really like these as a way to make sure the best stuff has a proper home and we can serve groups of people and topics in a strong way.
I feel the same this year as I have in the past. Web standards, as an overall idea, has entirely taken hold and won the day. That’s worth celebrating, as the web would be kind of a joke without them. So now, our job is to uphold them. We need to cry foul when we see a browser go rogue and ship an API outside the standards process. That version of competition is what could lead the web back to a dark place where we’re creating browser-specific versions. That becomes painful, we stop doing it, and slowly, the web loses.
Here’s a great talk by Das Surma where he looks into what Houdini is and how much of it is implemented in browsers. If you’re unfamiliar with that, Houdini is a series of technologies and APIs that gives developers low level access to how CSS properties work in a fundamental way. Check out Ana Tudor’s deep dive into its impact on animations for some incredible examples of it in practice.
What I particularly like about this video is the way Das mentions the CSS Paint API which lets you do a bunch of bizarre things with CSS, such as creating “squircle” shapes and changing how borders work. It looks wonderfully robust and it should give us super powers in the near future. Ruth John wrote up this extensive overview on the topic earlier this year and it’s worth a read as well.
Oh hey, so tomorrow (tomorrow!) is Election Day here in the United States. We’re not in the business of making political endorsements or anything like that at CSS-Tricks, though we do endorse that everyone exercise their right to vote.
I have a little time, so I’m going to try to re-create this sticker in CSS and walk through my thought process as I do it. Feel free to follow along if you’d like!
Breaking down the elements
Anytime I’m given a design of any kind, I like to pretend that my eyes have the superpower of X-ray vision and can see through the design as if it were a skeleton. This helps me start to think through how many elements I might use in the HTML.
OK, I think I’m going to start with something like this:
<!-- Main Circle --> <div class="sticker"> <div class="sticker__top"> <!-- Will use ::before and ::after to create halves --> <h1>I Voted</h1> </div> <div class="sticker__bottom"> <!-- The list of languages --> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> </div>
I’m also going to throw in some base styles on the <body> so I can jump right into the rest of the sticker.
OK, nothing fancy so far. Really just looks like an unordered list with a heading with some terrible contrast between the content and background.
Working on the main sticker container
I think I’ll set up the container, which is the main circle. I’m going to use a fixed width and height, then use border-radius to round it out and into the shape of a circle.
Oh, and I ought to take care of that dark text and also add a border while I’m at it, so I can see what I’m doing.
The alignment is all off. Seems like a good spot to drop in some flexbox. This will allow me to center our elements horizontally. I think going with a single-column layout will take care of the vertical alignment.
The last thing I want to do with the sticker for now is split it up into two halves — a top and a bottom. OK, so yeah, I have explicit elements for those in the HTML (.sticker__top and .sticker__bottom). I could use background-color on each element to make the top half blue and bottom half red, but I actually like the idea of using a linear gradient instead with a hard stop at the halfway mark.
The top and bottom halves both occupy 50% of the sticker’s height, so the selectors can be combined to hit them both at once. Plus, I’m using flexbox, so I can simply flex those items.
.sticker__top, .sticker-bottom { flex: 0 50%; }
The top half is super weird. The way I see it, there’s two rows: one that contains the stars and stripes and the other that contains the heading. I’m going to turn to flexbox again to draw that layout.
That’s not really going to change much at the moment because, well, I haven’t done anything to define elements for the stars and stripes in the HTML. I’m thinking of using the ::before and ::after pseudo elements on .sticker__top to make those. Again, they can be combined since they share some common properties and values.
.sticker__top::before, .sticker__top::after { content: ""; height: 45%; /* Had to play with this a bit */ margin-top: 2em; /* Move away from the top edge of the sticker */ }
I’m going to cheat and use SVG for the stars. I mean, I guess that’s not cheating but it sorta feels like a deviation from a “pure” CSS way of doing things. Oh well.
That said, the stripes can definitely be made in CSS, again, with the same linear gradient background technique that’s used to split the sticker up into blue and red halves.
I’m so thankful flexbox has an order property. I’m going to order the stars, stripes and heading at 1, 2 and 3, respectively,
.sticker__top::before { /* Same as before... */ order: 1; } .sticker__top::after { /* Same as before... */ order: 2; } .sticker__top h1 { order: 3; }
If I stop here, the shape of the stars and stripes would be all off and the heading font would be sloppy.
border-radius is still a good way to get the stars and stripes to follow the same circular path as the sticker. The rub is that the bottoms of them have to maintain a flat edge. Since border-radius is a shorthand property, I’m going to drop border-top-left-radius on the stars and border-top-right-radius on the stripes.
It’s also worth noting that the stripes are a little wider than the stars. Maybe a 55-45 split? I don’t know. I’ll go with that and also use relative positioning on the stripes so I can push them to the right a bit to add separation between them and the stars.
.sticker__top::before { /* Same as before... */ flex: 45%; } .sticker__top::after { /* Same as before... */ flex: 55%; position: relative; left: 10px; }
The stars and stripes should flex with the size and width of the heading. I had to play with the font family, font size, letter spacing, and text transform to get something that looks pretty nice. In case you’re wondering, I wound up using Raleway for the font. It’s not precise, but close enough… at least to my untrained typographical eye.
Alright, so now the bottom half is making my skin crawl. Gotta tackle that.
Style up the bottom half
So much has already been done. The element for bottom half is already there in the HTML and is sized and positioned the way it should be. I think stripping out the bullet points of the list items and removing the left padding from the unordered list will clean things up a lot.
.sticker__bottom ul { list-style: none; padding: 0; width: 100%; /* Gotta take up the all of the bottom half */ }
But, that’s not going to cut it completely. I want that list to run horizontally, wrap lines, and to allow the list items to occupy open space. Yep, that sounds like flexbox again.
.sticker__bottom ul { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; /* same as before... */ } .sticker__bottom li { flex: auto; /* Flex as much as you need, guys */ margin: .75em; /* A liiiiitle breathing room between items */ }
Now I have to make a few tweaks to .sticker__bottom. Specifically, I’m going to make it a little narrower (80% of the full sticker width) to get it off the edge of the sticker and then round its edges… though it might not actually need rounded corners since content is not going to overflow.
I’m going to have to play around with the font size and to get the same sort of alignment as the IRL sticker, which has rows of: 4 items, 3 items, 3 items, 1 item, 1 item.
I’m going to call this one baked. I know, I know. I should cross-browser test. It would also be wise to find graceful fallbacks for older browsers that do not support flexbox. And, some responsiveness would be nice to have. Maybe someone would like to take those up and share. 😉
Is this the best way to make the sticker? Probably not. For example, I bet there are some interesting things that can be done with clip-path instead of the way I fumbled through background gradients. And, if I had to do it again, I might even consider going with a CSS Grid layout on the parent because there are clearly opportunities to work in two directions instead of one.
But that’s the beauty of CSS. There’s more than one way to accomplish something.
