Author: Isaac Horton

MINIML is a Base Template Static Website Builder for GitHub Pages using UIKit and Jekyll. It is designed to work on GitHub Pages like other Jekyll sites. It’s an extensible theme Gem that can be customized easily and styled using the UIKit Framework by adding some easy to use markup. Now you can host a site for free on Github Pages and still have a ton of interactive capabilities from UIKit. To work with Miniml you should be familiar with Git and CLI administration. Using Jekyll and Miniml is a great way to get familiar with using CLI.

To start you must first download the project to your computer. Open Terminal on Mac or your preferred CLI and browse to the directory you want to develop inside. I use a directory called gitsites but it can be anything just so you remember it and can come back to it later.

cd gitsites

Got to the git repo here or use the following to download the repo to your local machine:

git clone https://github.com/st4rlab/miniml.gitCode language: PHP (php)

Now that you’ve got the files downloaded. Start editing the construct to suit your needs by going to the _config.yml file in the root directory and editing the pertinent details.

You can edit the navigation by going to the _data/navigation.yml and following that structure exactly to make up the navigation how you want. Additionally you can create create your own collections by following these instructions to create a portfolio or other custom content type.

Once you have your configuration details the way you like them run the following command in the CLI:

bundle install

This will build out the dependencies now you can run the following command to create a test dev site on your machine.

bundle exec jekyll serve

This will create a fully browsable static website and give you some feedback which you should become familiar with. As you work on your site, there are tools that can assist content management like Forestry.io.but you will want to first gain a good understanding of whatever it is you working on.

As you complete your project and are ready for deployment, just push it to Github like any other repo and set it to use Github Pages in the Settings for that particular Repository.

This is an easy and awesome to use pattern. It is the first code pattern to be introduced to sdg and its really frikkin cool. It’s so cool we’re using it on our homepage and still pulling an “A” speed rating… WTF?

Let’s get into into it.

It’s a combination of js/css with some very limited markup. This is great for keeping things isolated. We use this on our homepage and why would we want this to be included on every page? If we want to do this right, we separate things and make sure that our includes are only being called on the page that matters. In this case it’s the homepage of our site.

The original idea was posted here by Vincent Garreau who should receive any credit for the writing of the code. Here is his codepen:

What I did was to include an html section for the yootheme pro components and add the following code to that section:

<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>
#particles-js {
  position: absolute;
  width: 100%;
  height: 800px;
  background-color: #fbf6ed;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
    z-index:0;
    top:0;
    left:0;

}
</style>
<div id="particles-js"></div>
<script>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1000
      }
    },
    "color": {
      "value": "#111"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#ffffff"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#111",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

</script>Code language: HTML, XML (xml)

Now add a div with an id of ‘particles-js’ somewhere on the page. Once you have this in place on your site, (We use it for a background on the homepage) you can alter the html and css to suit your needs. Make sure to keep the script include for particles.js which does the heavy lifting in this although it should be called light cause it’s blazing fast, just like I like it.

In our case we had to add some extra build out in the css and markup to accommodate the new absolute positioning taking up the whole top section of the page. (Add some relative positioning)

Depending on your markup, mess around with z-index of elements to get your stacking order working correctly.

Wrap Up

So what we have here is an easy to use html snippet that can create some interesting effects like the one we used on our homepage this month. There’s really lot’s of ways you can implement this code and the variables can be played with to alter the effects. I like how it engages the user with interest about connections with the obvious connection to connecting with other users on our system or any system that simulates connections.