Learn Bower, Jekyll and Tachyons

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

Jekyll is a blog-aware, static site generator written in Ruby. 

Requirements:
* Ruby version 2.5.0 or above
* RubyGems

Install the Jekyll Ruby gem on macOS quickly with just a few terminal commands and have a blog-aware site running locally.

Install Jekyll and Create a New Project

Blogging is built into Jekyll. You write blog posts as markdown or HTML files and Jekyll turns them blog posts. They follow a specific naming convention to be picked up and used by Jekyll

All blog post files require front matter. Front matter is a snippet of YAML at the top of a file. Front matter is used to set your layouts and meta data.

Create New Blog Post with Jekyll

Jekyll has a plugin system that allows you to add custom features to your site. There are many plugins available or you can even write your own. You can view a list of plugins at [Planet Jekyll](https://github.com/planetjekyll/awesome-jekyll-plugins)

Liquid is a templating language written in Ruby to output to the browser 

[Liquid Documentation](https://shopify.github.io/liquid/)

Install a Jekyll Plugin

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

You can easily add CSS libraries to Nuxt using `yarn` or `npm` to install them, then simply adding them to the `nuxt.config.js` so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your `nuxt.config.js`.

Add CSS Libraries to Nuxt

Functional css for humans.

Quickly build and design new UI without writing css.

tachyons

Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.

Design for Mobile First with Tachyons

Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the `flex-column` and `flex-row` classes to respond to mobile and desktop sizes.

Build Responsive CSS Layouts with Tachyons

bower

Bower is a package manager for Javascript libraries that allows you to define, version, and retrieve your dependencies. In this tutorial, John gives a quick introduction to Bower and will show you how to get started.

Introduction to Bower

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Topics

Instructors

Content Type