Presenting on the Ionic Framework

ionic-logo

 

I will speaking at the next North County JS Monthly Meeting on the Ionic Framework! What is the Ionic Framework? The Ionic Framework combines Google’s AngularJS with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android. In this talk I will explore Ionic, show how to install it, and finally build a quick and dirty app and deploy it to both iOS and Android.

When: Tuesday, May 26, 2015 @ 7:00 PM
Where: WalmartLabs | 1530 Faraday Avenue, Carlsbad, CA

Centering Gallery Elements

Recently, I was rebuilding one of my websites to be responsive. It is important to take advantage of the capabilities of modern browsers and be responsive, to support the growing use of the site on mobile devices. One portion of the design was a set of image gallery pages. These pages are pretty straight-forward, up to 5 columns of photos per row centered within the width of the page. As the window width reduces, the number of columns reduces. Again, nothing out of the ordinary with this design.

figure1

Block version of the design

 

I began by centering the containing div by setting the CSS properties of margin-left and the margin-right values to “auto”. That positioned the containing div correctly and it responded as expected as the browser width was changed. However, as the width of the window reduced, the thumbnails would begin to start to flow down to the next row, but they would display centered within the containing div. Not exactly the design I was looking for.

Centered elements

Centered elements

I applied a float:left to the thumbnails, and my centering last row was fixed! However, it introduced a new problem–the thumbnails no longer appeared to be centered as a group within the page. Adding the float to the thumbnails introduced extra spacing between the last column and the right boundary of the containing div.

Highlighting the margin right issue

Highlighting the margin right issue

I knew that had to be solved, so I began looking at many of my favorite tutorial sites, and found nothing. Lots of great samples of gallery pages, but all using the full width of browser in their samples or the thumbnail sizes would adapt to their widths. Nothing seemed to fit my design.

Next, I decided to look at using Flexbox. I had made the choice to only support “modern” browsers, so I knew that I did not need to worry too much about compatibility issues. But the same issues remained as I experimented with the various flex layout options; the last row items would be centered, or the gap on the right existed. Back to the drawing board!

Then I got to thinking about how the layout was computed. Each thumbnail would take the same fixed amount of space. Each would position itself to the left due to setting the float property to left. If the thumbnail did not have enough space within the width of the container, it would move to the next row. Float 101, right? But how did it know the space it had? I only defined the containing div to have a max-width and to center itself, and the width would vary based on the width of the window. It then struck me that if the width of the containing div matched the number of allowable columns, then there would not be extra space along the right.

Eureka!

If I can set the containing div to match my column widths, that container will still be properly centered. So I calculated the computed widths for 2,3,4, and 5 columns of thumbnails. So, when the browser’s width reaches specific widths, the containing div’s width is fixed to match the allowable number of columns. With a fixed width instead of a dynamic width, it can be properly centered on the page. Design problem solved!
The resulting CSS looks like this

<style> 
 #photoMenu {
   margin-left: auto;
   margin-right: auto;
   height: auto;
   min-height: 220px;
 }
 
 .thumbnail {
   position: relative;
   border: 5px solid #ddd;
   float: left;
   margin: 20px;
   width: 160px;
 }
 
 .thumbnail img {
  max-width: 100%;
 }
 
 .thumbnail h3 {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   margin: 0;
   text-align: center;
   color: white;
   font: bold 1em/1.5em Verdana, Sans-Serif;
   background: rgb(0, 0, 0);
 }
 
 @media (min-width: 315px) {
   #photoMenu {
     background-color:darkred;
     width: 210px;
   }
 }
 
 @media (min-width: 525px) {
   #photoMenu {
     background-color: darkseagreen;
     width: 420px;
   }
 }
 
 @media (min-width: 735px) {
   #photoMenu {
     background-color: rebeccapurple;
     width: 630px;
   }
 }
 
 @media (min-width: 945px) {
   #photoMenu {
     background-color: bisque;
     width: 840px;
   }
 }
 
 @media (min-width: 1155px) {
   #photoMenu {
     background-color: aqua;
     width: 1050px;
   }
 }
 </style>

For each of the media query breakpoints, I added a background color just to highlight it. Here is what the HTML looks like:

<div id="photoMenu">
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
  <div class="thumbnail">
    <img src="thumbnail.png" alt="">
    <h3>Title</h3>
  </div>
</div>

You can see the completed sample here.

Little design…

With the upcoming 70th anniversary of the dawn of the atomic age, I am refreshing several of my websites on the subject. The first site I am working on is Trinity Remembered. The new design is now responsive. The images are much larger (and more of them). But one particular page was not quite right. All the other ‘menu’ screens had visual elements, while this one just had the list of available documents. So I spent some time fiddling with it. I tried adding icons before each document to see if that could solve. But in the end, it was as simple as increasing the indents of the sections and adding a thin gray rule under each sub-section was enough. This gave the eye enough clues of how to parse the information without being overwhelmed. Just thought I would share a tiny bit of my design process.

TR_docs_before

TR_docs_after

Making Things Move!

ocmma-logo

On Tuesday, April 21st, I will be leading a hands on session on animating with CSS for the Orange County Multimedia Association. Although our phones and tablets may not be able to run Adobe Flash-based animations, the mobile web is far from static! This presentation is going to explore the use of CSS-based animations as a way to bring motion back into your web design.

We are going to explore using CSS to bring your web-based projects to life. I am also going to demonstrate some additional solutions that you can explore to help bring the web to life!

Details here: http://www.ocmma.org/

OnsenUI code hinting for Brackets

onsenuiBrackets_small

After releasing a code hinting module for the Ionic Framework for Brackets, several people asked if I could do one for the OnsenUI framework as well. I have not spent that much time using it, so I was less familiar with it. But the documentation was well written, so I took a stab at developing it…so here it is: onsenuibrackets.com

To install the extension simply:

  1. Install Brackets 1.0 or later.
  2. In Brackets, click the menu item File > Extension Manager…
  3. Go to the “Available” tab of the dialog that appears.
  4. Type “onsen code hinter” in the search box.
  5. Click the “Install” button in the search result for Onsen Code Hinter.
  6. Let me know if you have any issues or comments. Happy coding!

Note: You can only have one code hinter active at a time in Brackets. I am trying to figure out how to resolve that issue.

Let me know if you have any issues or comments. Happy coding!

Prototyping with Bootstrap workshop at UXPA 2015

logo

I am excited to announce that I will be giving a workshop on Monday evening at the upcoming UXPA conference entitled: “Rapid HTML prototyping with Bootstrap”. Registration for the conference is not open yet, but there are only 10 slots available. I am really looking forward to leading this workshop. Hope to see you there!

Details at: http://uxpa2015.org/

Ionic Framework Code Hinting in Brackets

ionicBrackets

Recently I have been doing more mobile development with the Ionic Framework as my ui framework of choice. Developing with Ionic has been a lot of fun, but since it is based in part on AngularJS, it leverages a variety of custom directives. So, I found myself keep the docs open in a separate browser window while I was coding. Since I had written a code hinting module for jQuery Mobile, I decided to do the same for Ionic!

data

Note: This extension is only does code hinting. There are several other extensions that provide access to the Ionic CLI.

To install the extension simply:

  1. Install Brackets 1.0 or later.
  2. In Brackets, click the menu item File > Extension Manager…
  3. Go to the “Available” tab of the dialog that appears.
  4. Type “ionic code hinter” in the search box.
  5. Click the “Install” button in the search result for Ionic Code Hinter.

Let me know if you have any issues or comments. Happy coding!