Prototype a website with CSS Grid

When I build a prototype, I start with pen and paper. A paper prototype (blog Post) helps me to develop my ideas better. What if your drawings don’t get the ideas across to your team or client? What do you do then?

Prototype a website with CSS Grid
Photo by Stefan Schweihofer

You could use a prototyping app or start building in the browser. Sometimes, it is simpler to start building in the browser. With HTML, CSS and JavaScript, you can build it quickly.

Building Your Prototype in a Browser

When you create your prototype in the browser, use the basic tools for building the web–HTML and CSS. HTML and CSS let your build and make changes to your prototype quickly. You and your designers can focus on designing and testing finicky UI components like tables and drop downs.

What if HTML and CSS isn’t enough to get you started quickly? You want to build a prototype not focus on the layout. A framework like Bootstrap or CSS Grid can help you get started quickly.

Why CSS Grid?

You can build your prototype using other frameworks like Bootstrap. CSS Grid gives you more flexibility, simpler markup and no 12 column limitation. When you use a framework like Bootstrap, it can look as though it was built using that framework. If you need more flexibility in your branding and design, then Bootstrap won’t work for you. CSS Grid gives you more creative control.

How Do You Start?

With CSS Grid, you have three choices:

  • Start with a page layout example. With these experiments, you can learn how CSS Grid works without having to build all of the markup yourself. One of the examples uses the Skeleton Framework. I used this example to build a public domain book website with it.
  • CSS Grid Layout Builder, an app, you download to help you build your CSS Grid layout quickly.
  • Build a CSS Grid website by creating the markup yourself. Grid By Example is a good resource for learning how to build what you need with CSS Grid.

CSS Grid is another tool that you can use to build prototypes quickly. Layout templates, grid builders and online examples all can help you to create your prototype quickly so you can focus on the user experience and not the tools to build it. When building a prototype, the best tools are the ones that you use.

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.