As designers continue to experiment, they’re not only finding ways to solve common roadblocks that were faced before CSS Grid was around, they’re also taking things a step further. We’re beginning to see the potential for implementing unique layouts that were perhaps darn-near impossible using other methods.

Let’s explore some CSS Grid examples that go well beyond the ordinary:

The Virtual Shoe Rack by Andy Barefoot

This stunning snippet is reminiscent of a shoe display you may see in a retail store – only much more fun. It sports a 3D-like layout, slick hover effects, and is fully responsive. And because this layout both looks amazing and comfortably fits many products into a small space, it might just be an effective way of helping shoppers find what they’re looking for.

See the Pen Isometric eCommerce CSS Grid by Andy Barefoot

Vertically Responsive Poster by George W. Park

Here’s an example of a piece of artwork done completely with a CSS Grid layout and HTML – no images needed. What’s more, it’s also vertically responsive based on the viewport. As the viewport’s height increases, so does the size of the poster.

See the Pen CSS Grid Art Poster (Vertically Responsive) by George W. Park

Fitting In by Stephen Lee

Who doesn’t love a good game of Tetris? What we have here is a layout inspired by the classic video game. The various pieces use a combination of CSS Grid, clipping paths, and CSS Variables to ensure that each piece fits together through multiple breakpoints.

See the Pen CSS Grid Tetris pieces with CSS variables by Stephen Lee

Mondrian Compositions by Pete Barr

Recreating a set of Mondrian compositions provides a worthy challenge for CSS Grid – one that it passes with flying colors. These complex layouts of geometric shapes provide us with an attractive example of the granular control the layout technique offers.

See the Pen 3D CSS Grid Mondrian Compositions by Pete Barr

Apple Keyboard by Jon Kantner

The finely detailed complexity of a keyboard layout could drive even the most talented designers to tears. But CSS Grid is there to handle those little quirks and helped to make this example pixel-perfect (you may want to view it on a large screen to get the full effect). You can even tap the keys!

See the Pen Apple Keyboard by Jon Kantner

Responsive Photo Gallery by yoksel

Photo galleries are an area of web design that are ripe for a creative boost. Here we have a gallery that takes advantage of CSS Grid’s layout possibilities, along with image masks that create uniquely shaped photos. The result is something that stands out in a genre where that’s getting harder to do.

See the Pen Responsive gallery with CSS Grids by yoksel

A New Navigation by Ryan Mulligan

Navigation can be made infinitely more interesting with the help of CSS Grid. Click into this example menu, and you can see the potential for creating something that is both beautiful and well-organized. And the fact that grids can often be changed without a ton of code means that menus can evolve along with your site.

See the Pen CSS Grid Menu Panels by Ryan Mulligan

Monopolizing the Grid by John Coppola

The things print designers take for granted have left web designers longing for the day when they too could take advantage. A board game like Monopoly is simple enough for print but incredibly complicated for the web. This faithful rendition of the classic game is proof that we now have a whole new set of tools available to us.

See the Pen Monopoly board by John Coppola (@johnnycopes)

Pushing the Web Forward

Perhaps the most impressive aspect of CSS Grid is that it has inspired the imagination of web designers while still being so early on in its useful existence. And while its most important job is in solving the everyday layout requirements of websites, we’re starting to see that it can do so much more.

It will be interesting to see where CSS Grid takes the web as it is implemented more and more.

The post 8 Code Snippets That Demonstrate the Power of CSS Grid appeared first on Speckyboy Design Magazine.

Of course, CSS Grid is also incredibly powerful. We’ve seen some developers experiment and push the limits of what it can do.

While that’s impressive, the real beauty of this specification is that it helps us accomplish everyday tasks. The common page and feature layouts that make up a typical website project, and this is the biggest reason to jump on board and utilize CSS Grid.

We’ve put together a collection of 8 common website layout concepts. Each one demonstrates how CSS Grid can make life easier for web designers. And, if you’re concerned about browser support, some also include fallbacks for Flexbox and other layout techniques. Let’s get started!

The post 8 Snippets for Creating Common Website Layouts with CSS Grid appeared first on Speckyboy Design Magazine.

But with modern CSS and an occasional dash of JavaScript, we can design containers that really stand out amongst the circles and squares. In fact, taking a short jaunt through CodePen provides plenty of inspiration in this area.

Here are 10 unorthodox container designs that eschew the standard shapes and kick things up a notch in their own way.

Notched Boxes

Chris Coyier of CSS-Tricks fame built this example that, while subtle, offers a much fresher take on the standard box. By simply angling off the sharp edges, we have a more nuanced look. This type of effect provides a much more artistic feel while maintaining usability.

Angled Full-Width Image

Images (or any container) that stretch out over the viewport’s full width can really benefit from doing something a bit different in terms of shape. In this example, the angled borders we see are a nice way of creating a cool visual effect that doesn’t overwhelm the user. Subtle is usually better.

Accent Containers

While we often use containers as places to hold content, they can also make nice design accents. Take this example, where a few shifts of CSS border-radius create an interesting effect that also complements the content below.

Windows (Not That Kind)

CSS clipping paths can do some amazing things. They bring one of the staples of print design into a more interactive medium. Here, we have a clip-path used to create a window-shaped effect around a set of images – complete with beautiful hover animation.

Diamond Navigation Menu

I love this series of diamond-shaped buttons because they turn what could be boring (a collection of navigation links) into something unique. While this may not be 100% simple to maintain in the long-term (adding items would require more CSS), it shows that you don’t have to settle for ordinary.

Diagonal Animation

As they say, why not make your entire page a non-standard shape? Okay, they probably don’t say that. But here we have an example of someone who did create a full-screen animation that bends along with your cursor position. One practical use might be to allow users to “reveal” an object hidden underneath.

The Famous Exploding Polygons

Polygon shapes are being used quite often in web design, but not necessarily in the same way as this example. Here they are used to build a letter (“J,” in this case) that explodes as you hover over it. It makes for an interesting logo and can add a bit of unexpected fun to a website.

A Curvaceous Container

Shaping text around an image is another print effect that isn’t quite so easy to port over to the web. It takes some extra effort, but here’s a look at how stunning it can be. The whole container has much more of a natural flow than one with standard squared-off text.

Corner Shaping

Buttons are another element where we too often settle for standard shapes. But in the right setting, something different can be quite welcome. These buttons not only have various notched-corners, but they also offer a shape-shifting hover animation as well.

The Shape of Things to Come

The use of shaped containers can open up the doors to all kinds of creative looks and layouts. And with the advent of techniques such as CSS Grid, it’s now possible to implement shapes on a much larger scale.

While the examples above may not be a perfect fit for every use case, they prove that the web is slowly but surely moving beyond the basics. So, for your next project, try to literally think outside the box (or circle).

The post 10 CSS Snippets for Creating Unorthodox Shapes appeared first on Speckyboy Design Magazine.

The promise of CSS Grid is that it will simply work as the designer intended, while automatically adjusting to whatever device it’s being displayed on.

Many web designers have experimented with CSS Grid in many unique ways. Here are 10 layouts we found that range anywhere from “useful” to “wow.”

The post 10 CSS Grid Snippets for Creating Unique Layouts appeared first on Speckyboy Design Magazine.

If you’re looking to learn more about what CSS Grid is and what it does, you’ve come to the right place. We’ll provide a rundown of what you need to know, along with some helpful resources to get you started.

First Thing’s First

One thing we need to note is that, as of this writing, CSS Grid is still a work in progress according to the W3C. That means that the final version of this specification hasn’t been fully released just yet. Overall, browser support is a bit spotty. But that will certainly change as the final spec rolls out.

That being said, it’s never a bad idea to get ahead of the curve when it comes to learning new techniques. Just keep in mind that some things may change between now and the official release. With that fair warning out of the way, let’s dig in and learn more about this important development in web design.

Layout in 2-D

CSS Grid is a system that allows for building 2-D grid layouts. While the term “2-D” doesn’t sound so groundbreaking, it absolutely is in this particular case. You see, CSS Grid will allow you to manage layout according to both columns and rows.

Flexbox, by comparison, is really just meant for columns (1-D, if you will). Using CSS Grid, designers will be able to achieve layouts that were downright difficult before. In fact, some of these things were on our wish lists since the days of table-based layouts.

With tables, it was easy enough to have a column take up multiple rows using the rowspan attribute. CSS didn’t really have a direct equivalent. That led to using multiple nested containers, floats, clearfixes, etc., to achieve the desired effect. This is exactly what CSS Grid aims to fix.

The good thing is that if you are at all familiar with Flexbox, then you’ll be off to a great start with CSS Grid. With both Flexbox and CSS Grid, things are set up via a parent container and subsequent items (children). And, like Flexbox, content order can be set via CSS. This is particularly nice when adjusting the content for mobile devices. What shows up first on a desktop grid may be pushed down lower in the display order on smaller screens.

A Simple CSS Grid Example

Let’s look at a very basic CSS Grid layout. There are three columns and two rows. The third column is unique in that it spans both rows and will display on the right side of the layout.

It actually takes very little code to make this happen. Take a look:

The CSS:

.container {
display: grid;
grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
grid-gap: 10px;
grid-template-rows: [row1] 47% [row2] 47%;
text-align: center;
color: #FFF;
}

.grid-cell-1 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-2 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-3 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-4 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-5 {
background-color: #898989;
grid-column: 3 ;
grid-row: 1 / 3;
padding: 25px;
border-radius: 6px;
}

A few notes on the CSS:

• In .container, notice that we have the ability to define the width of columns and height of rows. We can also individually name columns and rows with the use of brackets: [name]
• .grid-cell-5 has a couple of interesting attributes. grid-column: 3; tells the browser to start this item as the third column. Meanwhile, grid-row: 1/3; says that the cell will span from the first row until the start of the (non-existent) third row.

The HTML:

Doing this type of layout without CSS Grid would be significantly more challenging. There are, of course, several more complicated layouts that can be achieved. But hopefully, this will illustrate the ease with which something basic can be set up.

The Demo:

See the Pen Simple CSS Grid by Eric Karkovack

CSS Grid Resources

There are a number of outstanding guides and tutorials out there to help you make the most out of CSS Grid. Here are just a few to get you started:

• 10 Creative Examples of CSS Grid in Action
• A Complete Guide to Grid By Chris House
• CSS Grid Layout By Mozilla Developer Network
• Grid by Example By Rachel Andrew
• A Complete Guide to CSS Grid By Codrops CSS Reference
• An Introduction to the CSS Grid Layout Module By Ahmad Ajmi

The post An Introduction to CSS Grid appeared first on Speckyboy Design Magazine.

That’s why I find my workflow a bit ironic. Yes, I realize change is a part of the profession. And yet I tend to stick with a familiar approach to each challenge.

Nowhere is this more apparent than when it comes to using CSS. It seems like every few years, some revolutionary new feature gets a lot of attention. And while I find it interesting, I’m usually not an early adopter.

Perhaps there’s no harm – provided the techniques I use work as intended. But inevitably, a project comes along that pushes my existing knowledge to the limits. And it’s usually then, after a period of frustration, that I finally dig in and learn something new.

If you’ve ever found yourself in a similar situation, this article is for you. Together, we’ll look at why it’s important to keep up with the latest CSS techniques. And even if your current solutions work adequately, there are still reasons to invest in learning.

New Features Are Often Easier to Maintain

Using older CSS features to create a complex layout traditionally has meant resorting to hacks. That’s not always a bad thing, as it can be a great way to learn the inner workings of the language.

The downside is that cobbling together a layout using CSS floats and clearfixes is neither stable nor elegant. There are no guarantees that these techniques will hold up over time. If your content needs change, for example, you might find that the layout simply breaks.

It’s worth noting that floats and clearfixes came about at a time when CSS didn’t have a simple method for creating multicolumn layouts. Back then, these were among the few acceptable solutions.

However, the additions of both Flexbox and CSS Grid have been game-changers. They’re designed specifically for these types of layouts and have some degree of responsiveness built in. In addition, they typically require less code than those old-school hacks.

Taken together, this should result in code that is much easier to maintain over the long term.

Use of Legacy Browsers Is Plummeting

Among the primary reasons not to adopt modern CSS has been spotty support in legacy browsers. If you needed to cater to those using the likes of Internet Explorer or outdated versions of Safari, you’d be forgiven for not jumping on the latest features.

Fallback solutions were possible, but they might also be a hack in their own right. They were also one more piece of code to maintain.

This wasn’t a huge problem for visual effects like border-radius, where the browser just ignores what it doesn’t understand. But approximating newfangled layouts in old browsers could be very challenging. It often kept me from wanting to implement a feature such as CSS Grid.

