These templates are easy to use and fully customizable, making it simple to create a professional-looking website without breaking the bank. With a responsive design, your website will look great on any device, from desktop computers to mobile phones.

By utilizing templates, you can impress your visitors with your design expertise without needing to be an expert in web design. These templates offer a wide range of features and customization options, allowing you to create a website that stands out from the competition.

Using templates can save you both time and effort when building web pages online. They come pre-built with various design elements, including typography, color schemes, and layouts. This means you don’t have to spend hours creating each page from scratch, freeing up time for other important tasks.

Whether you’re a small business owner, blogger, or designer, you’ll find a free template that meets your needs in this collection. There are templates available for various industries, including business, e-commerce, portfolio, and more.

The post The 50 Best Free Responsive HTML Website Templates for 2024 appeared first on Speckyboy Design Magazine.

Thankfully, the advent of CSS Flexbox has helped to make this previously-difficult process a much simpler one. Because Flexbox was created with multi-container (columns or rows) layouts in mind, we’ve said goodbye to all of those old hacks.

The result is that we can create some absolutely amazing layouts in a fraction of the time (if they were possible with floating elements at all). Below, we’ve compiled some prime examples of CSS Flexbox in action. Let’s take a look at what it can do!

The post Create Better CSS Layouts with Flexbox 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.

Its greatest feature is its ability to manipulate an item’s width/height to occupy all the space within its container (also known as a “flex container”) – otherwise, it shrinks to prevent overflow.

Unlike the regular CSS box model, flexbox offers an enhanced model for block elements without the use of floats. And, it supports direction – which means you can control the flow of each item vertically or horizontally. Almost all browsers that are active today support it, so it’s good to know how it can be used on different kinds of projects.

To give you an idea of how amazing flexbox is, I wrote this quick tutorial to show how you can use it on your website. We’ll use flexbox properties and media queries to enable the responsive layout of each element on different screen sizes and show you the advantages of using it on your projects. Let’s get started.

If you’re new to flexbox, you might also like to take a look at these Guides, Tools & Frameworks for getting started with CSS flexbox.

Navigation Bar Using Flexbox

Flexbox is perfect for creating a responsive navigation. You can lay out the navigation in one column on smaller viewports, scale it up on medium size viewports and position it in one row on large and extra-large viewports. Let’s look at how to create a navigation using flexbox.

For the HTML, we will wrap our navigation within a header tag. We will use an unordered list (ul) for our links with their respective classes. Here is the HTML:

<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

For the CSS, we will first add the basic styles that we need:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,h3,a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

When the viewport is 769px or wider, we will use flexbox to change the vertical layout of the navigation to a horizontal layout. That will fill the horizontal space of the large and extra-large screens and devices.

To do that, we will use media queries to manipulate the layout. We will declare the display: flex to set the flexbox on all elements. We will also set the flex-direction: column to set the axis of our element from top to bottom.

@media (min-width: 769px) {
  .header,.main-nav {
    display: flex;
  }

  .header {
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }
}
}

On a screen size with a minimum width of 1025px, we will set the flex-direction: row with justify-content: space-between. This means that our header will be displayed horizontally instead of vertically.

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

Here is the final output:

See the Pen Flexbox Navigation Bar by Sam Norton

Thumbnail Gallery with Flexbox

Thumbnails are smaller versions of images that are organized in a particular area of a website to give you a hint of how the full-sized picture looks. Usually, thumbnails are used for image galleries. With flexbox, you can create thumbnails using the row property while manipulating the display size of the image.

For our thumbnail example, we will create a div with a class of thumb that will wrap all of our thumbnail images. This will also be our flex container.

<div class="thumb">
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
</div>

For our CSS, we will set a width for the flex container, which is the thumb class. We will then set the display to flex to set the flexbox property inside it. There are three properties that we need:

• flex-wrap – to set our flexible items in a single line or can be flowed into multiple lines. In this case, we use wrap. This means our thumbnails will be set to the multi-lines direction.
• flex-direction – to specify the direction of the flexible items. In this case, we set it to columns. This means our thumbnails will be displayed from top to bottom.
• flex-flow – which is a shorthand property for the flex-direction and the flex-wrap.

