Build a Website With CSS Grid Starter Template

The best way to learn a new coding technique or design framework is to build something with it. I chose to build a website with CSS Grid. I wanted to take a book and make it a website. On Grid By Example, you can find a CSS Grid starter template that makes it simple to begin. The template has a simple two column layout: left-hand sidebar and right hand column for content. Plus, it uses an existing CSS Framework called Skeleton. I have used Skeleton to create WordPress themes.

Build website with CSS Grid Starter Template

What steps were needed to build the website?

  1. Choose and download a public domain book from Project Gutenberg
  2. Download the CSS Grid Starter Template
  3. Step up the new website with the CSS Grid Starter Template
  4. Modify the sample page with content from the ebook
  5. Create new CSS classes and modify existing ones to create the look I wanted
  6. Test and modify the CSS for mobile

Choose a public domain book for this project

You can download a public domain book from Project Gutenberg. I picked I chose Black Amazon of Mars by Leigh Brackett because I wanted to build a science fiction themed site.

Getting Started with the CSS Grid Starter Template

When you first install the template, your website looks like this:
Grid By Example Two Column Template with Skeleton

My next steps were to replace the template’s content with my own and start to add new CSS to start building a simple design. Then, I downloaded images from Pixabay.com for the website. I wanted a photo of Mars for the header and a better photo for one of the chapters. It had an illustration that didn’t go with the story. The final result looks like this.
CSS Grid Template with Black Amazon of Mars

Does it work on mobile?

CSS Grid is mobile-first. I had to make changes to the CSS for the additions that I added to the website. The CSS Grid part worked beautifully on mobile.

Summary

CSS Grid Starter template helped me to get started quickly. The template did most of the work. I didn’t have to figure out the layout from scratch. I spent most of my time creating the pages, adding the content and adding design elements to make the site look better. The starter template made my first attempt in building with CSS Grid simple and easy.

CSS Grid Starter Projects

What is CSS Grid? CSS Grid is a CSS Grid layout method. It is designed for creating two-dimensional layouts for websites and applications.

CSS Grid Starter Projects

How to learn more about CSS Grid?

CSS Grid Starter Projects

You can learn CSS Grid with starter projects. They can help to build basic layouts. For most of your projects, you’ll need to build two, three and more column layouts. You can use starter projects to learn how to make these layouts.

Two Column Layout

Start building a two column layout. Two column layouts are quite common on the web. You’ll find them on most websites from blogs to startups.

Three Column Layout

After building a two column layout, you will want to be able to add more columns. Three columns is another common layout that you will need for your projects.

When learning a new layout technique, start small and build more complex layouts as you learn how to do it. By building with starter projects, you can see how you would use it in your real world applications. Not all of your projects will be simple. They may require more columns or additional features like a hero image or even a carousel. Build on your new skills by creating a production ready CSS Grid layout.

Photo by meisjedevos

Tools to help clean up your CSS

You have created an awesome website. Over time, you add more pages, content and tweaks to the site. As your website gets larger, so can your CSS. You may add new styles for displaying a landing page, carousel or videos. Eventually, you have unused styles that no one remembers what it was used for. This unused CSS can start to slow your site down.

Tools to help clean up your CSS

Cleaning up your CSS from design changes and other additions can be a hard, time-consuming and tedious task. How do you clean up your website without breaking the site?

Steps to clean up your CSS

  1. Find and fix errors
  2. Identify unused CSS
  3. Validate with W3C Validator
  4. Test your website with the updated CSS

Find and fix errors

Errors can creep in your CSS. You may forget a semicolon, copy code from CodePen or Stack Overflow that solves a problem or another team member added custom CSS to solve a problem.

CSS Lint

CSS Lint analyzes your CSS and tells you what you are doing wrong. You can use it to help clean up your CSS and learn how to write it better.

CSS Lint

Identify unused CSS

As you develop your website, your CSS file can grow. It may contain CSS styles that are no longer used or styles that were abandoned. With a large website, it can be hard to tell which styles are still in use.

Use UnCSS to remove unused CSS

UnCSS is a Node.js powered tool that removes unused CSS from your stylesheets. It created a new CSS file with only the styles that are being used. Want on online options? UnCSS Online lets you test the tool for smaller CSS codebase.

UnCSS Online

Validate with W3C Validator

