So, what exactly is a Bento layout? Think of it as a puzzle. Different-sized containers fit together to create a seamless look. Inspired by Japanese culture, it’s popping up all over the web.

There’s good reason for Bento’s growing popularity. You can use these layouts in a multitude of ways. Everything from listing blog posts to product features is possible. They’re also perfect for dashboard screens.

We should also mention the role that the evolution of CSS has played. Both CSS Grid and Flexbox make these layouts easier to build. No hacks or workarounds are necessary!

With that, here’s a look at 8 beautiful Bento grid layouts.

Complex Bento CSS Grid Layout

CSS Grid packs a lot of power into a tiny bit of code. For example, this complex grid layout requires only 43 lines of CSS. The layout is both efficient and naturally responsive. Therefore, you won’t have to play around with media queries.

See the Pen Complex Bento Layout

Bento-Style Responsive Dashboard

Here’s a gorgeous dashboard layout that benefits from Bento. The layout offers a great way to display relevant content. Everything is neatly organized and easy to follow. The use of photography and color makes this example stand out.

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan

Bento Design Concept Layout

This page layout is a different take on the Bento aesthetic. There’s a sidebar featuring in-page navigation. Clicking a button expands it. Meanwhile, the content container maintains a consistent height.

See the Pen bento design concept by Abhishek Bhardwaj

Bento-Box-V1.0.1

Bento layouts also benefit from minimalism. This layout features fewer bells and whistles. Notice the use of white space and legible typography. The animated charts catch your eye without being overwhelming.

See the Pen Bento-Box-V1.0.1 by Gwenaël Guiraud

Sticky Bento on Scroll

This “sticky” presentation adds special effects to the mix. Watch how certain elements stick as you scroll. The idea is that you can go beyond static grids. Bento can be fun, too!

See the Pen Sticky Bento on Scroll ✨ by Jhey

Bento Grid Using CSS Flexbox

Let’s check out another fun example using Flexbox. This grid has a neon look and includes cool hover effects. Bonus points here for maintaining legibility and responsiveness.

See the Pen bento grid – challenge (Chrome +111) by EaterUsr

Card-Based Layout with Gradient Borders

Here’s an example for those wanting to stand out from the crowd. This card-based layout features animated borders, “wipe” effects, and beautiful hover styling. The layout remains clean – even with all those goodies.

See the Pen Cards (gradient border) by Dan

CSS Grid & :has() Grid Layouts

We can achieve a lot with the CSS :has() pseudo-class. This example uses it to adjust the layout as boxes are added and subtracted. Watch as the layout maintains perfect symmetry throughout.

See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle

Use Bento Grids to Keep Your Layout Nice and Tidy

The idea of using Bento aesthetics in web design isn’t new. However, older CSS layout techniques made them difficult to build. That’s no longer the case.

Perhaps the best part is that modern CSS does all the dirty work. We don’t need to compute complex calculations. CSS Grid and Flexbox can do this for us.

That leaves us free to experiment. The examples above demonstrate what is possible. And you can get as creative as you like.

Want to see more Bento grid examples? Check out our CodePen collection!

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

Without needing to install anything, all you have to do is bookmark, and save them for that day when required.

From assessing your website’s accessibility to generating sophisticated flexbox or grid layouts, refining typography, choosing the perfect color scheme, copying and pasting CSS animations, to beautifying code screenshots, this collection covers a broad range of web design needs.

No matter what kind of CSS time-saver you’re searching for, you’ll likely find it here. Keep these tools at your fingertips to make your CSS workflow quicker and that little bit easier.

The post 100 Tiny CSS Tools & Apps for Web Designers appeared first on Speckyboy Design Magazine.

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 Web Templates appeared first on Speckyboy Design Magazine.

Using Flexbox for layout adjustments comes with several benefits. It reduces the need for extra HTML elements, making your code easier to manage and cleaner. Flexbox also provides better control over alignment, distribution, and spacing of items within a container, even when their sizes are unknown or dynamic. This level of control is invaluable in a web environment where user experience is key.

From learning the basics to exploring advanced techniques, this collection aims to equip you with the tools and knowledge needed to master Flexbox. Whether new to Flexbox or looking to refine your skills, this CSS toolbox will provide all the necessary resources.

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

The post CSS Flexbox Toolbox – Learning Guides, Web-Based Tools & Frameworks 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.

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.

There are some designers, on the other hand, who favor a bottom-up approach. These designers start with the smallest elements and move their way up to big-picture design, from the simple to the complex. This is also referred to as atomic web design. Why would a website designer work this way, and is it right for you? Let’s explore the possible merits.

Why Atomic Design?

The bottom-up process is called atomic design because it was influenced by chemistry. Consider the following:

• Atoms are the world’s most basic building block. They can’t be broken down anymore without losing the essence of what they truly are.
• Combine two or more atoms together, and you’ll get molecules. Atoms become more versatile and functional when they band together.
• When molecules combine together in a meaningful way, they become organisms – living, tangible forms.

Atomic design follows the same basic concept – it holds that even the most basic HTML elements can combine to create something tangible and functional – but putting it together requires the bottom-down approach. In atomic design, that process looks like this:

Image via bradfrost.com

• Atoms are the foundational building blocks of our pages that can’t be broken down anymore before losing their functionality. They include the most basic of HTML elements like inputs, buttons, form labels, and so on.
• Combine atoms to form molecules and you’ll get something that takes on new properties. In web design, molecules are things like search forms (a form label, a button, and an input combined).
• Organisms in a digital interface are groups of simple user interface (UI) elements working together toward a common goal. For example, a search form, a logo, and a navigation list might make up a header.
• Templates are groups of organisms functioning together to create page-level objects that articulate a design’s structure.
• Pages are instances in which we can see what a UI looks like with text, images, and media in place.

Atomic design isn’t linear – rather, it’s a model we use so we can think of the product as the sum of its parts. Each stage plays an important role in the end product – paying attention to these elements will help assure a quality user experience.

The Benefits of Atomic Design

Atomic design can require a lot more thought and planning, but it’s often worth the extra effort. Here are some of the benefits of using this type of design:

Build a System of Components

When you break a system down to its most basic parts (atoms), it’s easier to see which parts of a site can be reused and how you can mix and match them to create more molecules and organisms.

Image via creativebloq.com

More Intuitive Layout

Because of the nature of atomic web design, interfaces tend to be more intuitive and easier to code. This is true during the creation and in the future when you need to tweak your site. As an added bonus, it’s also easier for a new developer to understand the codebase.

Atomic design also minimizes the risk of writing duplicate code. Since you’re using “atoms” to create the initial layout, it’s easier to see where you’re using different components of a site. If you need to replicate existing code elsewhere on the site, it’s easier to find where it’s stored.

Your Style Guide Is Simple

If you design a site according to the principles of atomic design, you can incorporate all your atoms and molecules into your styleguide.

This keeps your design and messaging consistent across platforms. You can even extrapolate elements from a design that’s not atomic, but it’s always better to begin with atomic design principles than to try and apply them retroactively.

Faster Prototyping and Updating

When you have a list of atoms on hand from the beginning, it’s easier to mockup pages and prototypes. All you need to do is combine your basic elements for the page, then you can refine and customize for the final site.

Atomic design also facilitates quick updates and removal of certain design features. When you’re only changing one element at a time, it’s easier to ensure that your updates get carried out throughout the interface.

Why Consider Atomic Design?

Aside from the benefits outlined above, atomic design helps fulfill a simple purpose: Designers can easily discover the truths about a project’s design – the quality of its basic elements as well as its organization around the entire structure.

Atomic design encourages a strong user experience (UX) structure by providing a methodology for designers. By adhering to component-based guidelines, designers can still rely on their creativity without clashing with developers.

Developers naturally work from the ground up, but design tends to be a more artistic enterprise. Often, an artist begins with a general idea and solidifies it as they go along. Atomic design, by contrast, requires designers to work from the ground up, which can help ensure that an interface is consistent and purposeful. It also saves time and tension between a designer and developer.

A common language can be created when you utilize the atomic design method to create a web page. This common language, called your interface inventory, helps assure that developers and designers are inventing new solutions to an old problem, especially when that problem already has a working solution.

For example, you need to add a new contact form to a project. Thanks to atomic design and your interface inventory, you already have the style you need to create the form, so you don’t need to involve the designer. This doesn’t necessarily take work away from the designer, but it also doesn’t require them to create new mockups for every project.

Atomic design also works as quality assurance. When you’re building or testing a website, you have a built-in styleguide in your interface inventory. It works as a designer tool and as a developer tool – at its most basic level; it allows everyone to participate in the conversation while keeping elements consistent and high quality.

A Radical Idea for Building Your Site

Atomic design isn’t for the faint of heart. For both designers and web developers, it requires rethinking the entire process of creating a website. The process is methodical and requires a lot of legwork. Once you create your atoms and molecules, assembling them into an inventory creates a simple style guide that can inform the rest of your interface’s elements.

Using the principles of atomic design allows designers and developers to remain on the same page. It not only keeps style consistent and high quality, it also allows for quicker mockups and rapid prototyping. This leads to a better product and higher customer satisfaction.

If you’re beginning a new project or interface soon, consider applying the principles of atomic design. You might be surprised by how much you like it.

The post What Is Atomic Web Design and Do I Need It? appeared first on Speckyboy Design Magazine.