vimuxvimux
113

Binario

screenshot of Binario
hugo

Responsive card-based & code-light Hugo theme

GithubDemo

Overview

Binario is a responsive card-based and code-light Hugo theme. It offers a card-based list layout and comes with several features such as color themes, internal Hugo templates, table of contents, related content, MathJax support, and more. It is easy to install and customize.

Features

  • Responsive: The theme is responsive, ensuring that it looks good on different screen sizes.
  • Card-based list layout: Binario uses a card-based layout for list pages, providing an organized and visually appealing display.
  • Color themes: Multiple color themes are available to choose from, allowing users to personalize their website's appearance.
  • Internal Hugo templates: Binario includes internal Hugo templates for Open Graph, Schema, Twitter Cards, Google Analytics, Disqus comments, and more.
  • Table of contents: The theme supports generating a table of contents for long articles, making it easier for readers to navigate.
  • Related content: Binario offers a feature to display related content at the end of each article, helping to increase engagement.
  • MathJax support: MathJax, a popular JavaScript library for displaying mathematical equations, is integrated into the theme.
  • Table of Contents: The theme provides a table of contents for long articles, making it easier for users to navigate through the content.

Option A. Git clone

  1. In your Hugo site directory, run the following command:
git clone https://github.com/example/binario.git themes/binario
  1. Edit your config.toml configuration file and add the following parameter:
theme = "binario"

Option B. Git submodule

  1. In your Hugo site directory, run the following command:
git submodule add https://github.com/example/binario.git themes/binario
  1. Edit your config.toml configuration file and add the following parameter:
theme = "binario"

Option C. Download ZIP and manual install

  1. Download the ZIP file of the Binario theme.
  2. Extract the contents and move them to the themes/binario directory within your Hugo website.
  3. Edit your config.toml configuration file and add the following parameter:
theme = "binario"

After installing the theme, you can run your site in Hugo server mode and access it at localhost:1313. The Binario theme should be visible.

Summary

Binario is a responsive and visually appealing Hugo theme that offers a card-based list layout and various features such as color themes, table of contents, related content, and more. It is easy to install and customize, making it a great choice for creating a modern website.

hugo
Hugo

Hugo is an open-source static site generator that features fast build times, flexible themes, support for multiple content formats, multilingual websites, live reloading, and an active community. It allows developers to easily create and deploy SEO-friendly and mobile-responsive websites.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.