When you have fix your errors and removed unused CSS, use the W3C (World Wide Web Consortium) validator to check your website. It checks to ensure the technical quality of your website. You want to make sure that you didn’t introduce new errors into your cleaned up CSS.

W3C Validator

Test your website with the updated CSS

Since CSS is not easily testable, you want to make small changes and test each change. You want to make sure that the styles you removed or updated don’t break your design.

Cleaning up your CSS code is difficult, time-consuming and tedious. These tools can help to make the task easier.

What CSS tools have you used to make the process easier?

Have you Customized your Bootstrap website?

Once you have built a few websites with Bootstrap, you may notice that your sites look too much alike. As a web developer, you want your websites to useful as well as attractive. How do you fix this problem? You can customize how your Bootstrap looks. By working with and customizing the design, you can create a Bootstrap website that doesn’t look like it was made with Bootstrap.

Have you customized your bootstrap website?

What web development techniques can you use?

  • Create a custom style sheet
  • Use Custom Fonts
  • Add Custom Photography
  • Use Font Awesome
  • Customize Bootstrap’s Buttons

Create a custom style sheet

You want to create a custom style sheet to keep your design customizations separate from Bootstrap. Nothing more annoying than upgrading and realizing that you lost all of your design work because you added them to the Bootstrap CSS and forgot what you did. If you use Adobe Kuler or COLOURlovers color scheme generators, you can create a Bootstrap theme with the color scheme to start your designs from.

Use Custom Fonts

Fonts as well as colors should be unique to your website. By using custom web fonts, you can change how your site looks quickly and easily. When you choose the wrong font, your site can look bad. Where can you get ideas for choosing the right fonts? You can use the following resources Top 20 Google Fonts and How to Use Them and 10 Great Google Font Combinations You Can Copy.

Add Custom Photography

With sites like pixabay.com or Death to the Stock Photo, you don’t have to be a photographer to add unique and interesting photos to your website. With tools like Photoshop, you can crop, add photo effects and more to make a photo unique to your website.

Use Font Awesome

With Font Awesome, you can incorporate these icons into your designs. You can use them on buttons, navigations bars or anything else that you need.

Customize Bootstrap’s Buttons

Bootstrap comes with default buttons for you to use. You can customize the way these buttons appear in your design. Use this Bootstrap Button Generator to create the look that you need.

With web development tools like photos, Font Awesome and CSS, your Bootstrap website doesn’t have to look like a standard Bootstrap website. You can customize it to look the way you want.

Mobile Design Typography

Content is the most important element of your website. With a wide range of mobile devices available to people, your websites and apps must be readable on all. To maintain the readability of your content, you need to consider the fonts you choose, size, contrast and line length. How do you use Mobile Design Typography to make your content responsive and readable?

Mobile Design Typography

Fonts

Not all fonts look good on a small screen. Display fonts like script fonts may look good on a desktop screen, but on mobile they can shrink down too small to read. A script font like League Font is fine for the desktop, but on mobile it can be unreadable.

League Font

What are your options?
You could increase the size of the font. At a larger size, your chosen font may be look better. Or you could replace the font with one that is readable on small devices. You have to decide if you really need to use this font in your design.

Size

Size is also important. Too small and your content is unreadable. People leave sites if they can’t read it on mobile. If you choose a size that it too large, it could dominate the content. It could take up so much space that you end up scrolling constantly while reading the page. You have to find a size that works well at that size.

Line Length

How long should a single line of text be? It depends. Readability is determined by the font, character and word spacing and the word lengths. Even the device that you are using can affect readability. A general guideline is 9 – 12 words per line. 9 – 12 words is a comfortable range for people to read. Line Length and Column Widths explains why your text should be about 9 -12 words long.

Contrast

What is contrast? Contrast is how every element in a design which includes font, size, color, line length and images works to create a good user experience. The easiest to learn is color. How do your color choices affect the design? With mobile design, you need to also think about size, font, line length, position and shapes. On Web Designer Depot, John O’Nolan explains how to fully understand contrast in design. He shows you how to use them for a better user experience.

Horizon Coworking in Madison, WI

Summary

Your content is an important element of your design, especially on mobile. When developing for mobile, consider how the font type, size, line length and contrast can effect the readability of your site. If it isn’t readable, your visitors will leave. Keep them on your site by focusing on how fonts look on mobile.

For more information on Mobile Typography, check out these articles: