A one-page jekyll theme.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes fixes Oct 9, 2018
_layouts
assets
css initial commit Oct 6, 2018
.gitignore initial commit Oct 6, 2018
Gemfile
Gemfile.lock
LICENSE
README.md
_config.yml
card.html + pages Oct 9, 2018
full.html + pages Oct 9, 2018
gulpfile.js
index.html
layout--card.jpg edit readme Nov 26, 2018
layout--full.jpg edit readme Nov 26, 2018
layout--half.jpg edit readme Nov 26, 2018
package-lock.json initial commit Oct 6, 2018
package.json initial commit Oct 6, 2018

README.md

Uni Jekyll Theme

Uni – A one-page Jekyll theme

View Half Demo | View Full Demo | View Card Demo

Features

  • Minimal, One-Page Design
  • Fast and responsive
  • Flexible
  • Built using these tools:
    • GULP
    • SASS
    • BROWSERSYNC
    • AUTOPREFIXER
  • A modular, type scale
  • 3 different layouts with additional options
  • Responsive Images for performance
  • Social Meta Tags

Browser Support

This theme will look great and work in most newer browsers. If you see an issue please feel free to contact me.


Setup

  1. Install Jekyll
  2. Install Bundler
  3. Run bundle install
  4. Install gulp dependencies by running npm install
  5. Run Jekyll and watch files by running bundle exec gulp

Please note that any changes made to the config.yml will require that you stop gulp and start it again.


Site/Layout Settings

The main settings can be found inside the _config.yml file:

  • title: you or your company's name
  • description: description of your site that will be used when your site is shared or posted on social media
  • sharing_image: name of your image (example.jpg). This image should be placed in the assets/img/ folder
  • content: a brief blurb about yourself
  • url: your url
  • social diverse social media usernames (optional)
    • platform: display name for social media or external link
    • url: destination for the link
  • google_analytics Google Analytics key (optional)

Uni Jekyll Theme

Half Layout

  • half_side: which side of the page your content is on [left or right]

Uni Jekyll Theme

Full layout

  • full_text_position: where on the page the text will appear [left, center, or right]

Uni Jekyll Theme

Card layout

The background image and other style customizations can be changed in assets/scss/layouts/_card.scss


Further Customizations

Change Layout

By default, Uni is set to use the half layout. To change the layout change the front matter in index.html

For example, the layout below is using the full layout. The other options available are half and card.

---
layout: full
title: Uni – A one-page Jekyll theme
---

Styling

While running bundle exec gulp modify any of the files in the assets/scss/ folder and your browser will update automatically. No reload required!

The layouts all have their own stylesheets found in assets/scss/layouts/. This is where images for each of the three layouts can be found. In addition, this is where you can change text color, layout, etc.

Primary color

The primary color is used for headings, accents, and buttons. It can be changed by modifying the assets/scss/base/_config.scss file.

Add Content

Add content in config.yml or alter index.html and change {{ content }} to be whatever you want.

Imagery

As stated above, the images are set in the respective stylesheets found in assets/scss/layouts/.

We are using responsive images that require three different image sizes. This allows the browser to serve the appropriate image based on the screen size. Recommended image widths are:

  • Small: 768px wide

  • Medium: 1200px wide

  • Large: 1600px wide

To replace the images, modify the names in the responsivebackground mixin as shown below. Make sure to include the file extension!

@include responsivebackground("half-sm.jpg", "half-md.jpg", "half-lg.jpg");

When uploading images please keep file size in mind. For optimizing, we recommend using TinyPNG and TinyJPG.

Favicon

To add your own favicon, replace the image found at assets/img/favicon.png.