Giter VIP home page Giter VIP logo

jekyll-foundation-5-starter's Introduction

jekyll-foundation-5-starter

NOTE: Check out my new jekyll-foundation-6-starter

Start a github pages website powerd by Jekyll using Foundation/SCSS in under 5 minutes!

What it is.

Ever wanted a simple but nice looking responsive website as your project page or page for your repo? Are you in a hackathon needing to put up a working website in minutes? I do. Here is what I do, and I am sharing for you to use it, free. Free as in free speach AND free beer.

You can see the working example site here

For User & Organization Pages

See github documentation

  1. Fork or copy this repo to your user or project
  2. From the settings rename the repo to username.github.io naming scheme.

For Project Pages

See github documentation

  1. Create a gh-pages branch, i.e. git checkout -b gh-pages
  2. Download the contents of this repo
  3. Replace the entire branch contents with unzipped stuff
  4. Add, Commit then Publish the branch to github, i.e. git push --set-upstream origin gh-pages

To edit contents:

  1. edit _config.yml
  2. edit html/md files (hint: _layouts/default.html is the base)
  3. edit sass and run grunt (hint: Try editing scss/_stettings.scss)
  4. edit _include/nav.html

Use at your own resk, and follw licence restriction of each products used. Most are MIT (OK to use commercially).

Useful command:

This assumes you have grunt and bower installed. Make sure you have npm, and have ran npm install -g bower grunt-cli to install bower and grunt globally.

Run grunt to compile css from sass by simply run grunt from your terminal within your repo. It will launch watch by default. control-c to stop. If you only want the css compiled once, run grunt sass

To run jekyll locally to test your website while developing, run bundle exec jekyll serve --watch (requires ruby)

Your website should be viewable by going to localhost:4000

Github's doc on how to use Jekyll on Github Pages is also helpful.

For more on Foundation stuff that I am using, see Foundation documentation

Special Thanks

Special thanks to HTML 5 Boilerplate whose code I have based this on.

@kionoshp's padding-margin. Because it has become part of every site that I manage.

and Font Awesome for bing awesome.

jekyll-foundation-5-starter's People

Contributors

daigofuji avatar darkmorpher avatar olegshilov avatar s1syphos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

jekyll-foundation-5-starter's Issues

Should bower_components be in .gitignore?

I found I had to remove the entry of bower_components in .gitignore to allow those files to be committed to a new project (I had a scenario where I copied the project contents over to another project). It doesnt seem quite right that they are present but ignored?

Ignore node_modules

I noticed that when I started with a new copy of this, jekyll was running really slowly to do compilations and causing my computer to run hot doing a lot of CPU. Excluding node_modules in _config.yml solved it:

exclude:
  - node_modules

!global fails grunt from compiling css

I get this error message when I run grunt after foundation update

Running "sass:dist" (sass) task
Warning: bower_components/foundation/scss/foundation/functions:13: error: error reading values after $modules
Use --force to continue.

I've edited above file, but since it is a bower installed file, when I run update in the future, I need to remember to change it back...

_settings.scss changes don't work?

Hi,

Thanks for a great primer for Jekyll/Zurb.

I made a couple of changes to the _settings.scss file and re-compiled but they don't take/reflect changes?

Doing this:
$row-width: rem-calc(1400);
$primary-color: #ff9641; //was #8bad93 - green to orange

Then tried:
$ jekyll build/serve

and/or:
$ grunt / grunt build

Error: Cannot find module 'grunt-legacy-log-utils'

Running grunt I'm seeing this error:

Error: Cannot find module 'grunt-legacy-log-utils'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/pmackay/dev/waste-standards/jekyll-foundation-5-starter/node_modules/grunt/node_modules/grunt-legacy-log/index.js:25:16)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

I was able to do npm install for that module but then a bunch of others were missing. Several manual steps and I got it working so grunt would run. Would be great if this worked out the box.

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.