Skip to content

Latest commit

 

History

History
104 lines (80 loc) · 4.28 KB

README.md

File metadata and controls

104 lines (80 loc) · 4.28 KB
Raw

Gem Gem GitHub deployments

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

  1. Add Styless to your Jekyll site's _config.yml as a remote theme
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

  1. Install the Ruby Gem
$ gem install styless
# .. or add it to your your Jekyll site’s Gemfile
gem "styless"
  1. Add Styless to your Jekyll site’s _config.yml
theme: "styless"
  1. Run you local Jekyll server
$ jekyll serve
# .. or if you're using a Gemfile (bundler)
$ bundle exec jekyll serve
  1. 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
<button onclick="document.documentElement.classList.add('dark');">Enable Dark Theme</button>
  • Disable
<button onclick="document.documentElement.classList.remove('dark');">Enable Dark Theme</button>
  • Toggle
<button onclick="document.documentElement.classList.toggle('dark');">Enable Dark Theme</button>

About the project

Styless is © 2021-now by @ksengine.

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.