What can you do with FlexBox?

FlexBox is a flexible box layout model for the web. This model gives you a way to automatically rearrange responsive elements. They can adjust in size either increasing or decreasing depending on the device size. FlexBox can be a great addition to your CSS toolbox. It helps you to write adjustable and adaptive CSS.

What can you do with flexbox
Image by Magic Creative from Pixabay

How do I get started?

You can start by reading guides on how to use FlexBox. The Mozilla Developer Network has a guide on the Basic Concepts of Flexbox. Or try CSS-Tricks’ A guide to FlexBox.

If you need to fix a problem right away, you can use Solved By Flexbox to find a solution to common problems.

3 different ways to use it in your projects

1. Centering items on a page

Without FlexBox, it can be challenging to center items like text or images on a page. Sometimes, you have to resort to hacks to get it to look the way you want. FlexBox makes it so much easier. Use these tips to center items either horizontally or vertically.

2. Photogallery

You want to create a photo gallery that is responsive. Use this photo gallery to make one that looks like Flickr or Google Photos.

3. Responsive Tables

Tables are not responsive. You can make them be by using a little bit of FlexBox without having to redesign them.

Need more?

Flexbox Patterns has solutions to problems that you can use. It demonstrates the solution and shows you how to create the flexible box layout yourself.

Getting Started with CSS Variables

What are CSS Variables?

Most programming languages allow you to use variables. Variables are used to store information and manipulated by the program. In CSS, you previously need a preprocessor like SASS or LESS to use variables. CSS Variables are custom properties that you define with specific values and reuse throughout your CSS document.

Getting Started with CSS Variables
Photo by Pexels from Pixabay

In CSS as well as programming languages, you can declare your variables either globally or locally. A global variable is a custom property that is available to your entire HTML document. To declare a global custom property, you use the :root pseudo-class.

For example, you want to define your theme colors. You can use the :root pseudo-class to do that.


:root {
    --main-color: blue;
    --main-text-color: aqua;
}

You can also declare a variable locally. By declaring a custom property locally, you limit the scope or impact that the variable can have.


.primary-background-color {
    --background-color: teal;
}

When you create a CSS Variable, you can overwrite the value. By taking advantage of cascade, you can create a new style that changes the default value of a global declare variable.


.text-color {
    --main-text-color: orange;
}

Var()

Preprocessors allow you to use a variable by referencing its name. You use the Var() function when inserting the value of a custom property.


.featured-content-box {
    background-color: var(--main-color)
}

Calc()

Sometimes you need to do a little math to get your styles to work they way you want them to. Calc() is a native CSS way to do simple math calculations. With it, you can do addition, subtraction, multiplication and division. CSS Tricks talks about use cases for Calc().

For example, you may want to change the width of a style.


.box {
    width: calc(100% - 80px);
}

Why use?

CSS Variables can be overwritten, cascade down and used in JavaScript. If you don’t want to use a preprocessor like SASS or LESS, you can use custom variables to make managing your styles a lot simpler.

In Web Dev Simplified’s CSS Variables Tutorial, he gives you a quick introduction on how to use them. You learn what they are, how to write them and use them with JavaScript.

Summary

At first, CSS Variables sounds complicated. They can help you to make your CSS easier to maintain. Variables are a lot easier to use than hex or hsl codes.

How do you fix problems in print CSS?

A print stylesheet allows you to print a webpage. Testing a print stylesheet can be challenging. You create print styles to manage how the page prints, but it still doesn’t look right. What do you do when you need to fix or find a problem that occurs when the page is printed?

How Do You Fix Problems In Print CSS
Photo by Fernando Arcos from Pexels

You have two options use the Print Preview or the browser’s developer tools.

Print Preview lets you see how your web page looks on the printed page. You can see which elements to hide like navigation bars, footers or certain images. It also helps you to identify simple problems. Problems like large text, too much space between elements and extra styling that may use too much ink.

