Quick Guide πŸš€

Last updated 4 days ago

A very brief overview on how our framework just to get you started.

πŸ€– Step 1 - Design your stuff

First design your stuff. Then it's time to analyze your design and mentally (or on paper) divide them into Containers, Rows and Columns. We use Bootstrap so a basic understanding of how the grid works is very very recommended. Here's a great article on how it works.

Then you can go two ways: either you do it all by hand (recommended for advanced users) or you use our plugin to create folders containing things like rows, columns, paddings and margins. Our plugin is NOT REQUIRED for this to work, but it will help you in the very beginning speeding up your understanding of how things need to be setup inside of Sketch.

πŸŽ“Important! The page (in Sketch) needs to be named Start here and the first artboard needs to be named Start or our previewer app will not read your .sketchfile correctly.

πŸ– Step 2 - Moving and naming stuff

This step is the most important one. It’s now that you begin giving your Sketch design file the super power of Bootstrap 4 and React without eve⌘n leaving the document. You are enhancing your design with real code components and the amazing responsive grid (we love you Bootstrap 4).

You add our components to Sketch by using very familiar built in Sketch tools like the Text Node (T), Grouping (⌘+G) and the shapes we support.

Number one rule: You need to name each layer and group with our component names or it will not work at all in code!

Example on how you create a {container} in Sketch

  1. Create a text node (T)

  2. Group that text node (⌘+G)

  3. Rename group {container}

  4. Delete text node or name it {text}

Check our Components or Cheat Sheet. And please study our demo files.

πŸ€–Step 3 - Drag and drop to our Previewer App

πŸ‘¨πŸ»β€πŸ’»Now comes the really fun part, dragging and dropping your .sketchfile onto our magical Previewer App. If you have done your homework of Step 2, you will see your design file beautifully rendered and fully responsive based on what you have set up.

✈️ Step 4 - Export as HTML

If you are ready to take your build even further you can export each artboard page as separate HTML files. Or maybe you just want to put it on your own server and test it on different devices.

πŸ’ͺStep 5 - Open your HTML files

You can use the excellent Solis for previewing your exported HTML files or you can just drag+drop them onto any browser. Or just drag and drop into your favorite browser.