I made a little update to Brackets Reflow Cleaner. This is the Brackets extension that can extract information out of Reflow asset files and allow you to speed up developing designs created in Reflow.
Here’s an example:
I’ve added support for extracting gradient information in both colors, and its own location.
Check out my video to see what Brackets Reflow Cleaner can do.
Disclaimer: Reflow isn’t intended to be used the way I will layout, and this isn’t an official Adobe thing. This is just me fooling around with some ideas.
As a follow up to my post about what you do after you work with Adobe Edge Reflow, I’ve been exploring the source code Reflow creates looking to see what I can do with it. I’ve also been experimenting with Brackets to see if I could use that to deliver some workflow here. My experiments have yielded the unoriginally named “Brackets Reflow Cleaner.” It does what it sounds like, it cleans the output you generate with Reflow in Brackets into something approaching that which you would use in a hand coded HTML file. How does it work?
In Reflow, I use the ability to label parts of my design to indicate what I want things to be.
I label things with element names to output them as elements.
I add a period to the front of a string to mark it as a class.
From all this I can create an outline that looks like my eventual HTML should look.
Now Reflow doesn’t really care about all this as you can see by the HTML it outputs. It turns them into id’s.
However, I have the HTML. I can run processes on it to convert it to something else.
Now the CSS is a little different. It is very verbose, full of ids, and crazy percentages. I’m not sure what to do with it. But I can analyze it and maybe pull out some interesting details from it.
Color
Font
Breakpoints
I can even use the intelligence on the classes I setup in the Reflow file to analyze classes to figure out what was the same about them and create common classes for them.
Here’s a video with a complete demonstration of it.
I wrapped all of this up in a Brackets Extension so that if you wanted to play with it, you could. It’s Open Source and available on github.
This is an experiment and a starting place. I’d love to hear from anybody that give this a try. Is it usable? Does it help you do anything. Is this a crazy waste of time? All opinions welcome.
There’s bound to be a lot of excitement from my colleagues today about the awesome addition of CSS Regions to Mobile Safari and support in Adobe Edge Reflow and Adobe Edge Code. I share it, but I want to focus on the fact that you can start working with these features today in Reflow. For the longest time, I’ve been talking to audiences about both our new tools, and our efforts with the W3C, but to be able to see them come together like this is awesome.
The big question for regions is “how would I actually use it” and fooling around with it in Reflow allows you to answer that for yourself. Where would you use it? Try it and see. My answer: you use it where you need reflowable content that keeps a layout you want despite not being pixel stable. Let me show with this example.
Here is a screenshot of an article layout in Adobe Edge Reflow. You can see I’ve laid the article out in several columns around a picture.
The great thing about Regions is that those columns remain stable despite the contracting screen (as you can see in following screenshot). I don’t have to worry about how the text will layout cause I’ve given it general instructions on how to do it.
But eventually that layout won’t work, those three columns will get too tight. No worries. Reflow allows me to make responsive decisions that really make my content layout correctly, but still allow me some variety in layout.
And finally when the design just won’t work anymore, I linearize the content, and I have an article that is readable everywhere, but has magazine like layout where it make sense.
Keep in mind that right now you’re going to be limited in using these features in Canary and Mobile Safari. But I think our hope is that the more people that make compelling layouts with these technologies, the more browser vendors will see that this is tech that they want to include. So check it out on the Adobe Web Platform Blog, and create some awesome layout in HTML.
Update:
If you want to fool around with the Reflow file I used in this example, here you go.
From time to time, I show off Brackets, the Open Source HTML/JavaScript/CSS editor Adobe has been working on for the past year and half. It’s a great bit of work, and it looks great. However, a lot of people point out that there are a lot of other code editors that can be used on HTML out there. Which is is true – so let me show you a compelling reason to use Brackets: Theseus.
Theseus is a research project that brings debugging to JavaScript in the editor. Not just debugging, but crazy real-time debugging that’s easy to understand and jump right into. Check out the explanation of Theseus over at the Brackets team blog. And then check out the GitHub repo. Seriously, if you work with JavaScript, do it now – you won’t regret it.
Also, just as an aside, it turns out that Brackets is up for a Readers’ Choice Award from Linux Journal. If you’re a fan please give it your support by voting for it.
tpryan.blog 