What do you do when you can’t find the source of a problem? Use your browser. Chrome, FireFox and Safari allow you to display print styles directly in your browser. This option is great for seeing how your design looks without print the page out. You can use the inspector to diagnose issues with your CSS. It can help you identify design issues that need a print style either created or modified.

For example, I had an app that printed a receipt. It printed on two pages instead of one. First, I used the Print Preview to find out what elements to hide when printed. After that, I saw that it was still printing on two pages. I couldn’t see what was causing the issue.

I changed the Developer Tools to show the print CSS. When I used this option to view the receipt with the print styles, I found the source of the problem. The problem was in the footer. I started to look at the styles for it. The footer had a height of 10.75 ems. I experimented by turning off the height. It changed from printing on one page instead of two. To fix this issue, I added a new print style for the footer and made the height auto. When I looked in print preview, it printed an one page.

Creating notification bar for emergencies and announcements

What is a notification bar?

A notification bar is a horizontal bar that appears at the top or bottom of your website. You can display emergency messages or announcements to your visitors. Messages about closings, updates, news or sales offers.

Create a Notification Bar for Website
Image by Gerd Altmann from Pixabay

How can you add a notification bar to your website?

It depends on how you want to do it. If you like to write code, you can make it yourself with HTML and CSS. If not, you can add a plugin or a third-party tool to your website.

1. Make your own

Are you using Bootstrap? Bootstrap has alerts. You can create your own bar with Bootstrap alerts. If you are using a different CSS framework, you can write your own.

See the Pen
Alert Animation (feat. Material Icons by Google)
by Ryan Young (@rcyou)
on CodePen.

2. Use a plugin to display message on your WordPress site

If you have a WordPress website, you may not want to edit your theme. Instead, you can add a plugin. WPBeginner explains how to use the plugins Optin Monster or Simple Notices for displaying important messages on your blog. If you are already using the plugin Advanced Custom Fields, you create custom emergency messages with it.

3. Use a third-party tool

You can choose to use a third-party tool like Getsitecontrol. They offer different ways of creating announcement bars for your website. You can add a sticky announcement bar or a slide-in banner that appears from the side.

Emergencies can occur at any time. You need to have a way of communicating with your customers and staff. Whether you make your own or use a tool, you can ensure that everyone can keep up to date on what is happening.

Make your site printable with CSS

Do your web pages look as good on paper as in your browser? When you are developing your website, you create it to look good on different devices. Then, you print it out and see how terrible it looks on paper. It prints everything out.

Make your site printable with css
Image by tookapic from Pixabay

What can you do to make it look good on paper too? You have to design for print as well. By using CSS, you can change your design to work on paper, too. The easy way is to add an additional media query for print to your CSS. Or you may want to separate it out into its own file.

What you need to create printable CSS?

  • Decide what elements need to be printed
  • Change your print styles to work with the printer
  • Adjust your design to be printable

Decide what needs to be printed

Websites have navigation bars, footers and other design elements that are necessary to use your site. When you are printing, you want only the content not the extras. To make a page printable, you need to decide which elements don’t have to be printed.

Change your print styles to work with the printer

When you print your page, you want it to fit on a page and not cut off important content in strange spots. If your page includes videos or iframes, you want to prevent them from printing as well. Sitepoint shows you how to create the perfect print stylesheet.

Adjust your design to be printable

What do you change? First, look at the font size. Is it too big? You may want to consider changing the size to fit better on paper. Next, are you using background colors on certain elements? You could change them to a different color or hide them.

Are you using a CSS Framework? The framework my impact how it looks on paper. For example, Bootstrap 3’s col-sm-* turns into a single column on paper. You want to change their settings so that the columns work they way you want on paper. Donnie Ray Jones explains how to fix Bootstrap 3 for printing.

By adding printable CSS to your site, you control how your page prints on paper. Your users will be happy it doesn’t print so many extra pages. It is easy to add to your website after you have finished developing.