Uni

Uni is a one-page Jekyll theme that builds a minimal landing page from a simple _config.yml and index.html, with three layout choices — half, full, and card — powered by Sass and a Gulp build pipeline.

What is Uni?

Uni is a one-page Jekyll theme that generates a static landing site with a minimal, fast-loading design. It takes your site title, description, social links, and homepage copy from _config.yml and index.html, then outputs HTML with responsive images and social sharing metadata. The theme runs on Jekyll and uses a Gulp-based toolchain with Sass, Browsersync, and Autoprefixer; the repository is available on GitHub under the jekyll-theme topic.

Key Features

Uni keeps the essential features of a one-page site in a small set of configurable options.

• Three layout modes — choose half, full, or card via YAML front matter; half supports half_side (left/right), full supports full_text_position (left/center/right), and card styling lives in assets/scss/layouts/_card.scss.
• Responsive images — a responsivebackground mixin serves three image sizes (768px, 1200px, 1600px) so the browser chooses the right file for the viewport.
• Social meta tags — title, description, and sharing_image from _config.yml control how the page appears when shared.
• Google Analytics — add your tracking code to the google_analytics field in _config.yml to enable analytics.
• Sass styling system — layout-specific stylesheets in assets/scss/layouts/ handle background images and text colors; the primary color for headings, accents, and buttons is set in assets/scss/base/_config.scss.
• Live-reload development — running bundle exec gulp starts Jekyll, watches Sass, and reloads the browser automatically through Browsersync, with Autoprefixer adding vendor prefixes.
• Configurable content — site name, description, URL, social links, and a short blurb are managed centrally; homepage copy is edited in index.html.
• Simple favicon swap — replace assets/img/favicon.png to change the browser tab icon.

Who should use Uni?

Uni suits Jekyll users and static-site fans who want a one-page presence without building a layout from scratch.

• Freelancers and designers can use the half or full layout for a personal portfolio with social links.
• Small businesses can set the card layout for a company landing page with analytics and social sharing.
• Developers who prefer Sass and Gulp can customize styles and use Browsersync's live reload while iterating.

Use cases

Uni's one-page structure covers common personal and business scenarios.

• Freelancers: launch a one-page portfolio with the half layout, your social links, and a sharing image for when the page is posted.
• Small businesses: create a company landing page using the card layout, with Google Analytics configured in the config file.
• Jekyll developers: use the theme as a starting point for client projects, modifying the Sass in assets/scss/layouts/ and swapping responsive images via the mixin.

How does Uni work?

Set up by installing Jekyll and Bundler, then run bundle install and npm install to fetch Ruby and Node dependencies.

• Start the development environment with bundle exec gulp, which serves the site and watches your Sass files.
• Changes to _config.yml require stopping and restarting gulp.
• The final output is a set of static HTML pages styled according to the layout you selected in the front matter.

FAQ

Uni's configuration is centered around _config.yml and the layout stylesheets.

How do I change the layout in Uni?

Edit the front matter at the top of index.html and set layout to half, full, or card. The default is half. Each layout has its own stylesheet in assets/scss/layouts/, where you can adjust background images and text styling.

What image sizes do I need for Uni's responsive images?

Uni requires three versions of each background image: small at 768px wide, medium at 1200px, and large at 1600px. The responsivebackground mixin in a layout's stylesheet references these three files by name, so you can swap in your own images while keeping those widths.

Does Uni support Google Analytics?

Yes. Add your Google Analytics tracking key to the google_analytics field in _config.yml, and the theme will include it on your page. This is an optional setting; you can leave it empty if you don't need analytics.