Last week, I examined the recently released Adobe Edge Reflow tool itself. I thought it might be worthwhile to examine the generated code. For reference purposes, the file I created last week is the one I plan to examine in this current weblog post. As mentioned last week, these generated files are intended to only work in the Chrome browser. If you examine the file using any other browser, you will receive a message that the file needs to be viewed in Chrome. So, let’s take a look (keeping in mind that this is a very early version) … First, I tested to determine whether the HTML code would validate. It doesn’t. Yes, it is HTML5 (with the appropriate DOCTYPE. However, there is no <title> element (and as far as I can determine no way to add one within Edge Reflow. I would expect that there would be a File > Properties panel at some point which would allow one to include such information. Additionally, there does not seem to be any way to add alternate text to the images included. I hope this will be added in a future release.
Next, I looked at the CSS code. I do understand that the CSS-3 validation is also experimental (as is the HTML5 validation). A total of 19 errors were identified.
Ok, so the code will not pass validation. It is a first release and only works in the Chrome browser.
That being said, the code is a good starting point for those who wish to learn more about responsive design techniques. Some of the CSS is the boilerplate.css file (from HTML5 boilerplate). The reflow.css file is the main file which is generated for your Edge Reflow page. Let’s examine a bit of the generated code from this file. In future releases, I hope that additional comments are also included (to help those just learning).
In the HTML, we see that the page can not be resized by pinch and zoom on a touch device.
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
At the top of reflow.css is the code for the container element.
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 90%;
}
This is pretty standard and centers the primaryContainer class on the web page. Most of the remaining items are set as unique identifiers. As an example, I provide #box1 and #text1 CSS below.
#box1 {
float: left;
height: 600px;
margin-left: 0px;
margin-top: 0px;
clear: none;
width: 100%;
min-width: 0px;
background-color: rgba(0, 147, 255, 0.605469);
}
#text1 {
float: left;
font-size: 2em;
color: rgb(255, 255, 255);
width: 100%;
height: auto;
text-align: center;
font-weight: 700;
line-height: 1em;
word-wrap: break-word;
margin-left: 5px;
margin-top: -8px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: salsa;
text-shadow: rgb(0, 0, 0) 1px 2px 2px;
}
As you note above, the code is fairly standard. Colors are being set as rgb and rgba is one item that jumps out. Since I selected the salsa font family, that is also included. I highlighted these items in bold red above.
In the HTML, the following line of code is used to obtain the actual font:
<script src="https://use.edgefonts.net/salsa.js"></script>
If we scroll a bit further in the code, one will see that as with responsive design best practices, width values are being set to a very high level of precision (which a browser will understand). Note these below (also highlighted in bold red).
#image3 {
float: left;
width: auto;
max-width: 96.1273566464649%;
height: auto;
margin-left: 3.923583984375%;
margin-top: 0px;
clear: none;
color: rgb(0, 0, 0);
}
#text3 {
float: left;
font-size: 2em;
color: rgb(255, 255, 255);
width: 98.67880794701986%;
height: auto;
text-align: center;
font-weight: 400;
line-height: 1em;
word-wrap: break-word;
margin-left: 0.6600454974648179%;
margin-top: 14.449996948242188px;
clear: both;
min-height: 0px;
min-width: 0px;
font-family: salsa;
font-style: italic;
}
If we scroll further down, we encounter the actual media queries. These are fairly extensive. Keep in mind that the number of columns set in Edge Reflow can be changed. I included only the smallest (max-wodth 300 px) to show some of the included items.
@media only screen and (max-width: 300px), only screen and (max-width: 300px), only screen and (max-width: 300px) {
#grid .grid-4, #grid .grid-5, #grid .grid-6, #grid .grid-7, #grid .grid-8, #grid .grid-9, #grid .grid-10, #grid .grid-11, #grid .grid-12, #grid .grid-13, #grid .grid-14, #grid .grid-15 {
display: none;
visibility: hidden;
}
#grid .grid-0, #grid .grid-1, #grid .grid-2, #grid .grid-3 {
display: block;
visibility: visible;
}
#grid .column.grid-0 {
margin-left: 0%;
}
#grid .gutter.grid-1 {
margin-left: 23.200000000000003%;
}
#grid .column.grid-1 {
margin-left: 25.6%;
}
#grid .gutter.grid-2 {
margin-left: 48.800000000000004%;
}
#grid .column.grid-2 {
margin-left: 51.2%;
}
#grid .gutter.grid-3 {
margin-left: 74.4%;
}
#grid .column.grid-3 {
margin-left: 76.80000000000001%;
}
#grid .column {
width: 23.200000000000003%;
}
#text1 {
float: left;
color: rgb(255, 255, 255);
height: auto;
text-align: center;
line-height: 1em;
word-wrap: break-word;
margin-left: 5px;
margin-top: 5px;
clear: none;
min-height: 0px;
min-width: 0.5em;
text-shadow: rgb(0, 0, 0) 1px 2px 2px;
}
#text2 {
float: left;
font-size: 1em;
height: auto;
text-align: left;
font-weight: 400;
line-height: 1em;
word-wrap: break-word;
clear: both;
min-height: 0px;
min-width: 0.5em;
margin-top: 50px;
margin-left: 2.0018587191732666%;
}
#box2 {
visibility: hidden;
}
#box3 {
visibility: hidden;
}
#box4 {
visibility: hidden;
}
}
If you examine the code above, you see the various grids are being used to control visibility. Gutters and spacing is fairly typical. Since I set the visibility of the images to none, the identifiers #box1, #box2, and #box3 are set to visibility of hidden. It would be helpful to have some control over the names (I hope this happens in a future release). For example, what exactly is #grid .column.grid-2 referencing? This is where Chrome developer tools would come in handy.
In the HTML, because I grouped items (images and text), they are arranged as follows:
<div id='box2' class='clearfix'> <img id='image1' src='img/Longsat.png' class='image' /> <p id='text3'> Longsat </p> </div>
As you see, images are stored in the img folder. As far as I can tell you can not control this location in the tool itself. If you view the source code, you will see that the actual HTML is fairly typical (with divisions being used throughout). I did not see any of the new HTML5 elements (such as <footer>, <section>, or <aside>). This means the HTML code should be fairly easy for students to understand.
Overall, I find the code generated by the first version of this tool a good starting point. I would think that it would lead to a number of class discussions about the approach being taken to display the elements and the use of media queries to handle the various screen sizes.
I am curious what our thoughts are concerning the code generated by Adobe Edge Reflow. I look forward to them (please understand that I must approve them before they will appear).
Loading ...
