Styless

A modern, highly customizable, and unstyled Jekyll theme for developers with built-in dark mode.
Easily hosted on GitHub Pages with few dependencies.

See it in action!

Getting started

Dependencies

Styless is built for Jekyll, a static site generator. View the quick start guide for more information. Styless requires no special plugins and can run on GitHub Pages’ standard Jekyll compiler. The Jekyll SEO Tag plugin is included by default (no need to run any special installation) to inject SEO and open graph metadata on docs pages. For information on how to configure SEO and open graph metadata visit the Jekyll SEO Tag usage guide.

Quick start: Use as a GitHub Pages remote theme

Add Styless to your Jekyll site's _config.yml as a remote theme yaml remote_theme: moonharelabs/styless You must have GitHub Pages enabled on your repo, one or more Markdown files, and a _config.yml file. See an example repository

Local installation: Use the gem-based theme

Install the Ruby Gem bash $ gem install styless yaml # .. or add it to your your Jekyll site’s Gemfile gem "styless"
Add Styless to your Jekyll site’s _config.yml yaml theme: "styless"
Run you local Jekyll server bash $ jekyll serve bash # .. or if you're using a Gemfile (bundler) $ bundle exec jekyll serve
Point your web browser to http://localhost:4000

If you're hosting your site on GitHub Pages, set up GitHub Pages and Jekyll locally so that you can more easily work in your development environment.

Customize Styless

You can use any css framework with styless. Just add your libraries to `_includes/head.html file in your site.

bootstrap

_includes/head.html

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

Examples(some file like index.md)

[Link button](http://example.com/){: .btn .btn-primary }
<button type="button" class="btn btn-primary">Primary</button>

Dark Theme

Styless has a built-in dark theme. Styless automatically selects dark theme, if browser users selected darkt theme from system settings. But you can easily toggle it.

Enable html <button onclick="document.documentElement.classList.add('dark');">Enable Dark Theme</button>
Disable html <button onclick="document.documentElement.classList.remove('dark');">Enable Dark Theme</button>
Toggle html <button onclick="document.documentElement.classList.toggle('dark');">Enable Dark Theme</button>

About the project

License

Styless is distributed by an Unlicense License.

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in our GitHub repo.

Code of Conduct

Styless is committed to fostering a welcoming community.

View our Code of Conduct on our GitHub repository.