Open Data, Open Source, and Civic Tech in Santa Monica
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.travis
_data
_includes
_judges
_layouts
_sass
assets
common @ 2a0d68a
contest
css
js
.gitignore
.gitmodules
.travis.yml
CNAME
Gemfile
LaunchParty2017.html
README.md
Survey.html
_config.yml
application.html
index.html
partners.html
resources.html

README.md

Hack the Beach

Presented by the City of Santa Monica and the Santa Monica Chamber of Commerce.

Development

Getting Started

This is a fairly standard Jekyll site, hosted on gh-pages. In fact, this site follows Jekyll's recommendation and was setup using the github-pages gem. We use Bundler to manage gem installs.

Getting all of this working on Windows is technically possible. But it's a big hassle. Jekyll recommends using Linux (e.g. Ubuntu) or OS X, and so do we.

  1. Clone the repo into a local directory

$ git clone git@github.com:CityofSantaMonica/hackthebeach.git hackthebeach
$ cloning into 'hackthebeach'...
$ cd hackthebeach

  1. Install the github-pages gem and its dependencies

$ bundle install

  1. Launch the website locally (available at http://localhost:4000)

$ bundle exec jekyll serve --baseurl ''

Project Layout

The standard Jekyll structure is used. We opted for the Named HTML files with permalinks approach to keep page URLs clean.

Partial Templates

Well they aren't Jekyll templates, but "partial template" is a name that fits. Inside _includes/templates are a number of Liquidified HTML snippets for rendering different content within consistent stylistic containers.

For example, _includes/templates/button.html defines the reusable button component used on the site. Usage is simple through Jekyll includes:

<div>
   {% include templates/button.html href="http://example.com" text="click me" %}
</div>

Sections of a particular page are rendered using the _includes/templates/section.html template, the content of which is stored in the corresponding folder under _includes (e.g. _includes/index for the homepage partial content)

Pages may also specify jumbotron content using the jumbotron front-matter with a path to the partial content (relative to the _includes/ directory). See index.html for an example.

_data

This folder contains the repeatable, structured content as YAML documents:

  • events
  • challenges
  • team and partners

Sass

Styles are built using scss partial files inside the _sass folder, each of which is @imported into the css/main.scss file. This is converted to the css/main.css file that is served with the site.