Building HACKED – Adventures in Pixel Art & Static Site Generation

View Github Repository Open presentation in a new window

leeky

See all presentation from leeky

Building HACKED – Adventures in Pixel Art & Static Site Generation

1 0

fesuffolk-hacked

On Github leeky / fesuffolk-hacked

Building HACKED

Adventures in Pixel Art & Static Site Generation

Robert Lee-CannTwitter - @leeky

Hello!

I work as a Web Developer...

... and I'm one quarter of Geeks of London.

We're a non-profit that organises geeky events.

Pixel Art

... but let's start simple...

Lines

Lighting

Shading

Examples

Animated GIF!!

Tools

  • Pixen for Mac
  • Photoshop Brushes

HACKED

  • July 20th + 21st
  • 500 developers and designers
  • at The O2, in London

http://www.middlemanapp.com/

Installation

gem install middleman

Creating a Project

middleman init fesuffolk

create  fesuffolk/.gitignore
create  fesuffolk/config.rb
create  fesuffolk/source/index.html.erb
create  fesuffolk/source/layouts/layout.erb
create  fesuffolk/source/stylesheets
create  fesuffolk/source/stylesheets/all.css
create  fesuffolk/source/stylesheets/normalize.css
create  fesuffolk/source/javascripts
create  fesuffolk/source/javascripts/all.js
create  fesuffolk/source/images
create  fesuffolk/source/images/background.png
create  fesuffolk/source/images/middleman.png

Project Templates

middleman init fesuffolk --template=amicus

Starts with HTML boilerplate, CSS reset, compass, susy etc all ready to go!

Pages

source/example_page.markdown:

# Example Page

Here is some content.

* foo
* bar
* baz

source/example_page.html.erb

	...

... and many more formats!

Layouts

source/layouts/layout.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= current_page.data.title %></title>
</head>

<body>
  <div class="content">
    <%= yield %>
  </div>
</body>
</html>

Partials

source/layouts/main.html.erb

<nav class="primary">
  <%= partial "layouts/navigation" %>
</nav>

source/layouts/_navigation.html.erb

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact Us</li>
</nav>

Previewing

middleman server

== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567

Generating

middleman build

create  build/favicon.ico
create  build/javascripts/plugins.js
create  build/javascripts/libs/jquery-1.9.0.min.js
create  build/javascripts/libs/holder.js
create  build/javascripts/libs/modernizr-2.6.1.min.js
create  build/javascripts/script.js
create  build/stylesheets/animate.css
create  build/stylesheets/screen.css
create  build/404.html
create  build/blog/index.html
create  build/blog/feed.xml
create  build/blog/2013/04/24/the-waiting-is-over/index.html
create  build/welcome/index.html
...

Extensions

  • middleman-blog
  • middleman-livereload
  • middleman-deploy

DEMO

Questions?

Thank you!

20th + 21st July at The O2, London

http://hacked.io

@hackedio