Skip to content


Repository files navigation

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



  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


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


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.


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.


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.


Homepage layout editor demo created during SND Makes: Boston






No releases published


No packages published