Tachoyns is a fast & responsive theme for Hugo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes
images
layouts
static/css
LICENSE.md
README.md
theme.toml

README.md

Tachyons

Tachyons is a responsive & fast Hugo theme made with the amazing TACHYONS CSS framework & GEOMICONS.

Please see a demo site here and another example here.

Tachyons screenshot

Contents

Usage

From Hugo Quickstart:

  • Install Hugo

Go to Hugo Releases and download the appropriate version for your OS and architecture. Save the main executable as hugo (or hugo.exe on Windows) somewhere in your PATH as we will be using it in the next step. More complete instructions are available at Installing Hugo.

  • Create a new site & install Tachyon Theme
$ hugo new site /path/to/site
$ cd /path/to/site
$ mkdir themes
$ cd themes
$ git clone https://github.com/marloncabrera/tachyons.git

See Options below to customize your blog.

  • Create Some Content
$ hugo new post/first.md
  • Run Hugo and see the results
$ hugo server --theme=tachyons --buildDrafts --watch

Open your browser at http://localhost:1313 to see the results.

Options

Customize your blog editing the header & footer under themes/tachyons/layouts/partials/ directory.

Header

Replace "Your_blog_name_here" to change your new Blog name. If you need to create more sections, you have to add the section name to the nav menu like the example below, then pick up a specific icon from Icon Reference Table.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    ...
    ...
  </head>
  <body>
      <header class="tc pal bb b-near-white">
    <h1 class="f6 thin i link-child"><a href="/">Your_blog_name_here</a></h1>
        <nav>
          <ul class="list pln">
            <li class="dib prm"><a href="/"><span class="js-geomicon geomicon" data-icon="home"></span>Home</a></li>
            <li class="dib prm"><a href="/post"><span class="js-geomicon geomicon" data-icon="compose"></span>Blog</a></li>
            <li class="dib prm"><a href="/about"><span class="js-geomicon geomicon" data-icon="user"></span>About</a></li>
          </ul>
        </nav>
        </header>

Footer

On footer.html you can customize or remove the links to Github or Twitter and include Google Analytics javascript code between the <script> ...</script> tags along with Geomicons portion.

footer class="tc center bt b--near-white pvx phm pax-m phxl-l pvx-l">
<small class="f5 mw7 db center phm lh-copy">
<nav>
<ul class="list pln">
<li class="dib prm"><a href="https://www.github.com"><span class="js-geomicon geomicon blue" data-icon="github"></span></a></li>
<li class="dib prm"><a href="https://www.twitter.com"><span class="js-geomicon geomicon blue" data-icon="twitter"></span></a></li>
</ul>
</nav>
Copyright-  2015
</small>
</footer>
<script src="http://d2v52k3cl9vedd.cloudfront.net/geomicons/0.2.0/geomicons.min.js.gz"></script>
<script>
var icons = document.querySelectorAll('.geomicon');
Geomicons.inject(icons);
</script>
</body>
</html>

Icon Reference Table

Icon ID
bookmark bookmark
calendar calendar
camera camera
chat chat
check check
chevron-down chevron-down
chevron-left chevron-left
chevron-right chevron-right
chevron-up chevron-up
clock clock
close close
cloud cloud
cog cog
compose compose
dribbble dribbble
expand expand
external external
facebook facebook
file file
folder folder
geolocation geolocation
github github
grid grid
heart heart
home home
info info
link link
list list
lock lock
mail mail
music-note music-note
next next
no no
pause pause
picture picture
pin pin
play play
previous previous
refresh refresh
repost repost
search search
shopping-cart shopping-cart
skull skull
speaker-volume speaker-volume
speaker speaker
star star
tag tag
trash trash
triangle-down triangle-down
triangle-left triangle-left
triangle-right triangle-right
triangle-up triangle-up
twitter twitter
user user
video video
warning warning

Author

Marlon Cabrera Oliveira

Credits

Steve Francia

Adam Morse

Brent Jackson

##License

Open sourced under the MIT license.