css-frameworks-demo

css-frameworks-demo

Demo of CSS components from Bootstrap and Bulma frameworks.

#jekyll#css#css-frameworks#bootstrap#bulma#demo#github-pages
Demo Download

CSS Frameworks Jekyll Demo

Demo of CSS components from Bootstrap and Bulma frameworks in a Jekyll site

Using a CSS framework gives you some benefits:

  • Focus on your content logic rather than building and tweaking CSS from scratch.
  • Write less code - use existing components and styling.
  • Customize components using classes which use existing CSS.
  • Get a mobile responsiveness experience easily.

This project's doc site is built in Jekyll for presentation, but if you don't use Jekyll that's fine as you can just focus on the content you see in the tutorial and demos.

If you are just here to see how to add Bootstrap or Bulma styles to your HTML, see the _includes directory. That includes some content which gets loaded into the head HTML tag.

Table of contents:

Resources

Bootstrap

Bootstrap is a commonly used CSS framework.

Bulma

Bulma is also popular but is said to be lighter to load and simpler to use that Bulma.

Features - from article:

  • Flexbox based: Makes creating grid items and vertically aligned things really easy
  • Modular: Built with Sass. Only import the features that you'll use for your project. Bulma consists of 39 .sass files that you can import individually.
  • Small footprint and no Javascript dependency. Bulma comes in a single compiled CSS usable via nom install, CDN or local usage.
  • Mobile first framework.

Example of a simple Bulma page:

  • index.html
    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello Bulma!</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
</head>

<body>
    <section class="section">
        <div class="container">
            <h1 class="title">
                Hello
            </h1>
            <p class="subtitle">
                Subtitle
            </p>
        </div>
    </section>
</body>

</html>

Set up remotely

Github Pages

Fork this proejct.

Go to the Settings of the repo.

Enable Github Pages.

Find your URL and open it in the browser.

Installation

Setup this project locally - instructions are for Linux or macOS systems.

Clone

Optionally this to your own repo - either fork this repo or click Use this Template.

Then clone your repo or this one.

Navigate to the repo root directory locally.

You can view commands in the Makefile or continue.

$ make help

System dependencies

Install Jekyll and Bundler globally.

$ gem install jekyll bundler --user-install

Project dependencies.

Install gems. If run repeatedly, this command will not upgrade gems.

$ make install

Run this command in future to upgrade to the latest gems.

$ make upgrade

Run

$ make serve

Open the browser at:

License

Licensed under MIT.

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog