Skip to content
This repository has been archived by the owner on Apr 25, 2019. It is now read-only.

Welcome

Gareth Joyce edited this page Nov 8, 2016 · 1 revision

About Chop Chop

Why Chop Chop?

With responsive web design being the norm, we find ourselves fighting against our old processes. The traditional Wireframe > Design > Chop > Build > Go Live process doesn’t work with responsive websites. We need to move away from this flow and we need something to help us do that.

On a fixed width website we could just “Chop” a Photoshop picture of the website to deliver to our clients and it would be almost pixel perfect.

This is not the case anymore, if we produce a Photoshop picture for a responsive site it is a mockup of what the site could look like at that particular screen size. It will not show us how the design behaves when the screen is resized.

We need a common design system that we all use and contribute to across all projects irrespective of platform used. If we all use this system and contribute to it, over time it will grow and be refined. A lot of the design work (particularly layout based) can be done by throwing elements together in the browser and seeing how they react to varying screen sizes. Instead of designing complete layouts we should ask ourselves questions like,

  • What do my headings look like?
  • What does a button look like?
  • How many button variants do we need?

Asking these question and designing the elements that make up the website is a much more effective way of producing a better end result.

Also we often find ourselves initially stuck when starting a new project. Questions are asked:

“So what is the thing we are using for this project?”

We should be able to get going on a project irrespective of platform used or hosting setup. Front-end should be just that, we shouldn’t need to install Magento or WordPress in order to start a project. Moving the front-end experience away from the platform lowers the barrier to entry but this doesn’t mean we should ignore the platforms entirely. We will be looking to see how we can easily integrate this with WordPress and Magento soon.


The aims of Chop Chop

  • Create a coherent frontend language that is platform agnostic
  • Provide a starting point for any project
  • Cut down the amount of repetitive work

What Chop Chop is

Chop Chop is a simple library of common reusable patterns we use across all projects everyday. the patterns are made up of HTML/CSS, (SCSS) and JavaScript.

What Chop Chop is not

A complete framework. We wanted to keep Chop Chop small.

The Chop Chop Toolkit

The modern web developer is now expected to know 9348 different program languages and syntaxes. We have selected a few technologies that help us build this site and will hopefully help you too.

Read more

Clone this wiki locally