11r

Template information

Free

America's favorite Eleventy blog template.

Github Info
0 open issues
111 stars
1 watching
23 forks
FEATURES
High resolution
Well documented
Responsive
Syntax highlighting
SEO ready
Pagination
INFO
Released
Last updated
Stack

About the template

11r is a blog template with a dark color scheme built with Eleventy, the Rollup bundler, Tailwind, and Prism for syntax highlighting.

Features

  • Eleventy for static site generation. See .eleventy.js.
  • Nunjucks for templating.
  • TailwindCSS for utility-first styling. See tailwind.config.js and src/styles/tailwind.css.
  • markdown-it-anchor for generating anchors for headings.
  • eleventy-plugin-nesting-toc for generating tables of contents from anchors. See this page for a demo.
  • Prism syntax highlighting for code with copy button scripting included via clipboard.js. See src/styles/base.css for the theme; and src/scripts/copy.js, which is used by main.js.
  • Rollup for bundling and compiling. See rollup.config.js.
  • JavaScript-based privacy policy notice dismissal handling. See src/scripts/privacy-policy.js, which is used by main.js.
  • Tags.
  • Pagination.
  • Deploy script for GitHub Pages via deploy.sh, using the gh-pages branch. Be sure to edit said script to work with your repository. Remember to also configure the repository appropriately.
  • Exemplary Flexbox usage.
  • SEO mostly done for you. Ensure you replace the data referenced in src/globals/site.json, including the images in public/.

Setup

  1. git clone git@github.com:reeseschultz/11r.git
  2. cd 11r && npm i
  3. npm run dev to serve the site.
  4. npm run build to build the site.
  5. ./deploy.sh to deploy the site to GitHub Pages (includes build).

Tag Styling

Tags are styled in src/styles/tags.css. Coloring custom tags works as such:
...

.tag.beer {
  @apply bg-blue-500;
}

.tag.spirituality {
  @apply bg-indigo-500;
}

.tag.orcas {
  @apply bg-purple-500;
}

...

Credits

Contributing & License

Find a problem, or have an improvement in mind? Great. Go ahead and submit a pull request. Note that the maintainer, Reese, offers no assurance he will respond to you, fix bugs or add features on your behalf in a timely fashion, if ever, unless you reach an agreement with him about support...

By submitting a pull request, you agree to license your work under this project's MIT license.

Get notified when we add new designs.

Twice a month I share the best Tailwind templates, UI kits and components in my newsletter. 144 Tailwind hackers find it useful. I'd love you to join.