Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brianmaierjr/uni
A one-page jekyll theme.
https://github.com/brianmaierjr/uni
browsersync gulp jekyll jekyll-theme jekyll-themes minimal sass scss theme
Last synced: 3 months ago
JSON representation
A one-page jekyll theme.
- Host: GitHub
- URL: https://github.com/brianmaierjr/uni
- Owner: brianmaierjr
- License: mit
- Created: 2018-10-06T04:17:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T04:54:26.000Z (almost 2 years ago)
- Last Synced: 2024-09-29T03:01:31.562Z (4 months ago)
- Topics: browsersync, gulp, jekyll, jekyll-theme, jekyll-themes, minimal, sass, scss, theme
- Language: CSS
- Homepage: http://brianmaierjr.com/uni
- Size: 3.67 MB
- Stars: 61
- Watchers: 2
- Forks: 52
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Uni – A one-page Jekyll theme
[View Half Demo](http://brianmaierjr.com/uni/) | [View Full Demo](http://brianmaierjr.com/uni/full) | [View Card Demo](http://brianmaierjr.com/uni/card)
## 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](mailto:[email protected]).
---
## Setup
1. [Install Jekyll](http://jekyllrb.com)
2. [Install Bundler](http://bundler.io/)
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)
---
## Half Layout
* **half_side:** which side of the page your content is on [left or right]
---
## Full layout
* **full_text_position:** where on the page the text will appear [left, center, or right]
---
## 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](https://tinypng.com) and [TinyJPG](https://tinyjpg.com).
### Favicon
To add your own favicon, replace the image found at `assets/img/favicon.png`.