CSS

Make your site printable with CSS

Posted on by djbrensinger

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.

5 Strategies for Mobile First Design

Posted on by djbrensinger

Do you develop your website with a mobile responsive or mobile first design strategy? How do I know which one that I am using? Mobile responsive uses CSS to adjust the design to look good when viewed on different devices. Your design may have started out for desktop and updated to work on mobile. Mobile first focuses on designing for mobile users and their devices first. With the numbers of people who use the Internet through a smartphone or table, you want to make sure that your site is usable and fast for them.

Photo by Matthew Henry from Burst

What mobile strategies can you use?

1. Keep your content short
Use writing tools like Grammarly and Hemingway to help you write better and keep it short.

2. Keep your site simple
Review your website. Look at the number of pages and links in your navigation bar. You may have too many. Consider getting rid of old and unnecessary pages and links. Are your pages cluttered? Do they have too much information crammed onto them? Use white space to add breathing room between different pieces of information. Can you reduce the number of columns you use to two or one? On mobile, you want to limit the number of columns used. Two or less is recommended.

3. Use Mobile First Design practices
Use white space, vivid colors, bold shapes and strong typographic elements in your design. Do you need to use photos? You can use a mix of stock and real photos to create a unique brand. Remember to optimize the photos for the web. Photos with large file sizes can slow your site down.

4. Make your site fast
Your site needs to load fast. People will leave a website with performance issues. On mobile, it is even more important. What can you do to speed it up?

5. Test and get feedback
How do you test your website without access to different devices and users? You have to test as best you can.

  • Test your website with an online testing tool to see how it works on different devices.
  • Test on many real devices as possible.
  • Ask your co-workers or staff if they like how the website works.

Whether your visitors use a phone, tablet or desktop, you want to make the experience a good one. By designing for mobile first, you can make design decisions that help create a good user experience.

Making a Dark Mode For Your Website

Posted on by djbrensinger

Do you use dark themes or dark mode in your text editor? You can offer website visitors a choice of dark or light modes. Some people prefer using the dark mode because it is easier on their eyes.

Making a Dark Mode For Your Website
Image by PublicDomainPictures from Pixabay

What do you need to create a dark mode?

The only tools you need are HTML, CSS and JavaScript. You can use a button to allow your visitors to select between modes or use media queries that check their operating system for their preference.

Toggle example

Ananay Negoi uses CSS Variables and a button to toggle between light and dark mode. She demonstrates how to build the Dark-Light mode switch.

Level 5 Media Query

Level 5 Media Query checks your operating system for your preference for a light or dark mode. You can use this query to automatically set the mode for each visitor.

Designing for dark mode

When you create a dark mode for your website, it involves more than switching the colors to darker ones. You need to consider how color, fonts, images affect the readability and usability of your website. Your website reflects your brand. You want to think about how a dark mode can affect your brand. Andy Clarke walks you through the steps he took when he created a dark mode version of his website.

Dark Mode Resources

If you want to implement a dark mode design of your website, refer to these resources on how to do it.

5 CSS Frameworks For Your Next Project

Posted on by djbrensinger

What CSS Frameworks do you use? A framework like Bootstrap can be customize to suit your needs. Sometimes you have override the standard styles to get the design to work. You may want to use a framework that is flexible and doesn’t make design decisions for you. Here are 5 frameworks that you can use in your next project.

5 CSS Frameworks For Your Next Project
Photo by Shopify Partners from Burst

Pure CSS

Pure.css is small, responsive CSS framework. It allows you to easily create your own styles while providing responsive layout and common UI components. Pure.css is flexible that you can use it with other frameworks like Bootstrap without any issues. Monty Shokeen explains how you can start using [this framework] (https://www.sitepoint.com/introducing-pure-css-lightweight-responsive-framework/) in your next project.

Mini CSS

Mini.css is a minimal and responsive framework. You can quickly change the CSS file to make a custom design. It relies on CSS for the styling, so it won’t conflict with any JavaScript library that you need to use.

Bulma

Bulma is a CSS framework that is based on Flexbox. It is responsive, modular and free. Bulma is easy to learn and customize. You don’t need JavaScript to get started using this framework.

Tailwind CSS

Tailwind CSS is a different from other CSS frameworks. It provides utility classes that make it easy to rapidly build custom user interfaces. Tailwind doesn’t make design decisions for you. You can create a completely custom design without having to overriding a bunch of pre-built classes.

Materialize CSS

Materialize is a modern, responsive framework based on Material Design. You can choose to use the standard version with CSS and JavaScript or the SCSS version. With the Standard version, you can get started right away. The SCSS requires a Sass compiler.

When choosing a framework for your next project, you may want a small and minimal one or something that works with your existing styles. These 5 provide you with different options to help create a custom user experience.

5 Ways to Organize Your CSS

Posted on by djbrensinger

How do you write and organize your CSS? Do you prefer to use a structured method or not? With CSS, you can choose to use an existing method or develop your own. Some CMSes like WordPress have their own styles. When you use them, you need to follow their rules and guidelines.

5 Ways to Organize Your CSS
Photo by Photo Mix from Pixabay

Your styles can get big, messy and convoluted over time. It can be hard to maintain. You don’t know what you can delete or change because you aren’t sure what problems it will cause. Without a method for organizing, it may get harder and harder to keep things straight. You can choose to use BEM, OOCSS, SMACSS, Atomic CSS or build your own.

BEM

BEM is a way of writing CSS created by Yandex. It is a very structured style of writing CSS. BEM has a component-based approach. This approach divides the user interface into separate components. BEM uses the structure of Block, Element and Modifier. It makes development easy and fast to update.

OOCSS

OOCSS (object-oriented CSS) applies principles of object-oriented languages to help you write CSS. It encourages code reuse and makes it easier to maintain. OOCSS uses the object-oriented principle of abstraction to make the code reusable. It helps you to separate visual elements like color, fonts and borders from the content. This separation makes your code easier to update. Especially when you need to change colors, fonts or other branding-related items.

SMACSS

SMACSS is more of a style guide than a CSS architecture. Scalable and Modular Architecture for CSS provides guidelines for writing CSS. This style guide helps you build CSS that is flexible and maintainable. With SMACSS, you create your own rules for writing CSS.

Atomic CSS

Atomic CSS focuses on small, single-purposed classes. You build well-structured HTML templates, so that your changes doesn’t break your design.

Your Own Style

When you build a website on your own or part of a small team, you can choose how you write your CSS. You may combine methods to help solve certain design problems.

How do you choose a method?

It depends. When you are working on your own project, you can choose which one you want to use. When you are working on a project that uses a CSS framework, it may be easier to use the method that the framework uses.

The best way to learn which one you like is to read the documentation and build a project with it. Then, you’ll know when to use these methods.