Building Websites with Skeleton CSS

Get rid of the bloat with traditional CSS frameworks when creating prototypes and basic landing pages. In this course, you'll learn how to use the ultralight and simplicity of Skeleton CSS in your own projects.
Course info
Rating
(10)
Level
Intermediate
Updated
Aug 9, 2017
Duration
1h 16m
Table of contents
Description
Course info
Rating
(10)
Level
Intermediate
Updated
Aug 9, 2017
Duration
1h 16m
Description

You're tasked with creating a prototype or a simple landing page, but you don't need the complexity that comes with large CSS frameworks. What do you do? In this course, Building Websites with Skeleton CSS, you'll learn how to utilize Skeleton's less than 400 lines of CSS, and be provided with the bare necessities to start creating your own prototypes and other simple layouts. First, you'll explore how to work and use Skeleton's grid, typography, forms, and buttons. Next, you'll delve into how to make your own customizations, and how to create a modern landing page. Finally, you'll discover how to use the Gulp task runner to optimize your 21kb CSS file down to an ultra-fast 5kb. By the end of this course, you'll have a solid understanding of how to utilize Skeleton CSS to create your very own prototypes and projects.

About the author
About the author

Gary Simon has worked exclusively as a freelance designer and design instructor for over 15 years.

More from the author
Building Layouts with the CSS Grid
Beginner
1h 16m
Mar 2, 2018
Building Websites with Bulma
Intermediate
1h 42m
Oct 27, 2017
More courses by Gary Simon
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Gary Simon, and welcome to my course, Building Websites with Skeleton CSS. I've been a freelance designer and developer for the last 15 years, and I've worked with countless clients on a wide variety of projects. While large front-end frameworks serve their purpose, sometimes they're overkill for smaller projects like prototypes and simple landing pages. This is where Skeleton CSS makes sense. With less than 400 lines of CSS, you can rest assured that you're working with an ultra-light barebones boilerplate. Some of the major topics that we will cover include integrating Skeleton CSS within a project, the Skeleton grid, and other elements like typography, buttons and forms, optimization with Gulp plugins, and much, much more. By the end of the course, you will have a solid understanding of how to use Skeleton CSS to create prototypes and layouts. I hope you'll join me on this journey to building websites with Skeleton CSS, at Pluralsight.

Setting up the Project
Hello, and welcome to his module, where we're going to first do a quick overview of the project we will be creating throughout this course, along with what we will be learning, and then set up a quick development environment and integrate the Skeleton CSS boilerplate, all backed by the Gulp JavaScript task runner. Now first, you may be wondering what Skeleton CSS is and how it differs from CSS frameworks like Bootstrap or Foundation. Well, Skeleton is a very simple, lightweight, responsive boilerplate. It's less than 400 lines of CSS and contains only what you absolutely need to create quick prototypes or really lightweight projects, such as simple landing pages. Now the benefit to using Skeleton over other comprehensive CSS frameworks are very little setup, it's small in file size, and it's easy to understand. Now throughout this course, we're going to learn how to utilize Skeleton's 12-colulmn grid system, typography, buttons and forms, and utilities. While learning all of this, we will design this simple landing page. We'll take it from more of a prototype to a fully finished and polished project as seen here. And in doing so, you're likely to discover that with Skeleton, less is sometimes more, especially when you use it for prototypes in other simple projects. So, let's get started in the next lesson by taking a look at Skeleton itself.