Giter VIP home page Giter VIP logo

hugoscroll's Introduction

Hugo Scroll

A live example of this theme is running at this site hugoscroll.internaldeployment.se Using scroll

To get started with hugo you first need to download the binaries, whith these in place it is easy to get started.

# Init site
hugo new site My_New_Cool_Venture
cd My_New_Cool_Venture

# Get this cool theme
git clone https://github.com/SenjinDarashiva/hugoscroll themes/hugoscroll

# Start the watching your folder
hugo --buildDrafts --theme="hugoscroll" --watch server

With this done you can start creating posts, for this theme theme there is some specific information that needs to be added to your post header. For the first and the last post you need to add a class definition, the headers for this page look like this:

+++
title = "What is this"
description = "First post"
weight = 1
class="post first"
+++

+++
title = "Finaly!"
description = "Last Post"
weight = 100
class="post last"
+++

Every standard post must contain a weight between the weight of the first and the last to ensure correct ordering, in this case this allows us to use any number between 2 -- 99

Site config

Apart from the regular config you can specify the following parameters to get extra features in the theme

[Params]
  github = "Senjindarashiva"
  bitbucket = "floch"
  flickr = "senjin"
  twitter = "senjindarshiva"
  email = "[email protected]"
  description = ""
  linkedin = "fredrikloch"
  cover = "/images/background-cover.jpg"
  logo = "/img/logo-1.jpg"

Developing hugoscroll

In order to develop or make changes to the theme you will need to have the sass compiler and bourbon both installed.

To check installation run the following commands from a terminal and you should see the > cli output but your version numbers may vary.

SASS

sass -v
> Sass 3.3.4 (Maptastic Maple)

If for some reason SASS isn't installed follow the instructions from the Sass install page

Bourbon

bourbon help
> Bourbon 3.1.8

If Bourbon isn't installed follow the installation instructions on the Bourbon website

Once installation is verified we will need to go mount the bourbon mixins into the scss folder.

From the project root run bourbon install with the correct path

bourbon install --path static/scss
> bourbon files installed to static/scss/bourbon/

Now that we have the bourbon mixins inside of the scss src folder we can now use the sass cli command to watch the scss files for changes and recompile them.

sass --watch static/scss:static/css
>>>> Sass is watching for changes. Press Ctrl-C to stop.

To minify the css files use the following command in the statics folder

curl -X POST -s --data-urlencode 'input@css/base.css' http://cssminifier.com/raw > css/base.min.css

Font-awesome icons

For more information on available icons: font-awesome The files supplied with this theme have a minor alteration to work around an issue with adblocks and social icons. The changes means that the following classes is used:

  • fa-tt -- twitter
  • fa-fb -- facebook
  • fa-ll -- linkedin

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.