Code Monkey home page Code Monkey logo

open-austin.github.io's Introduction

open-austin.org

The Open Austin website


Development Instructions

Required System Installs (if you haven't already)

  • Install homebrew (for better installation of OS X packages)
    • ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • Install OSX Xcode command line tools if you haven't
    • xcode-select --install

Installing Jekyll/Ruby on OS X

OS X comes with Ruby 2.0.0, but its not the latest version and you may have to use the sudo command to do anything. Best to install a version manager like ruby-install + chruby to help with that.

If you already use rbenv or another Ruby version manager, you should be good as long as you use ruby 2.4.2+.

  • Install ruby-install for installing Ruby versions. Jekyll requires at least Ruby 2.1 but we recommend Ruby 2.4+

    • brew install ruby-install
    • ruby-install ruby 2.4.2
  • Install chruby to switch ruby versions.

    • brew install chruby
    • chruby ruby 2.4.2
    • Copy source /usr/local/share/chruby/chruby.sh into your ~/.bashrc file (or if you use Zsh, .zshrc). Save that file and start a new terminal.
  • Install jekyll to install Jekyll. - Install jekyll to install Jekyll.

    • gem install jekyll
  • Install Ruby Bundler, the best way to manage Ruby gems (packages)

    • gem install bundler

Start Jekyll

Next, clone down this repo with

git clone https://github.com/open-austin/open-austin.github.io.git

Then, navigate to that directory using

cd open-austin.github.io

After everything is correctly installed and you are in the home directory, run

bundle install

Then,

bundle exec jekyll serve --incremental --watch --trace

Then go to

http://localhost:4000/

Troubleshooting

sudo <your> <command here>

Instructions for exporting content from Wordpress

gem install jekyll-import hpricot open_uri_redirections
ruby -rubygems -e 'require "jekyll-import";
    JekyllImport::Importers::WordpressDotCom.run({
      "source" => "import/openaustin.wordpress.2015-11-21.xml",
      "no_fetch_images" => false,
      "assets_folder" => "assets"
    })'

Planning

Staging Site: http://open-austin.github.io/

Planning & Design

Sitemap

our sitemap link to Gliffy

Design Docs

[Design Brief](planning-design/planning_and_analytics/OA Design Brief.pdf?raw=true)

Colors/Typography

Mockups

Homepage Mockups from 1-Sept

Higher fidelity Mockup from 24-Aug Meeting ([PDF](planning-design/other_mockups/OA Homepage 1.pdf?raw=true) AND [Sketch](planning-design/other_mockups/OA Homepage 1.sketch?raw=true))

Original Lo-fi Mockup

Requirements

Link to functional requirements doc

Assets/Images

Links to potential assets/images

License

The code for this repository has been released into the public domain by Open Austin via the Unlicense.

open-austin.github.io's People

Contributors

amaliebarras avatar courtney-rosenthal avatar dependabot[bot] avatar fleeting avatar jendowns avatar jmensch avatar lianilychee avatar luqmaan avatar malev avatar mapineda avatar mscarey avatar newswim avatar seandellis avatar sergeiwallace avatar taylortrc avatar techtolentino avatar victoriaodell avatar werdnanoslen avatar wilsaj 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

Watchers

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

open-austin.github.io's Issues

homepage - featured projects section

Part of this will be creating a _projects directory which will include a markdown file for each project with yml front matter at the top with metadata and descriptions of each project. Basically the same pattern as the _posts directory for blog posts.

and the next step will be render those files into some format for the project gallery page. which make be the same as the hack team page or something different...

Create homepage

  • hero section
  • link to meetup / "blurb" section
  • featured blog posts
  • featured projects
  • Change Colors
  • Add "read more projects" link
  • Sponsor logos into the footer
  • make hero banner buttons work (javascript?)
  • make icons below hero link to something

Content reorganization for the homepage

I made a really ugly redline to capture my thoughts on how we can reorganize the homepage. It's an adjusted version of what we have on the site map.
Biggest change is moving projects to go before the blog and moving the icons under the upcoming event block.

I'm going to mock this up now.

oa-adjusted

oa-sitemap

Desktop styling Issues

  • Make featured posts inline instead of vertical
  • Need more space between buttons on hero banner
  • Webfont link isn't working (Raleway)
  • update orange and grey to hex codes vicky provided

Orange #e05e26
Grey #585859

Advocacy Page `/advocacy/`

Organize existing resource page

  • Policy starter guide (can recycle "learn more" content)
  • Resource links (including candidate questionaires)

Button up the Buttons & links

We have a few different styles of button hovers going on. Let's think about how to clean this up. Below I've documented the current styles we have.

@mateoclarke suggested using blue and I think it will help the buttons stand out from the orange. I'm currently looking into this issue.

Current Experience

Nav Bar

These link to internal pages
screen shot 2016-02-07 at 9 09 56 pm
screen shot 2016-02-07 at 9 10 02 pm

Icons on Home Page

These link to internal pages. They don't seem clickable at first.
screen shot 2016-02-07 at 9 10 07 pm
screen shot 2016-02-07 at 9 10 11 pm

Blog Post and Project Page

This style is used to go to the projects page and the blog post page
screen shot 2016-02-07 at 9 10 49 pm
screen shot 2016-02-07 at 9 10 46 pm
screen shot 2016-02-07 at 9 10 44 pm

Meetup

This links to the external meetup site.
screen shot 2016-02-07 at 9 10 36 pm
screen shot 2016-02-07 at 9 10 32 pm

Blog title & Meetup Title

Meetup title links to an external site. Blog title links to the specifi blog post.
screen shot 2016-02-07 at 9 10 29 pm
screen shot 2016-02-07 at 9 10 25 pm

Event page linkouts.

The buttons that are styled for this one link to an external page and an internal page. Meetup.com and the events page on our site that currently only has the calendar.
screen shot 2016-02-07 at 9 10 19 pm
screen shot 2016-02-07 at 9 10 15 pm

Footer Links

Links to our extnal social sites. Etc.
screen shot 2016-02-07 at 9 11 06 pm
screen shot 2016-02-07 at 9 11 04 pm

homepage - format news/blog section

Right now, blog items are listed vertically. We could pull out a featured image and give that section a strong pull.

Is one featured article good, or more? Should it default to the most recent?

Go-live process

We need to do some things to get the new site live:

  • Choose target date
  • Change DNS to point to open-austin.github.io
  • Make sure WP URL settings are configured correctly

Talks page

A list of all the presentations from the civic tech meetups with:

  • Title
  • Brief description
  • Slides if available
  • Photo if available

Projects on Home Page

I think the latest update to make the projects full width is kind of overwhelming on desktop but would work great on mobile.

I made some redlines with a possible solution that is different from the inital 3 column layout.
Let me know if it makes sense... I was thinking we can stack the 3 projects. It makes them more compact than they are now but also gives them some room to beathe. ๐Ÿ’ซ

open austin code for america brigade austin texas

Ah, we have project pages too and it's not initially clear that the project title links to an internal project page. The 3 icon/buttons that we have are nice but also aren't descriptive of what they link to. If anything a hover over text box would be nice.

If we link to Beta stages on the external CfA site we should link to the beta section specifically.

Learn More Page

Learn more landing page

Get Involved / Get Hacking links

Come hang

meetup

Talk with us

slack
twitter

Connect and learn

survey

Work

policy page
github
project page

Add logo to header

When logo is finished, add to header page than links back to home page. possibly add it to hero banner too

remaining blog to-dos

  • add default image to blog (going to wait until logo finalized)
  • fix breadcrumb styling
  • add real images from WP to most recent posts
  • move first "in-post" pic to featured image spot

Lol

๐ŸŒˆ

Hover text over project icons (or something descriptive)

It's not initially clear that the project title links to an internal project page. The 3 icon/buttons that we have are nice but also aren't descriptive of what they link to. If anything a hover over text box would be nice.

Projects Gallery - markdown files

In order to make each of these projects more attractive, we need to find photos, screenshots or logos of them to display. Ideally these photos would all have the same aspect ratio so we don't have to get clever with cropping and art direction via CSS.

We should also include more descriptive information about each project. I copy/pasted the README.md content from the Instabus project for _projects/instabus.md. It's not well formatted yet but you can use that file as a template.

TODO

  • add a thumb: to the front-matter of each .md file in _projects. example
  • save a thumbnail for each project to assets/images. Can we try for 250x200px resolution? (open to debate)
  • add other details to the front-matter, like the current CfA project stage. example
  • add content to each project file underneath the front-matter. example

In case you care...

The way Jekyll knows about our projects is via the _project folder which is a Jekyll "collection".

Ben Balter has a nice blog post explaining how collections work.

add typography and color inspiration to pinterest

Typography:

Based on vote in #design and #website slack channels...

Header: Myriad, bold
Subhead: Georgia, italic
Body: Myriad, regular

screen shot 2015-11-17 at 9 33 16 pm

Color:

Based on feedback gathered at October hack night...

screen shot 2015-11-17 at 9 32 27 pm

Project page width

The project page has a wider width than the other nav pages.
Do ya'll know what's up?

I can't figure out what its supposed to be done to fix that.
@mateoclarke @luqmaan

๐Ÿˆ

homepage - Footer

  • add more Find Us Online logos/links
  • update styling to inline
  • Do we want the sponsors section? Maybe we call it a thank you to...

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.