Spark testing instructions

Here's a description of steps you can take to test out the Spark distribution. (instructions written against the alpha4 release)

To begin, log in to http://demo.sparkdrupal.com/ as user: sparkles, pass: sparkItUp

In-place editing

Tip: This feature comes from Edit module, which can be installed separately (make sure you have the core/Aloha patches documented in Spark's .make files!)

1. Navigate to the full node: http://demo.sparkdrupal.com/node/1
2. In the shortcut bar (upper left), not on the normal Edit tab, click the "Edit" radio to toggle into "Edit mode." This will cause the screen to fade out and blue outlines to appear around any field which is editable.
3. Click into the title field. This causes a box to appear around the field, with the label, as well as Save and X buttons, both greyed out.
4. Make a change to the title. You should now see the Save button become active. Click it to save your change, which will immediately be visible on the site.
5. Click into the title field again, make a change, and this time click somewhere else on the screen, like the sidebar. You'll get a prompt warning you that you have unsaved changes.
6. Now, click into the Body field. This will load the Aloha Editor WYSIWYG toolbar.
7. Try highlighting a word in the body below and clicking one of the buttons in the toolbar such as "S" for strong or "E" for emphasis. You should see the styling change.
8. Highlight another word, and click the LInk button. (TODO: BZZT — BROKEN.) You can enter either a URL here, or else start typing a node title such as "About" to reference content on the site.
9. Click the image to highlight it. Use the handle in the upper left to drag it up and down within the content area (TODO: horizontal is broken). You can use the Left text alignment button in the toolbar to move it to the left instead.
10. Click "Save" when finished. Then, back up in the shortcut toolbar, toggle back to "View" mode. Now you can see what your content looks like on the front-end.
11. For extra bonus points, undo the edits you did so it's nice for the next person. :)

Responsive Layout Builder

Tip: This feature comes from Layout module and Grid Builder module, which can be installed separately (make sure you have the Panels patches documented in Spark's .make files!)

1. Navigate to Structure > Panels > Custom layout (admin/structure/panels/layouts/add). Click "Edit" next to spark_demo_home.
2. This page presents the responsive layout builder, which is a set of grey boxes stacked on top of each other representing the regions within a given layout. Across the top are varying breakpoints sizes: Smartphone, Tablet, Standard. Clicking between them will change the size of the layout accordingly in the preview below. Each breakpoint size is associated with a grid, and the number and size of columns + their gutters and padding is configurable, as is the list of breakpoints and regions. (They're also CTools exportable—yay!)
3. The layout builder follows the principles of responsive design, as we call it "upside down Tetris." By grabbing the right side of a region and dragging it inward (it will snap to the grid defined along the top edge), you will see an opening appear to the right with a blue outline in it. This is an indicator that the region *below* will snap into place once you lift up your mouse button. Try it!
4. You can also grab a region and move it above or below other regions. Doing so will re-order it in the DOM across all breakpoint sizes.
5. You can delete a region by pressing its "X" button in the upper right corner. This will remove it from all breakpoint sizes. (A "hidden" button is coming soon which only hides it from one breakpoint size.)
6. You can delete a region by pressing its "X" button in the upper right corner. This will remove it from all breakpoint sizes. (A "hidden" button is coming soon which only hides it from one breakpoint size.)
7. Between regions, you can click and drag one of the sides of the region to move it back and forth and resize the columns.
8. You can also add a new region by clicking the "Add region" button at the top or bottom of the layout. This will pop up a modal asking for the name of the region, and append it to the top or bottom of the region, depending on which button you clicked.
9. Once you click "Save" at the bottom, your layout will be available for general use. Go to the home page, and click the "Change Layout" button at the bottom. This will pop up a modal dialog. Choose Category: Responsive, and choose your responsive layout. You can then lay out the content for your site however it makes sense using the Panels In-Place editor.
10. To see the admin area where these layouts/breakpoints/grids are defined, go to Structure > Panels > Layouts. Here is an admin page where you can find tabs for Breakpoints, Grids, and Regions.
11. Breakpoints and Regions are both standard Drupal admin pages with a table and then edit fields that take you into a long form asking for all the settings.
12. Grids are also that, but include a preview to the right that shows in a visual way what the grid will look like when it's saved.