But usage for these technological fossils has become minuscule. Internet Explorer has been (partially) retired by Microsoft and is in use by less than half a percent of users. Similar numbers have been reported for legacy versions of Safari as well.

That’s not to say offering a solid fallback isn’t helpful. But the data shows that we no longer need to hold back on implementing new features, either.

More CSS Knowledge = More Versatility

Then there’s the old problem of trying to fit a square peg into a round hole. There are numerous style and layout challenges out there, and they all require unique solutions.

CSS is part of what moves the web forward. That’s reflected in what we see every day. In addition, our clients have also picked up on these shifts in presentation. They now expect us to deliver that same level of quality.

Achieving modern design with old-school CSS isn’t very efficient. Not when there are new approaches that streamline the process. By clinging to the past, we’re making more work for ourselves in the long run. It may also limit our growth potential.

Thus, it stands to reason that the more tools we have in our toolbox, the more versatile designers we become. This frees us to experiment and go beyond the same old looks.

In time, this will benefit both our portfolios and clients. What’s not to like?

Expand Your CSS Superpowers

To be clear, we don’t have to use every new CSS feature immediately after it’s released. There is always a lag in browser support. And some items may not be relevant to our niche.

Still, it’s worth keeping an eye on new developments and becoming familiar with how they work. It’s something that will stay in the back of your mind. When you need it, you’ll have a handy point of reference.

It might also save you from the frustration that comes from using older techniques to solve modern challenges. This is something I continue to wrestle with. Hopefully, this article provides the necessary motivation for all of us!

The post The Importance of Keeping Up with the Latest CSS Techniques appeared first on Speckyboy Design Magazine.

Maybe it’s a bit scary. But there’s a certain excitement that comes with it as well. You learn something new and apply it to your daily work. Most of the time, you’re all the better for it.

For example, consider a new CSS layout that makes multiple columns a breeze. Or a JavaScript library that enables you to build a stunning UI. These are the things that help to push us forward.

Yet, there’s also something that holds us back. A twist of fate so cruel that it laughs in the face of the great new thing you just mastered. We’re talking about legacy software.

This ragtag collection of old browsers, operating systems, and server configurations can be more than just a painful reminder of the past. They can also get in the way of true progress.

But don’t let it ruin your good time. Today, we’ll look at some reasons why you may not need to hold back on implementing the web’s latest and greatest.

Look at the Potential Risks and Benefits

It’s never a good idea to throw a new technology onto a website without careful consideration. Otherwise, you run the risk of negatively impacting both users and your bottom line.

Before you dive headfirst into that cool feature, take some time for analysis. Creating an old-fashioned list of pros and cons can provide you with a macro view of the situation. From there, you’ll have a better idea of whether or not to move forward.

Let’s take CSS Grid as an example. It’s all the rage these days. But is it right for your project? To find the answer, start by writing a list:

Pros

• Makes complex layouts easier;
• Code may be leaner, better performing than other layout methods;
• Lots of modern browser support;

Cons

• No or spotty support in legacy browsers;
• The same layouts may be possible with better-supported methods;

That’s just a partial list, but you get the idea. The mere act of writing (or typing) out your thoughts can lead you to go further in-depth. The deeper you go, the more thorough your analysis will be. The ultimate goal is to make the most informed decision possible.

Usage Statistics Matter

We know there are people out there still using legacy software. And while web designers tend to think in terms of browsers, that doesn’t tell the entire story. Operating systems also play a role. They not only make a difference in what features are available, but they are also likely limited by older hardware configurations as well.

For instance, looking at desktop devices, the version of macOS or Windows a user is running may restrict what browsers are available. On the surface, this might make you think twice about using a newer image format such as WebP.

Mac users who don’t have the Big Sur version of the OS or later or are stuck with a version of Safari that lacks WebP support (Chrome and Firefox support WebP, however). And someone using the aged Windows XP won’t have access to Microsoft Edge.

But that doesn’t necessarily mean that the visitors to your website are among the legacy crowd. By looking at your website’s analytics, you’ll have a better idea of which browsers, operating systems, and devices are being used.

If you find that these users make up a tiny percentage of your overall visits, that may be convincing enough to move ahead with the new technology.

Fallbacks May Be an Option

OK, perhaps you want the best of both worlds. You not only want to adopt the latest web technologies but also keep on supporting legacy users. “Leave no user behind!” is your motto.