.thumb { 
  width: 30%;
  margin: 0 auto;
  border: 1px solid #898989;
  padding: .6vw;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Next, we will set the width on our images using the box-flex property to auto. To specify a -moz-box or -webkit-box grows to fill the box that contains it. The rest of the code is simple media queries to manipulate the padding on a viewport with a maximum width of 480px.

.thumb div { 
   width: 100px; 
  margin: .6vw; 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
}
.thumb div img { 
   height: auto; 
  width: 100%; 
}
@media screen and (max-width: 480px) {
  .thumb div { margin: 0; }
  .thumb { padding: 0; }
}

Flexbox Forms

A form is a vital part of every website. It enables users to input data using checkboxes, radio buttons, or text fields that are sent to a server for processing. With flexbox, you can create responsive forms without depending too much on media queries.

Let’s first create our text fields and wrap them within a form tag. For our container, we will use a div with a class of form.

<div class="form">
  <form action="#">
    <div>
      <p class="title">Registration Form</p>
      <p><label for="first name">First Name :</label> <input autofocus="" id=
      "first_name" type="text"></p>
      <p><label for="last name">Last name :</label> <input id="last_name" type=
      "last_name"></p>
      <p><label for="email">E-mail :</label> <input id="email" type=
      "email"></p>
      <p><input class="btn" type="submit" value="Register"></p>
    </div>
  </form>
</div>

For our CSS, we’ll add first the basic styles:

form {
  border: 1px solid #555;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  margin: 0 auto;
}

.title {
  font-size: 27px;
}

.btn {
  position: relative;
  vertical-align: top;
  height: 40px;
  width: 25%;
  padding: 0;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background: #4d4d4d;
  border: 0;
  border-bottom: 2px solid #d0d0d0;
  cursor: pointer;
  margin-left: auto;
}

label {
  width: 7em;
  margin-right: .5em;
}

Now to make it responsive, let’s add display:flex on the paragraph label tag so that it collapses on smaller screens. We will also add flex: 1 on our input type to enable all of the flexible items on the same length inside the same container. We will then add our media queries for screens with a maximum width of 600px and display the labels of each field as block elements as well as the button element.

input:not([type="submit"]) {
  flex: 1;
  padding: 10px 20px;
  box-sizing: border-box;
}

p {
  display: flex;
}

@media (max-width: 600px) {
  p {
    display: block;
  }

  input {
    width: 100%;
  }

  input[type="submit"] {
    width: 100%;
  }
}

Check the final output below:

See the Pen Flexbox Forms by Sam Norton

Sticky Footer with Flexbox

A sticky footer is a footer that “sticks” to the bottom of the screen no matter how long or short the content of the web page is. While there are several ways to create one, flexbox is a great option.

For our HTML, let’s create a simple web page using the header, section, and footer tags:

<header>
  <h1>A Big Header</h1>
</header>
<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
  <p>© Flexbox Sticky Footer</p>
</footer>

For our CSS, we will set the display: flex property to our body tag to enable flexbox. We will also set the flex-direction column to set the direction of the flex items from top to bottom, along with some basic styles.

body {
  font-family: 'Montserrat',sans-serif;
  line-height: 1.6;
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

Since we are using the section tag as our container, we will set the flex property to 1. This sets the section content to the same length regardless of its content relative to the rest of the container.

section {
  padding: 10px;
  flex: 1;
}

The rest are just simple styles for our elements.

Check out the demo below:

See the Pen Flexbox Sticky Footer by Sam Norton

The CSS3 Flexible Box is a very helpful feature nowadays. Many web designers and developers find it easier to use on their websites than the typical CSS layout model.

The post Getting Started With CSS Flexbox Using Practical Examples 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.

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.

You will find tools for creating flexbox and grid layouts, responsive menu generators, apps for collecting stats and sorting CSS, generators for creating pie and circle menus, and much, much more.

Get ready to start bookmarking!

Flexbox CSS Tools & Web-Based Apps

Flexulator

Flexulator – An interactive CSS Flexbox space distribution calculator.

FlexBox Parent Attribute Visualizer

The FlexBox Parent Attribute Visualizer is an interactive way to see the effect of various CSS Flexbox settings.

Visualize the box-model

A useful app to help you visualize the box-model.

Flexy Boxes

Flexy Boxes is a CSS flexbox playground and code generation tool.

CSS Grid Tools & Web-Based Apps

CSS Grid Generator

CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.

CSS Grid Layout Generator

CSS Grid Layout Generator – Create complex grids with this visual tool.

CSS Grid Layout Builder

Visually Build Responsive Layouts with CSS Grid is a tool to help you build a responsive CSS grid.

Layoutit!

Layoutit! is an interactive CSS Grid building tool.

CSS Animation Tools & Web-Based Apps

Keyframes.app

Keyframes.app is a web app and Chrome extension for creating CSS animations.

CSSynth

CSSynth is a small app for running animations in order.

Animated CSS Background Generator

Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

Rocket

Rocket is a simple tool for creating web animations.

SpinKit

SpinKit allows you to create simple loading spinners animated with CSS.

CSS Cheatsheet Web-Based Apps

CSS Alignment Cheatsheet

CSS Alignment Cheatsheet is a nicely-illustrated guide to aligning all the things.

Screen Size Map

Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.

CSS Shape Generators

Trianglify.io

Trianglify.io will generate custom low-poly patterns in either PNG or SVG format.

CSS Doodle

css-doodle is a web-based tool for drawing simple patterns with CSS.

Circulus

CIRCULUS.SVG is an SVG circular menu generator.

CSS Measurement Tools & Web-Based Apps

CSS Ruler

CSS Ruler is a handy web-based tool for exploring CSS lengths.

px-em

px-em is a simple PX to EM calculator.

CSS Border Tools & Web-Based Apps

Fancy Border Radius

Fancy Border Radius Generator is a generator tool for creating CSS borders that go beyond the normal.

CSS Color Tools & Web-Based Apps

Mycolorpanda

Mycolorpanda – Create CSS gradients in a breeze with this simple tool.

CSS Duotone

CSS Duotone Generator is a simple tool for creating customized duotone effects with HTML & CSS.

Pantone Sass

Pantone Sass is a list of Pantone colors as Sass variables.

Flat UI Colors

Flat UI colors reference.

BADA55.io

BADA55.io is an app for finding the most badass leet words for your CSS hex colors.

CSS Gradient Tools & Web-Based Apps

Gradient Generator

Gradient Generator – Take two colors and create a variety of custom CSS gradients.

CSS Gradients

Gradient Joy is a web-based tool for generating gradients as placeholder images.

CSS Typography Tools & Web-Based Apps

typesetwith.me

typesetwith.me is a web-based typography and legibility sandbox.

Type Scale

Type Scale is a typographical visual calculator.

TypeWonder

TypeWonder is a useful tool for testing web fonts on the fly.

Font Library

Font Library is an open source project to tag and organize Google Fonts.

Icon Font Tools, Apps & Generators

GlyphSearch

GlyphSearch is an app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.

FontAwesome Finder

FontAwesome Finder will quickly and instantly search FontAwesome icons.

Fontello

Fontello will generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .

Fontsatic

Fontsatic is a tool for creating custom icon fonts (over 6,000 icons to choose from).

SVG Icon Tools, Apps & Generators

Glyphter

Glyphter is a handy tool for creating icon fonts from SVGs.

iconizr

iconizr is a tool for converting SVG images to a set of CSS icons.

iconmelon

iconmelon will quickly create a library of SVG icons.

Miscellaneous CSS Tools

DropCSS

DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

extractCSS

extractCSS is a tool which can extract ids and classes from HTML documents and output a CSS stylesheet.

CSS Shrink

CSS Shrink is a small tool for ‘shrinking’ CSS files.

EnjoyCSS

EnjoyCSS is a useful tool that allows you to adjust rich graphical styles quickly without coding.

CSS3 Generator

CSS3 Generator is a simple CSS3 generator.

CSS clip-path

Clippy is an online tool you can use to create a CSS clip-path.

Encoding / Decoding Tool

One Click Encoding Decoding Tool is a useful app for converting content to ASCII character-set.

Superposition

Superposition – An app that extracts the design tokens from your website for use in your favorite design tool.

branded

branded. – A free tool for creating and maintaining style guides.

The post 50 Free Web-Based Tools & Apps for Working With CSS appeared first on Speckyboy Design Magazine.

We’ve compiled a collection of some of the best resources out there to help you learn more about what Flexbox is and how it can help you in your layouts.

Quick Jump: Flexbox Learning Guides, Flexbox Examples & Resources, Web-Based Flexbox Tools and Web Frameworks Based on Flexbox.

You may also like these toolboxes: CSS Animation, SVG Workflow Tools, Styleguide Tools, or Tools for Formatting CSS.

Flexbox Learning Guides

Flexbox CSS Reference By Sara Soueidan

Flexbox CSS Reference is a collection of writings that will help you learn the basics. There’s a rundown of all the various Flexbox properties and some excellent interactive demonstrations of their capabilities.

Dive into Flexbox – Design, Tools & Workflow By Greg Smith

Dive into Flexbox provides some background information on Flexbox including why it holds such promise, a brief history, along with various examples of Flexbox concepts and properties.

Using CSS Flexible Boxes By MDN

Straight from the Mozilla Developer Network, Using CSS Flexible Boxes will introduce you to the layout mode and provides a handy browser compatibility chart.

A Complete Guide to Flexbox By Chris Coyier

A Complete Guide to Flexbox is perhaps everything you ever wanted to know about Flexbox, but were afraid to ask. Lots of useful examples here to get you up-to-speed.

A Visual Guide to CSS3 Flexbox Properties By Dimitar Stojanov

Not only will A Visual Guide to CSS3 Flexbox Properties help you with the basic concepts, there’s a fun Flexbox Playground that will show you how various properties will affect your layout.

What The FlexBox?! By Wes Bos

What The FlexBox?! uses an in-depth series of 20 free videos to unlock the mysteries of layouts for more visual learners. Sometimes, it’s just nice to have someone show and guide you with what can be a complicated topic.

flexbox in 5 Minutes (Interactive Tour)

If you’re sick of having to read long tutorials, flexbox in 5 Minutes might be for you. It’s a simple tour of what Flexbox is and does in just 5 minutes (comprised of 53 slides).

Flexbox Examples & Resources

Solved by Flexbox By Philip Walton

Featuring some long-sought-after layout scenarios, Solved by Flexbox will show you techniques behind some of the layouts that can now be easily achieved.

Flexbox Snippets for Atom

Flexbox Snippets for Atom makes writing code with the Atom text editor a breeze.

Flexbox Snippets for Sublime Text

If you’re using Sublime Text, installing Flexbox Snippets for Sublime Text will help you create layouts more efficiently.

Web Based Flexbox Tools

Flexplorer By Bennett Feely

Flexplorer lets you create complicated layouts using a very simple interface.

CSS Flexbox Please! By Eiji Kitamura

CSS Flexbox Please! not only generates layout CSS, it also provides HTML you can use with your project.

Flexbox Cheatsheet

Flexbox Cheatsheet is an interactive guide for CSS Flexbox properties, with plenty of examples.

Test CSS Flexbox Rules Live By Tayler Summs

Test CSS Flexbox Rules Live will demonstrate the effects that each property can have on a given layout.

Flexbox Tester By Eiji Kitamura

Flexbox Tester lets you play with settings for each item in a layout and displays the pixel width of items as you make changes.

Fibonacci Flexbox Page Layout Composer By Max Steenbergen

Fibonacci Flexbox Page Layout Composer is a tool aimed at non-developers who want to create their own layouts using Flexbox.

Flexy Boxes By Pete Boere

Flexy Boxes will help you generate layouts and tweak the properties of both the flex container and items.

Flexbox Playground By Gabi Siquès

Flexbox Playground is a colorful way to learn about the power of Flexbox layout properties.

Web Frameworks Based on Flexbox

Flexbox Grid – Grid System Based on flexbox

Flexbox Grid is an easy-to-use framework with lots of examples for creating various types of layouts.

cssPlus – Layout Scaffolding Based on Flexbox

cssPlus helps you create flexible and responsive layouts all based on Flexbox.

STRUCTURE – Declarative Flexbox Based Grid Framework

STRUCTURE is a declarative framework – meaning it uses non-standard attributes on elements. This can cut down on development time as opposed to adding several CSS classes to each item.

Waffle Grid

Waffle Grid is an easy to use flexbox grid system.

RAGrid

RAGrid is a flexbox grid that uses recognizable attributes instead of classes.

Griddd

Griddd is a dead simple, customisable, flexbox-based grid.

Juiced – Flexbox CSS Framework

Juiced took some inspiration from Foundation and Bootstrap but left out the heavy styling and JavaScript.

…and finally…

Flexbox Froggy By Thomas Park

Like to learn by doing and having some fun while you’re at it? Flexbox Froggy is a game that requires you to write Flexbox code!

Concluding

When used correctly, Flexbox can make setting up even the most complex layouts a much easier task. Just think about the possibilities of creating layouts that automatically adjust to their content and screen viewports. And it’s all built into CSS!

Start using these resources today and flex your layout muscles.

The post CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks appeared first on Speckyboy Design Magazine.

Somewhat ironically, we are seeing some elements of print design translate over to the web. Sure, designers have been attempting to do this for some time. But the advent of CSS Grid and other technological developments have actually made these attempts much more successful than in years past.

The snippets below show that printed items are still on the mind of some very talented designers. Some of them make good use of print techniques, while others are just fun takes on those things you can still possess in the physical world.

The Printed Article

One of the most fun aspects of print design is the premise that borders only hold you back if you choose to let them. There’s nothing that says you can’t have text wrap around a piece of artwork, mimicking its shape. That’s what makes this snippet so cool. We see the possibilities of what a traditional, hand-crafted layout could be on the web.

Trading Cards

Remember the fun of opening a pack of trading cards and comparing your collection with a friend? This snippet makes it fun to “flip” through a stack of virtual cards with the help of GSAP and JavaScript. Maybe the best part is that you won’t have to worry about damaging the cards with your grubby little hands.

Check, Please

Here’s an example of a guest check, just like you’d receive after a meal at a restaurant. It’s an example of how both CSS Grid and Flexbox can make previously difficult layouts easier to achieve. Not to mention that this version is much easier to read than the illegible copies often served up at greasy diners.

Retro Album Cover

Music is undoubtedly a big inspiration to many designers. But it’s not just the recorded tunes that make an impact. Album covers, like this recreation of Sam Cooke’s classic “Twistin’ the Night Away”, embed themselves into our memory.

What’s in the Mail?

I don’t know about you, but I still get excited when an unexpected piece of snail-mail shows up (as long as it’s not a bill or a court summons). The closest we can get online may just be this envelope that you can “open” and subsequently view the greeting card that’s inside. It’s a clever use of JS and CSS animation that will brighten your day.

In Today’s News

The print newspaper is struggling in many parts of the world, as more people get their news online. But this example gives us the best of both worlds. CSS Grid powers the print-like layout, while an API feeds the paper with up-to-the-minute news updates. Even better is that you won’t have to worry about a delivery gone wrong.

Please Take Our Brochure

Printed brochures are still a very common sight. However, they tend to be something you grab and then never actually read. Just think about all the paper we waste in the process. This virtual brochure bodes much better for the future as it both looks amazing and saves trees.

Put It on My Card

As more consumers start paying with mobile apps, it could result in a decline in those little plastic cards we’ve carried around for years. If they do become extinct, this gorgeous recreation will show future generations what they missed out on. It uses CSS transitions and transforms to create a beautiful 3D effect as you hover over the card.

Removing the Limitations of Web Design

The code snippets above demonstrate two things. First, it’s quite amazing to see some of the very print-like layouts that can now be used online. Second, you can leverage CSS and JavaScript to go an awfully long way towards creating realistic objects.

Little by little, it seems that many of the limits web designers have faced are fading away. There will always be differences between print and the web, of course. But the web is doing its best to level that playing field.

The post Fun Examples of CSS Imitating Print Design appeared first on Speckyboy Design Magazine.

CSS Frameworks

Terminal CSS – Attention terminal lovers, there’s now a CSS framework for you.

xstyled – A consistent theme-based CSS for styled-components.

Fomantic-UI – A free, “human-friendly” development framework for creating responsive websites.

Raster – A simple CSS Grid system that utilizes descriptive HTML.

Diez – A free, open-source design language framework.

Butter Cake – Check out this modern, lightweight CSS framework.

CSS Libraries

Destyle.css – An “opinionated” CSS reset library.

Immutable Styles – A library for styling web interfaces with a focus on predictability and robustness.

Matter – A collection of Material Design components in pure CSS.

Water.css – Simple styles and semantic code for your static website.

Flexbox Case Studies – Tutorials to help you achieve common Flexbox layouts.

IsometricSass – A Sass library for creating isometric 2D without JavaScript.

css-fx-layout – A lightweight CSS Flexbox library that includes both classes and HTML data attributes.

a11y-css-reset – A set of global CSS rules to help improve the accessibility of your projects.

augmented-ui – A tool for creating “futuristic, cyberpunk-inspired UI” with CSS.

CSS Animation

CSS Wand – Copy, paste and customize a variety of useful animation styles.

CSSFX – A collection of animated CSS buttons, hover effects, inputs and loaders for use in your projects.

CSSeffectsSnippets. – A collection of handy CSS animations that you can copy and paste.

useAnimations – A free CSS library of icon-based microinteractions.

extra.css – Use this CSS Houdini library to add stunning effects.

Izmir ImageHover CSS Library – A mini CSS library built by Ciaran Walsh for quickly creating beautifully animated image hover elements.

CSS Animo – A collection of copy & paste CSS animation effects.

CSS Typography

CSSans Pro – A free colorful and sassy font.

RFS – A responsive font size engine that automatically calculates sizing based on browser viewport.

Typetura – A tool for fluid typesetting, based on screen size.

Interactive Typography Cheatsheet – A fun tool for learning the various components of a letterform.

TypeSafe CSS – A tiny (under 1KB) responsive CSS framework with a focus on reading and writing.

Fontsmith Variable Fonts – Learn about this much-hyped development in typography – complete with examples.

Font style matcher – A tool that helps minimize the discrepancy between a web font and its fallback.

Fontanello – A browser extension that displays typographic styles via right-click.

GooFonts – Use this resource to find Google Fonts based on tags. Great for discovering lesser-known items.

CSS Tools & Generators

Flexulator – An interactive CSS Flexbox space distribution calculator.

CSS Grid Layout Generator – Create complex grids with this visual tool.

branded. – A free tool for creating and maintaining style guides.

CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.

Superposition – An app that extracts the design tokens from your website for use in your favorite design tool.

Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.

Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

Gradient Generator – Take two colors and create a variety of custom CSS gradients.

Mycolorpanda – Create CSS gradients in a breeze with this simple tool.

Amino – A live CSS editor for Google Chrome.

CSS Learning Guides & Cheatsheets

CSS Selectors Cheatsheet – A combination of a game, quick reference guide and printable cheatsheet.

Relearn CSS layout – Learn to harness the algorithms that power browsers and CSS to create better layouts.

CSS Guidelines – A detailed document to help you write more scalable and manageable CSS.

The Complete Guide To SCSS/SASS – The ins and outs of the popular CSS pre-processor.

CSS Layout – A collection of popular CSS layouts and patterns.

Flexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.

CSS Inspiration

Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.

And, finally…

CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.

Our CSS Snippets Collections

• 10 CSS Animated Underline Text Effects Snippets
• 10 Advanced Image Hover Effects Snippets
• 8 Tip-Top Toggle Switch CSS Snippets
• 10 Character Designs Created Entirely With HTML & CSS
• 10 Incredible Examples of CSS, JS & SVG Logo Design
• 10 Examples of Unorthodox Shapes Created with CSS
• 9 Free Progress Bar JavaScript Plugins For Web Designers
• 8 Code Snippets That Demonstrate the Power of CSS Grid
• 10 Free CSS & JavaScript Select Box Snippets
• 8 Ways to Make the Search Field Sexy with CSS
• 9 Custom Open Source File Upload Field Snippets
• 10 Exciting CSS & JavaScript Page Transition Effects
• 8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration
• 10 Snippets for Creating Split Screen Layouts
• 10 Amazing CSS & JavaScript Text Animation Snippets
• 10 Amazing CSS Button Libraries & Collections
• Free Modal Window Libraries & Plugins

More CSS Resources

You might also like to take a look at our previous CSS collections: 2018, 2017, 2016, 2015, 2014 or 2013.

And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.

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