Convert Figma logo to code with AI

poole logolanyon

A content-first, sliding sidebar theme for Jekyll.

3,236
2,953
3,236
34

Top Related Projects

48,920

:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.

Build a Jekyll blog in minutes, without touching the command line.

✨ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com

1,195

Cayman is a Jekyll theme for GitHub Pages

Github Pages template for academic personal websites, forked from mmistakes/minimal-mistakes

Quick Overview

Lanyon is a content-focused Jekyll theme for GitHub Pages. It provides a clean, minimal design that emphasizes readability and simplicity, making it ideal for blogs and personal websites. Lanyon is built on Poole, a Jekyll setup designed to be a clear and concise foundation for Jekyll themes.

Pros

  • Simple and clean design that focuses on content
  • Responsive layout that works well on various devices
  • Includes a toggleable sidebar for easy navigation
  • Built-in support for categories and tags

Cons

  • Limited customization options compared to more complex themes
  • Requires some knowledge of Jekyll and GitHub Pages to set up and use effectively
  • May not be suitable for websites that require complex layouts or advanced features
  • Limited built-in color schemes (only 8 options)

Getting Started

To use Lanyon, follow these steps:

  1. Fork the Lanyon repository on GitHub.
  2. Rename the forked repository to yourusername.github.io.
  3. Customize the _config.yml file with your information:
title:               Your Site Title
tagline:             'A Jekyll theme'
description:         'Your site description'
url:                 https://yourusername.github.io
baseurl:             ''
paginate:            5
  1. Create new posts in the _posts directory using the format YYYY-MM-DD-title.md.
  2. Customize the sidebar by editing _includes/sidebar.html.
  3. Push your changes to GitHub, and your site will be live at https://yourusername.github.io.

For more detailed instructions and customization options, refer to the Lanyon README.

Competitor Comparisons

48,920

:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

Pros of Jekyll

  • More comprehensive and feature-rich static site generator
  • Larger community and ecosystem with extensive plugins and themes
  • Official support from GitHub Pages

Cons of Jekyll

  • Steeper learning curve for beginners
  • More complex setup and configuration
  • Slower build times for large sites

Code Comparison

Jekyll:

jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

Lanyon:

git clone https://github.com/poole/lanyon.git
cd lanyon
jekyll serve

Summary

Jekyll is a full-featured static site generator with a large ecosystem, while Lanyon is a minimalist Jekyll theme focused on simplicity. Jekyll offers more flexibility and customization options but requires more setup and learning. Lanyon provides a quick start with a clean, responsive design but has fewer built-in features.

Both projects use Jekyll under the hood, but Lanyon offers a pre-configured theme that's ready to use out of the box. Jekyll is better suited for larger, more complex sites, while Lanyon is ideal for simple blogs or personal websites that prioritize content over extensive functionality.

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.

Pros of Minimal Mistakes

  • More feature-rich with extensive customization options
  • Actively maintained with frequent updates and improvements
  • Comprehensive documentation and examples

Cons of Minimal Mistakes

  • Steeper learning curve due to its complexity
  • Potentially slower load times due to additional features

Code Comparison

Lanyon (_config.yml):

title:               'Lanyon'
tagline:             'A Jekyll theme'
description:         'A reserved <a href="https://jekyllrb.com" target="_blank">Jekyll</a> theme that places the utmost gravity on content with a hidden drawer.'
url:                 https://lanyon.getpoole.com
baseurl:             ''
paginate:            5

Minimal Mistakes (_config.yml):

title: "My Awesome Site"
name: "Your Name"
description: "An amazing website."
url: "https://mysite.com"
repository: "username/repo-name"
theme: minimal-mistakes-jekyll
minimal_mistakes_skin: "default"

Summary

Lanyon offers simplicity and a focus on content, making it ideal for beginners or those preferring a minimalist approach. Minimal Mistakes provides a more robust feature set and customization options, suitable for complex sites but requiring more setup time. Choose based on your project needs and technical expertise.

Build a Jekyll blog in minutes, without touching the command line.

Pros of jekyll-now

  • Simpler setup process, designed for beginners
  • Includes social media integration out of the box
  • Provides a more streamlined, minimalist design

Cons of jekyll-now

  • Less customizable than Lanyon
  • Fewer built-in features and layout options
  • May require more manual customization for advanced users

Code Comparison

jekyll-now:

<div class="container">
  <div class="site-info">
    <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
    <p class="site-description">{{ site.description }}</p>
  </div>
</div>

Lanyon:

<div class="container content">
  <header class="masthead">
    <h3 class="masthead-title">
      <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
      <small>{{ site.tagline }}</small>
    </h3>
  </header>
</div>

Both repositories provide Jekyll themes for GitHub Pages, but they cater to different user needs. jekyll-now focuses on simplicity and ease of use, making it ideal for beginners or those who want a quick setup. Lanyon, on the other hand, offers more customization options and features, making it suitable for users who want more control over their site's appearance and functionality.

✨ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com

Pros of Beautiful-Jekyll

  • More feature-rich out of the box, including social media integration and Google Analytics support
  • Easier customization with built-in color themes and layout options
  • Active development and community support

Cons of Beautiful-Jekyll

  • Larger file size and potentially slower load times due to additional features
  • Steeper learning curve for beginners due to more complex configuration options
  • Less minimalist design, which may not suit all users' preferences

Code Comparison

Beautiful-Jekyll configuration:

title: My Website
author: John Doe
navbar-links:
  About Me: "aboutme"
  Resources:
    - Beautiful Jekyll: "https://beautifuljekyll.com"
    - Learn markdown: "https://www.markdowntutorial.com/"

Lanyon configuration:

title: Lanyon
tagline: 'A Jekyll theme'
description: 'A reserved <a href="https://jekyllrb.com" target="_blank">Jekyll</a> theme that places the utmost gravity on content with a hidden drawer.'
url: https://lanyon.getpoole.com

Beautiful-Jekyll offers more detailed configuration options out of the box, while Lanyon maintains a simpler, more minimalist approach to configuration.

1,195

Cayman is a Jekyll theme for GitHub Pages

Pros of Cayman

  • More modern and visually appealing design with a prominent header
  • Easier to customize with simple color scheme options
  • Better out-of-the-box mobile responsiveness

Cons of Cayman

  • Less flexibility in layout and structure compared to Lanyon
  • Fewer built-in features and layout options
  • Limited sidebar functionality

Code Comparison

Cayman (main.scss):

@import "normalize";
@import "rouge-github";
@import "variables";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

@mixin large {
  @media screen and (min-width: #{$large-breakpoint}) {
    @content;
  }
}

Lanyon (_config.yml):

# Setup
title:               Lanyon
tagline:             'A Jekyll theme'
description:         'A reserved <a href="https://jekyllrb.com" target="_blank">Jekyll</a> theme that places the utmost gravity on content with a hidden drawer. Made by <a href="https://twitter.com/mdo" target="_blank">@mdo</a>.'
url:                 http://lanyon.getpoole.com
baseurl:             ''
paginate:            5

Both themes are designed for GitHub Pages and Jekyll, but they have different approaches. Cayman focuses on a clean, modern look with easy customization, while Lanyon offers more layout flexibility and features. The code snippets show that Cayman uses SCSS for styling, while Lanyon relies more on Jekyll's configuration file for setup.

Github Pages template for academic personal websites, forked from mmistakes/minimal-mistakes

Pros of academicpages.github.io

  • Specifically designed for academic portfolios and CVs
  • Includes pre-built sections for publications, talks, and teaching
  • Offers easy customization for academic content

Cons of academicpages.github.io

  • More complex setup compared to Lanyon's minimalist approach
  • Less flexibility for non-academic use cases
  • Steeper learning curve for users unfamiliar with Jekyll

Code Comparison

academicpages.github.io:

---
title: "Paper Title Number 1"
collection: publications
permalink: /publication/2009-10-01-paper-title-number-1
excerpt: 'This paper is about the number 1. The number 2 is left for future work.'
date: 2009-10-01
venue: 'Journal 1'
paperurl: 'http://academicpages.github.io/files/paper1.pdf'
citation: 'Your Name, You. (2009). &quot;Paper Title Number 1.&quot; <i>Journal 1</i>. 1(1).'
---

Lanyon:

---
layout: post
title: What's Jekyll?
---

<p class="message">
  Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on!
</p>

The code snippets highlight the difference in focus between the two themes. academicpages.github.io provides structured frontmatter for academic publications, while Lanyon offers a simpler blog-oriented structure.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Lanyon

Lanyon is an unassuming Jekyll theme that places content first by tucking away navigation in a hidden drawer. It's based on Poole, the Jekyll butler.

Lanyon Lanyon with open sidebar

Contents

Usage

Lanyon is a theme built on top of Poole, which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See the Poole usage guidelines for how to install and use Jekyll.

Options

Lanyon includes some customizable options, typically applied via classes on the <body> element.

Sidebar menu

Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's front-matter.

---
layout: page
title: About
---

Why require a specific layout? Jekyll will return all pages, including the atom.xml, and with an alphabetical sort order. To ensure the first link is Home, we exclude the index.html page from this list by specifying the page layout.

Themes

Lanyon ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

Lanyon with red theme Lanyon with red theme and open sidebar

There are eight themes available at this time.

Available theme classes

To use a theme, add any one of the available theme classes to the <body> element in the default.html layout, like so:

<body class="theme-base-08">
  ...
</body>

To create your own theme, look to the Themes section of included CSS file. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Lanyon with reverse layout Lanyon with reverse layout and open sidebar

Reverse the page orientation with a single class.

<body class="layout-reverse">
  ...
</body>

Sidebar overlay instead of push

Make the sidebar overlap the viewport content with a single class:

<body class="sidebar-overlay">
  ...
</body>

This will keep the content stationary and slide in the sidebar over the side content. It also adds a box-shadow based outline to the toggle for contrast against backgrounds, as well as a box-shadow on the sidebar for depth.

It's also available for a reversed layout when you add both classes:

<body class="layout-reverse sidebar-overlay">
  ...
</body>

Sidebar open on page load

Show an open sidebar on page load by modifying the <input> tag within the sidebar.html layout to add the checked boolean attribute:

<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" checked>

Using Liquid you can also conditionally show the sidebar open on a per-page basis. For example, here's how you could have it open on the homepage only:

<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" {% if page.title =="Home" %}checked{% endif %}>

Development

Lanyon has two branches, but only one is used for active development.

  • master for development. All pull requests should be to submitted against master.
  • gh-pages for our hosted site, which includes our analytics tracking code. Please avoid using this branch.

Author

Mark Otto

License

Open sourced under the MIT license.

<3