This is very much possible with the use of fallbacks. What’s a fallback? It’s a method of switching out code that a specific browser can’t understand with something that it can.

Sticking with our CSS Grid example, we know older browsers aren’t going to do very well with it. But they do understand something like Flexbox or even old-fashioned CSS floats.

Using a tool such as Modernizr, we can detect which features a browser supports. If it supports CSS Grid, wonderful. If not, we can serve up an alternative layout.

The great thing is, you get to decide how it all works. Maybe someone using IE 11 doesn’t need a full-on replica of a fancy layout – just a reasonable facsimile. Either way, this brings some level of comfort in knowing that you’re covering as many users as possible.

Keep Moving Forward

Legacy software is still among us. Fortunately, apps that fail to support modern web technologies are increasingly dying out. As their usage numbers shrink, so do the reasons for holding back CSS Grid, WebP, and other goodies.

Even so, it’s still worth doing your homework with regards to any new technology that interests you. Think about the pros and cons of implementation and use analytics to determine the impact on users.

Fallbacks are also an effective way to mitigate any negative effects for users of outdated software. They’ll still be able to use your site. Meanwhile, everyone else gets the latest features.

The web has come a long way over the past few years. It’s time to start taking advantage of that progress.

The post Don’t Let Legacy Software Stop You from Adopting the Latest Web Technologies appeared first on Speckyboy Design Magazine.

However, implementing these features can sometimes come at the cost of browser compatibility. For websites that still have a significant number of users with older browsers, or for features that are very new, there’s a risk in leaving some people out.

Philosophically speaking, some designers are fine with this – and that’s OK. But implementing fallbacks for these features may be easier than you think. These failsafe measures offer a reasonable facsimile of a particular layout or design element and are compatible with legacy web browsers.

Today, we’ll show you how to utilize the Modernizr feature detection library for this purpose. Here we go!

What Is Modernizr?

Modernizr is one of those handy tools that web designers have been relying on for years. It’s a library that can be customized to “detect” (in reality, it’s running tests) specific features as a web page loads. From there, it adds CSS classes to the page’s <HTML> element, allowing designers to target their code based on what the library finds.

In our case, we’ll be using it to detect CSS Flexbox. However, it’s also able to look for features related to HTML and JavaScript. For instance, you can use it to determine whether a browser supports HTML5. If not, the available HTML5 shiv script can be used to bring it up to code, so-to-speak.

What’s really nice is that you can customize Modernizr to meet the needs of your project. Their website’s UI will let you pick and choose only the items you want detect. Once you’ve made your selections, click on the “Build” button to generate a custom downloadable package.

Our Build

For our purposes (and to keep things simple), we’re building our Modernizr package to detect Flexbox. We’ll also choose to minify the code and add CSS classes as well.

Step 1: Setting Up the Demo

To demonstrate how this all works will require a couple of files – both available on GitHub:

• flexgrid.css – This is our simple CSS Flexbox grid system. You’ll notice it has classes for different alignments and column widths. In addition, there are a special set of .no-flexbox classes that use old school CSS floats as well. This will help us create a similar layout style in legacy browsers.
• modernizr-custom.js – The aforementioned script will detect whether or not CSS Flexbox is supported by the current browser.

Next, we’ll want to create a new HTML document that calls both of the above files in the <head> area. In addition, the document will need an example CSS Flexbox layout and some content.

You can feel free to use the demo file below for experimentation. It contains a simple 3-column layout, along with some minor visual enhancements (more on that in a bit).

Step 2: View the HTML Document in a Modern Browser

Now it’s time to see how our demo looks in a browser. To start, let’s use a modern web browser that supports Flexbox.

At least, we suspect that it supports Flexbox. How can we tell for sure? That’s what Modernizr is here to do.

In our case, we’ll want to look at our demo page’s source, specifically the <HTML> element. If there is a class of flexbox added to the element, we know our browser supports the feature. Go ahead and view the page source in your browser – we’ll wait.

Where’s the Class?

If you tried to view the full source of the page, you may have noticed that the <HTML> element doesn’t contain a class. Don’t worry – this is normal.

That’s because the class is added at runtime, after Modernizr tests for the selected feature. Therefore, it won’t show up in the full source code.

Use Your Browser’s Developer Tools

