Using Edge Reflow to play with CSS regions

Kids spend most of their awake hours just playing. This helps them to understand the world and figure out how things work. In fact, here is a picture of my son playing with paint and learning about colors.

Image

With Edge Reflow’s latest public release, we are giving you the opportunity to play, learn, and use an emerging css feature,  CSS Regions. CSS Regions will allow your content to flow through different containers on your web site. This enables you to build more magazine style layouts. As of this month, CSS regions are supported in Safari in iOS7. You can also view CSS Regions in Chrome by enabling the experimental WebKit features flag.

Image

Edge Reflow is the first tool that will allow you to see CSS regions in action without writing any code. Then, after drawing a few regions, you can view the HTML/CSS output to see how the magic happened.

Let’s get started. The first thing you will need is Edge Reflow CC which you can download from here.

I will take you through a simple CSS region example and I hope you will continue to play with the feature and use it in the future.

Step #1: Turn on CSS Regions support in Reflow by going to the menu item View -> Shiny Web Features

Image

This will bring up a dialog box describing some new CSS features including CSS filters and regions which are not supported in all browsers. You will need to ensure that CSS Regions is on. Press OK and dismiss the dialog.

Step #2: Draw a text element on the canvas. Copy and Paste a lot of text in it. I’ve copied my text from “The Atlantic” which always promises a good, but, long read. 

Step #3: Right-click on the text element and choose the menu item “Create Region Container”.

Image

Step #4 In the flow container, look for the + icon on the bottom right. Click on this and then draw out other flow containers.

Play with resizing the various containers and notice that all of your text content will flow from one of these containers to another. Also play with the size of your canvas by dragging the canvas handle right and left.

Image

Note, when the + icon is red, this means that there is more content overflowing the current container.

Step #5: Edit your content.

If you want to edit the original content that you are having flow through the various flow containers, double click on any of the containers. From this “content editing mode”, you can add images, more text, add boxes, and change styles as you sit fit. All of the content will flow through the containers that your drew previous.

Image

Step #6: Exit content editing mode by clicking on the left arrow in the status bar. (or press ESC, or double click on the checkered portion of the editing area)

Step #7: See the CSS code written out for the container that you drew.

To do this, ensure that the container is selected. Then, click the <> icon in the bottom status bar.

Image

Step #8 Preview in Chrome or Safari.

From Reflow, you can preview your design in the browser. This can be done from the View menu. If you don’t have the correct version of Safari or Chrome, you will get a warning.

Step #9 View all the HTML and CSS code.

In step #8, you viewed the design in the browser, so, there must be HTML and CSS, right? Of course there is. You can find the CSS and HTML that Edge Reflow creates for your design inside the assets directory of your project.

Image

Regions have the opportunity to really change the way web sites lay out their content. What I’ve built above is not beautiful, but, its just a sample of how your content can flow through any part of your page you choose.

To download the simple Reflow project I talked about above, you can find it here.

4 responses

  1. Glad to see you posting again! 🙂

  2. Nice Post, It’s really awesome feature, i also can see this changing especially how we design our blogs.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: