Homepage layout editor demo created during SND Makes: Boston
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
chorus_page
images
js
sass
vox_components
.gitignore
README.md
bower.json
brainstorming.md
config.rb
drawer.html
index.html

README.md

SND Layout Editor

=================

hmpgr logo

A seamless way to get a handle on your homepage.

This is a demo that was built as part of SND Makes: Boston. (Read notes from our brainstorming to see how we got here.)

The problem

How might we make content creation fun and accessible to anyone in the newsroom?

How can we make managing complex page designs easier and more accessible in a visual way interface?

Who built this?

What is it?

This tool allows an editor to dynamically arrange and edit a complex web layout (like a homepage). In theory, a user would be able to:

  • Drag and drop content into layout
  • Rearrange content within a layout
  • Show how layout changes as you add and subtract content
  • Choose from a recently published story queue
  • Edit headlines, teaser text, and make modest changes to images

This also needs to hook into many disparate CMSes.

Challenges and questions

  • Could we change the templates dynamically?
  • Is democratizing homepage design to this degree dangerous?
  • Can we have presets and limits (e.g., only certain roles can move blocks)?
  • Is the preview responsive?
  • Would it make sense to apply to topic pages and/or article pages?
  • How can this fit into various CMS?

What still needs to happen

Probably a lot!

  • Build a way to version homepages and rollback changes
  • Build functionality to schedule homepages/designs
  • TBD

Development

Install

  1. Clone the repository from GitHub to your local machine
  2. Navigate to project folder
  3. In terminal, run bower install to pull dependencies
  4. In terminal, run compass watch to compile CSS

Build

To run locally ...

  1. Navigate to the project folder
  2. In terminal, run : python -m SimpleHTTPServer
  3. Open in your browser of choice at localhost:8000

Testing

There are some very basic tests in the tests/ folder. Run them like so: add commands here

Browser support

We only tested it in the latest version of Chrome. We think it would probably work in other A-grade browsers.

License

All of these documents are licensed under a Creative Commons BY-NC 3.0 license. You are free to share and to remix them (as long as you credit us) but please don't use them commercially without permission.

Suggestions

We welcome contributions and suggestions to help us improve this tool.

To contribute your changes:

  1. Fork this repo
  2. Create a branch git checkout -b my-branch
  3. Stage and commit your changes git commit -am 'description of my changes'
  4. Push the changes to your fork git push origin my-branch
  5. Submit a pull request to the parent repo

Additionally, you can create issues on this repo to suggest changes or improvements.