Building with a Headless CMS

Have you considered using a headless or decoupled CMS? Most websites are build using a traditional CMS. A traditional CMS gives you a way to store data, a UI to input the data and ways to display the data. You may have used a traditional CMS like Drupal or WordPress to build your website.

Building With A Headless CMS

What is a headless or decoupled CMS? The front end and content management system are separate from each other. Headless and Decoupled as similar but they are not the same. A Headless CMS manages the content and waits for the front end to do something with the content. With a Decoupled CMS, it prepares the content for delivery and figures out how it will present your content to a specific device or environment.

Why use a Headless CMS?

  • You are building a website or app that uses a framework like Angular JS, React or VueJS
  • You want to build a website with a Static Site Generator like Jekyll or Gatsby
  • You are creating a mobile app
  • You are creating content for use in different places

Where can I find a headless CMS for my next project? Headless CMS maintains a list of JAMStack content management systems. Or you can experiment with a static site generator.

What if you want to update your existing CMS to use as headless CMS?

If you are using WordPress, you have the option of using it as a headless CMS. You can use WordPress to store the content and display it using an API.

You are not required to use PHP you can use whatever language you want. JC Hiatt explains how to use react to create a headless WordPress site.

If you don’t want to update WordPress, you can use Cosmic JS. It lets you build your next modern web app with any programming language that you want.

When to use a headless CMS?

It depends on your needs and project. You may want to use a traditional CMS when you don’t have a development team and need a website that is easy to maintain. Use a headless or decoupled CMS when you have a development team and you want to create a custom interface for use with more than a website.

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?

5 Ideas for Making a Screenshot Great

You want to include a screenshot of your app on your blog post or website. How do you make it look great? You want your screenshot be apart of the design and attract the attention of visitors.
5 Ideas for Making Your Screenshot Great

What can you do?

Use a colored pattern

Put your screenshot on a solid or patterned background. The background can help to draw attention to your screenshot.Scrrenshot with blue-green background

Place it on an image of a computer or phone

Create a screenshot that shows how your app looks on a desktop, phone or tablet. With a blank template, you can size it to fit. First, resize the computer monitor image to the size you want. Then, resize your screenshot to fit inside the monitor. You may need to crop and resize to get it to fit without looking squished.
Screenshot in Monitor

Add text to the screenshot

Is there a feature or part of your app that you want to show? Take a screenshot that focuses on that area of your app. Then, use your favorite photo editor to add text that describes the features that you are showing.
Screenshot with text

Create Multiple Screenshots

One screenshot doesn’t show the uniqueness of your app. Try three. Layer them on top of each with the most important screenshot on top. Or show it on a desktop, tablet and phone.
Three Screenshots

Add a shadow behind it

Use your favorite photo editor to edit the screenshot and add a background shadow to the image. The shadow can make it look like it is hovering over the background on your page.
Screenshot with a shadow

Your screenshot is an important part of the design. You want to make it stand out. Mix and match one or more of these techniques. You can make it look great by using one or more of these additional design techniques.

What do you do to make your screenshot great?

Create a custom build of Bootstrap

How do you customize Bootstrap? The quickest way is to customize the CSS. You create own theme to make your Bootstrap website look they way you want it to.

What if you want to do more? You can customize your build of Bootstrap. There are two options: use a Bootstrap generator or modify your copy of Bootstrap.

Create a Custom Build of Bootstrap

Use a Bootstrap Generator

You can customize and download your very own custom build of Bootstrap. With Bootstrap’s Generator, you can choose which components, Less Variables and jQuery plugins that your version will support. Before you customize Bootstrap, read the documentation to learn how it works.

Custom Build Bootstrap Choose Components

Customize your build

When you customize your build, you can choose from a previous version that you built or start from scratch.

When you start from scratch, you have four steps to complete.

  1. Choose your components
  2. Select the jQuery plugins that you require
  3. Customize Less variables to define your colors, sizes and more
  4. Click on Compile and Download your customized version

First, choose the components that you want to support. You may choose your components either by unchecking the ones you don’t need or using the Toggle All button. It turns off all of the components in this section, so you can choose individually the ones that you want.

Next, select the jQuery plugins that you require. You may turn them all off using the Toggle All button or unselect them individually.

Once you picked your jQuery plugins, you can modify the Less Variables. For each variable that you want to change, edit the value in the text box provided.

Finally, click on the Compile and Download button to create your customized version. If you haven’t already, create a Bootstrap website to test your new customized version. You can always go back and change your version if it doesn’t work the way you want it to.

Modify Your Copy of Bootstrap

Don’t want to use a generator? You can modify your own copy of Bootstrap. Before you modify your copy, you need to understand how Bootstrap is organized and what you want to change. Keep your changes separate. Bootstrap recommends modifying the variables.less file. In Customizing Bootstrap the Right Way, Mark Healey recommends creating your own file with all your changes and modifying the bootstrap.less file to import your new file. His method makes updating Bootstrap simpler when they make changes.

Whether you choose to customize Bootstrap by creating your own theme, using a generator or modifying the files, you can make it your own.

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.