Instead, open up your web browser’s developer tools (hit the F12 button on your keyboard). That will provide an accurate look at the <HTML> element.

Here, we’re using the latest version of Firefox Developer Edition. According to Modernizr, it supports CSS Flexbox. Yay!

Step 3: Test the CSS Fallback in a Legacy Browser

Everything’s looking pretty great in our modern browser. But how about legacy software?

Our styles are set to use CSS floats in browsers that don’t support Flexbox. That fallback should allow us to create a multicolumn layout, even on ancient setups.

According to Can I use, Flexbox has partial support as far back as Internet Explorer 10, Firefox 2, Chrome 4 and Safari 3.1. Many years have gone by since these browsers were in wide use. However, IE in particular is still hanging on here and there.

Modernizr can be configured to test for partial support – but it gets messy. It leads to writing more CSS fallbacks that take a number of different situations into account. It’s not very efficient. Therefore, we’re looking for all-or-nothing support in our tests.

Let’s take a look at our demo in IE 10 (via a browser testing service) and see what happens.

Not too shabby. Our third column gets pushed down to the next row, which can be tweaked. But what about Flexbox support?

A quick view of IE’s developer tools shows that our <HTML> element displays a class of no-flexbox. That means Flexbox is not supported here, and the CSS fallback is being utilized.

Fixing the Layout for CSS Floats

Our fallback CSS floats will not cooperate with the visual enhancements we made. The third column is pushed down to a second row, which doesn’t look very nice.

That’s because floats add padding and borders to the column width that we previously set in the stylesheet. Flexbox, on the other hand, can adjust to these items without adding to the overall column width. Hence the difference in the results.

There are a few different things we could do to rectify the situation. We might cut the width of the columns or even shrink the margin between columns. Let’s try cutting the column width from 30.66% to 28.66%.

It worked! Our columns are now happily displayed and reasonably similar to the Flexbox versions. Some spacing differences aside, this is at least usable within an old browser. We could go in and make further changes to get even closer to the original.

Detect Browser Features and Adjust Accordingly

While our demonstration focused on detecting CSS Flexbox, Modernizr can do so much more. It can look for other common features such as HTML Canvas, SVG support, CSS Grid and an array of other useful tidbits.

The idea is that, once you know what a user’s browser is capable of, you can adjust your code to follow suit. This makes adopting newer CSS specifications, for example, a much less worrisome process.

Perhaps you won’t need to use fallbacks in every instance. But it’s nice to know that implementing them is easy to do, with the help of Modernizr.

The post How Modernizr Can Help You Implement CSS Fallbacks appeared first on Speckyboy Design Magazine.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something useful!

CSS Libraries

filters.css – A tiny CSS library for applying color filters to images and more.

Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.

Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.

Knopf.css – A modern, modular, extensible CSS button system.

grxdients – A CSS library that makes adding gradients to your projects incredibly simple.

LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.

CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.

pattern.css – A CSS-only library for adding background patterns to your projects.

98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.

Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.

MVP.css – A minimalist stylesheet for HTML elements.

MoreToggles.css – A pure CSS library that provides you with stylish toggles.

Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.

CSS Frameworks

Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.

OrbitCSS – Check out this modern CSS framework based on flexbox.

Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.

mono/color – A small, responsive, dual-themed CSS-only framework.

new.css – A classless CSS framework for building HTML-only websites.

Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.

Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.

Griddle – A modern CSS framework built with CSS Grid and Flexbox.

Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.

Web-Based CSS Tools & Generators

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.

CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.

Layoutit Grid – Build your ideal CSS Grid with this online tool.

Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.

zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.

CSS Effects – A collection of click-to-copy CSS special effects.

Capsize – An online tool for defining typography in CSS.

CSS Background Patterns – Generate your own seamless background pattern.

Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.

Keyframes.app – Generate awesome CSS animations with this web-based tool.

Gradihunt – Find or generate the perfect CSS gradient for your projects.

CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.

Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.

Neumorphism.io – A tool for creating Soft-UI CSS code.

700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.

Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.

Useful CSS Cheatsheets

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.

BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.

A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.

Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.

Selectors Explained – Translate CSS selectors into plain English.

Useful CSS Items

What Does 100% Mean in CSS?

CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.

Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.

Color Theme Switcher – Learn how to add multiple color schemes to your website via CSS.

The CSS Cascade – Learn how web browsers resolve competing CSS styles.

What’s Missing From CSS? – A random look at responses to the annual CSS survey. See anything you agree with?

Favorites from Previous Years

• Our Favorite CSS Libraries, Frameworks and Tools from 2019
• Our Favorite CSS Libraries, Frameworks and Tools from 2018
• Our Favorite CSS Libraries, Frameworks and Tools from 2017
• Our Favorite CSS Libraries, Frameworks and Tools from 2016
• Our Favorite CSS Libraries, Frameworks and Tools from 2015
• Our Favorite CSS Libraries, Frameworks and Tools from 2014
• Our Favorite CSS Libraries, Frameworks and Tools from 2013

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020 appeared first on Speckyboy Design Magazine.

Our daily grind was complicated by shutdowns, kids invading the home office, and clients who needed our help in rapidly changing their business models. Even though many of us were stuck in the house, there was rarely a dull moment.

All of that aside, the year saw many developments that had nothing to do with pandemics or other chaos. New tools were brought to market, our favorite software saw important updates and the community was as creative and helpful as ever. In other words: 2020 had plenty of positives for designers and developers to celebrate.

Let’s take a look back at some important and interesting developments that impacted web designers this past year.

Modern CSS Thrives

While there were no revolutionary changes to CSS in 2020, that doesn’t mean it didn’t have a great year. Quite the contrary.

The language benefitted from the continued steady evolution of web browsers. As modern versions of Chrome, Edge, Firefox and Safari are released, support for newer CSS standards and specs grow.

In practice, this means web designers can adopt new techniques with confidence. CSS Grid layouts, for example, are a much safer bet than they were a few years ago. And while fallbacks are never a bad idea, they may not need to be as drastic.

That’s due to the dwindling number of users for legacy browsers such as Internet Explorer. According to StatCounter Global Stats, usage of IE was down to a measly 1.05% of the market as of October 2020. Compare that with the nearly 2% it captured a year earlier.

Chart courtesy of StatCounter Global Stats

The further IE and other outdated browsers are in the rearview, the easier it will be to bring the latest CSS developments to production websites. This allows the language to better fulfill its vast potential. 2020 was a big step in that direction.

Top CSS Articles for 2020

• Avoiding ‘Wasteful’ CSS in Your Projects
• BEM Methodology In CSS: A Quick Start Guide
• Creating 3D Illustrations with CSS
• How CSS Perspective Works
• How CSS Variables Can Improve Efficiency and Consistency
• LCH colors in CSS: what, why, and how?
• Learn CSS Positioning
• Positioning Text Along a Path with CSS
• Styling Layout Wrappers In CSS
• Visualizing CSS Resets

The Headless CMS Develops Its Niche

The utilization of “headless” or “detached” content management systems has continued to gain momentum. This practice involves employing a CMS (such as WordPress) to feed content to an outside application.

This leads to several interesting possibilities. You might send content out to a mobile application – allowing both your app and website to share the same blog posts. Likewise, you could leverage a static website generator such as GatsbyJS or 11ty to create a super-fast user experience – perfect for heavily-trafficked sites. All while keeping a familiar back end UI for your content creators.

And, although this technology is still relatively young, you can see it starting to take hold. GatsbyJS, for one, has come a long way over the past year. GraphQL, its companion query language, is steadily maturing. It aims to be both efficient and high-performing.

Besides, a number of tools are being built to streamline the process of creating a headless configuration. This is vital, as it is not currently a beginner-friendly task. The easier this all becomes, the more widespread and creative its usage will be.

For now, headless CMS configurations are being deployed more and more. Still, unless you’re an expert, diving in head-first and adopting this technology for client projects may not be wise.

Therefore, it’s probably best to start small and experiment. Once you are on solid ground, going headless could be a great solution.

Top Headless CMS Articles for 2020

• An Honest Review of Gatsby
• Building a Headless WordPress Website with GatsbyJS
• Building Serverless Front-End Applications Using Google Cloud Platform
• Don’t Build a Frankenstein Website!
• Going Jamstack with React, Serverless, and Airtable
• Headless CMS: What and Why
• How to Begin Your Journey Developing Headless WordPress Sites
• How To Create A Headless WordPress Site On The JAMstack
• Powering React Native Applications with ButterCMS Headless Engine
• When Does Using Headless WordPress Make Sense?

Prototyping Tools Improve and Evolve

The way we build website and mobile application prototypes continues to change. Many designers are eschewing traditional tools like Photoshop in favor of niche apps like Adobe XD, Figma, and Sketch.

Each of these tools has been built with web and mobile applications in mind. Therefore, designers don’t have to settle for passing along static mockup images to clients. Rather, they can create something fully-interactive that better represents what the final product will do.

Of course, the tools themselves are not new – they’ve been on the market for several years. But in 2020 the argument for using any of these apps has become more compelling.

For one, each has robust developer communities that release helpful goodies such as plugins and UI kits. They help designers extend functionality and increase efficiency. And the apps themselves have released some exciting features, along with smoothing out rough edges.

However, another feature of prototyping apps also became very important: their built-in collaboration tools. They facilitate remote feedback from both clients and team members. With so many of us working from home this year, anything that makes the review process easier is a massive bonus.

Top Prototyping Tool Articles for 2020

• 10 Tutorials to Help You Master Adobe XD
• 20 Free Adobe XD UI Kits for Web & Mobile App Designers
• 20 Free Mobile UI & Wireframe Kits for Sketch App
• 35 Free Web & Mobile UI Templates for Figma
• Adobe XD Has a New Look
• Design To Engineering Handoff
• Gradient angles in CSS, Figma & Sketch
• How to Turbocharge Your Components with Figma Variants
• Part of your World: Why We’re Proud to Build a Truly Native Mac App (Sketch)
• Sketch vs. Figma vs. Adobe XD: Which Design Tool Is Best for Beginners?

The WordPress Gutenberg Block Editor Becomes More Polished

December 2020 marked the Gutenberg block editor’s second birthday. But, unlike most 2-year-olds, it seems like the fits and tantrums are (mostly) a thing of the past. Gutenberg is becoming quite mature for its age.

Looking at the editor’s UI, it’s lightyears ahead of where it was back at the beginning. A lot of development time went into making the interface more intuitive. Getting around is much easier, as is finding and selecting individual blocks.

Accessibility was also a big focus. This particular subject is important in all areas of web development but was also a major criticism of earlier versions of Gutenberg. So, improving both the UI and making it more accessible are big wins for 2020.

The year also saw the introduction of custom block patterns, which make it easier to use and reuse a specific layout. The ability to implement a custom layout anywhere it’s needed is no small achievement. This was one of the missing features that made the block editor a difficult sell for some use cases.

And, while not ready for prime time just yet, Gutenberg-powered full site editing (FSE) is in the works. This will enable users with a compatible theme to edit all aspects of their website through the block editor. The first such theme, Q, was made available for download earlier this year.

All told, WordPress now has a default editing experience that can be seriously considered for just about any project. There are still some advantages to page builders – not to mention the old Classic Editor. But blocks are catching on.

Top WordPress Gutenberg Block Editor Articles for 2020

• Block Navigation Plugin Provides Missing Context-Based Outline for the WordPress Editor
• Create a Custom Color Palette for the WordPress Gutenberg Editor
• Getting the WordPress Block Editor to Look Like the Front End Design
• How to Bulk Convert Classic Blocks to Gutenberg in WordPress
• How to Create a Simple Gutenberg Block Pattern in WordPress
• How to Use the WordPress Gutenberg Cover Block
• Matt Mullenweg and Matías Ventura Demo New Image Editing Tools Coming to Gutenberg
• Styling Wide and Full-Width Gutenberg Blocks in WordPress
• Tips for Converting an Existing WordPress Website to Use the Gutenberg Block Editor
• What is Full Site Editing and how is it shaping a new WordPress?

In 2020, the Focus Was on the Bigger Picture

One thing you may notice about the items above is that they all involve evolutionary change. Nothing here appeared to be a watershed moment for web designers. In fact, posing this subject on Twitter didn’t result in any earth-shattering recommendations either.

Maybe that makes for less-than-compelling headlines. Yet it also means that, in a chaotic year, there was a comforting consistency for the web design industry. The tools and technologies we already use just got better. Nothing to complain about there.

When we look back years from now, a lot of historic events will stand out from 2020. But web designers may see it as a time that set the table for bigger things yet to come.

The post 2020 Web Design Year in Review appeared first on Speckyboy Design Magazine.