A journey from Foundation CSS to Tailwind CSS

All of our frontend websites start with this base repository which can be viewed at https://base.wayne.edu/styleguide/childpage. It has evolved in many ways since its closed source version to the new public version 5. One thing has remained the same, the whole time is being dependent on the Foundation CSS framework.

We used Foundation when we first started exploring responsive design in 2012 for these reasons:

  • The grid was easy to use and understand
  • Fast scaffolding for wireframes
  • Included many Javascript packages out of the box that we found useful (accordion, offcanvas, sticky header)
  • Ongoing support of bug fixes and new major versions
  • The framework didn’t have an opinionated style like Bootstrap

Why did we move away from Foundation?

The biggest drive for us to switch to a different framework was how hard it was for us to upgrade from even minor versions of the framework. It’s not a knock on Foundation as we consider it a wonderful framework. The custom CSS/JS we wrote on top of everything played a large role in making the upgrade a difficult task. The slightest changes to their default CSS or javascript components made it extremely time-consuming for us to realign base to accommodate for those changes. A related issue is the cascading part of CSS. While it’s extremely useful, it’s also a large hindrance to the maintenance of a project long term. Adam Wathan wrote a really good blog post explaining this very issue.

What did we move to?

Tailwind CSS. The concept of using a utility-based framework is having a class name that does one CSS property and value. You can think of it as doing inline styles on each element, but what makes it different is you control all the values of colors, sizes, widths, and heights in a single settings file. This creates more consistency, better naming conventions, and a pattern to your CSS names.

What it allowed us to change

Once we switched over to Tailwind CSS it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:

What are the stats for the childpage template?

File Base 4 Base 5
requests 14 9
load time webpagetest.org 1.481s 1.117s
css 18.1 KB 10.4 KB
javascript 27.9 KB 21.2 KB
html 6.4 KB 8.4 KB
total size 133 KB 82 KB

We managed to lower the overall size by a 38% reduction! The only file that slightly increased is the html which was to be expected since we introduced a lot of new classes.

We’re excited for the future of our base site project knowing we can easily swap out any packages now or upgrade them without affecting the entire site.

Updating a database display order with drag and drop in SQL

In many of our applications we support dragging and dropping datasets to change the order. We save this order in a database column that is an integer and is in sequential order.

There are many ways in javascript to handle drag and drop. I will show an example using jquery sortable. If you’d like to use something else there are three pieces of key information that need to be sent to the server:

  1. Current position
  2. Desired position
  3. User’s id

HTML list

Javascript sortable

Example data set for table todos

user_id display_order todo
2000 1 Take out garbage
2000 2 Clean house
2000 3 Do dishes
2000 4 Cut grass
2000 5 Change light bulb

Step #1 – Determine the position

Step #2 – Update the dragged item

Step #3 – Move the item down

Step #4 – Move the item up

Step #5 – Update the dragged item to the desired position

With this approach the server will do a total of three queries for every change to the display order no matter how many items are in the list. Examples typically tell you to iterate over every item to do an update query to set the new order. That approach results in total queries = total amount of items. This new approach is a significant improvement and has reduced a lot of our large data sets from 40+ queries down to three.

Meetup: Block__Element–Mag­ic: CSS Modularity for the Masses – March 16, 2016


CSS is hard, we all know that. There has to be a more effective way to facilitate the modularity and flexibility of our code.

When tasked with creating new components for a Web project and inheriting over 8,000 lines of code, where do you start?

When you are told to keep it modular as possible, what solutions do you have at your disposal? This is when you break into your bag-of-tricks with one of the many modular CSS architectures out there.

B.E.M. is a great method to use to keep code very flexible and modular from component to component, and page to page. Three benefits of using B.E.M. are:

  • Reusability of the code
  • Maintain code in small pieces rather than large blocks with excessive declarations and generic naming
  • Style naming. Be as specific as you want. Name the style according to where it is being applied and what it is being used for. Help other developers who inherit your code as well as your future self!


Chris DeMarsChris DeMars is an associate software developer for DTE Energy in the Detroit headquarters. He is an instructor and teacher assistant for the Ann Arbor and Detroit chapters of Girl Develop It.

Chris is also very passionate about coming up with solutions for enterprise applications, which include modular CSS architectures, performance, and promoting Web accessibility.


6:30 pm to 6:40 pm: Welcome
6:40 pm to 6:55 pm: Introductions
6:55 pm to 7:00 pm: Info about Grand Circus
7:00 pm to 7:40 pm: Presentation and Q & A
7:40 pm to 8:00 pm Networking

Venue and parking

Grand Circus is located in the Broderick Tower near Grand Circus in downtown Detroit. The entrance is on Woodward, through two gold-colored doors.

Once inside, go to the end of the hall, and take the elevator to the third floor. Look for signs when you get off the elevator.

Parking is available at the Detroit Opera House parking garage, located on Broadway. Parking is $10 (unless there’s a special event). There’s also street parking on Woodward and Washington Boulevard.

The Detroit Opera House parking garage is a short walk up Broadway and around the corner from the Grand Circus space. Here’s parking information from the Broderick Tower website (PDF).


Special thanks to our sponsor Grand Circus for offering venue space for our Refresh Detroit meetups!

The trouble with OS X LCD Font Smoothing and webkit

I recently spent sometime working on a responsive header using foundation 4 and was in the process of testing it on other machines around our office. I noticed on a co-workers machine that the fonts looked a lot different than on my machine. I was puzzled as to why this was occurring.

My browser vs. Co-workers

Screen Shot 2013-04-05 at 9.45.40 AM

Screen Shot 2013-04-05 at 9.46.10 AM

We are both using Mountain Lion and Chrome in this example. As you can see the fonts look thicker and bolder on my co-workers machine. I did some investigation and found an option under Mountain Lion’s general system preferences called “Use LCD font smoothing when available”. On my machine this was unchecked. It looks like on newer machines this is checked by default. If you uncheck this option and relaunch your browser (Chrome in this case) you’ll notice the thicker and bolder fonts go away.

Screen Shot 2013-04-05 at 9.56.10 AM

We wanted to find a solution to normalize this on the web because we preferred the way it looked without font smoothing enabled. We found that if you apply this to your websites it fixes the problem. Please note that this only works in webkit browsers. We have not found any other vendor prefixes that accomplish this.

body {
     -webkit-font-smoothing: antialiased;

How does software quality happen?

Have you ever wondered why most software you interact with is hard to use or isn’t updated regularly to fix bugs? It’s a fundamental problem of computer science programs, they have failed to teach us how to manage software projects. Learning and using complex algorithms is just one small part of the software development process. The larger, more complicated (and ultimate determinator) of a project’s success is managing the requirements, time, team and process.

The most complex human task

Writing software is one of the most complex human tasks according to Douglas Crockford. Writing software isn’t a linear process, it is so complex we still haven’t learned how to create quality software. Although this is an older talk, it’s the best explanation I’ve heard about why writing software is so complex and what we can do about it.

The software crisis

He explains why the early programmers were so concerned with the software crisis and why it’s still happening today. If you are part of any software development process or even if you just use software on a daily basis this talk can give you some insight about why you may have frustrations around it.

Quality is more than good programming

Source: http://www.yuiblog.com/blog/2007/05/16/video-crockford-quality/

A better “Return to top” experience

Sometimes long pages are unavoidable but adding pagination to certain content makes it more difficult to use. The types of pages I am talking about are FAQ’s, faculty lists, and course listings. It can often span up to twenty times the height of a standard browser.

Pagination sucks

Breaking this content up in to multiple does allow the visitor to see a fair amount of information on a single screen without scrolling. But if they want to explore more they have to take an action that isn’t natural to the Web and “page” through the content like a book. Book pages work great because they are natural, there are a lot of touch points where you can grab and make the transition back and forth easily. Pagination on the Web, though, is not so easy. Typically it involves very small numbers at the bottom of the content, a precise click on the next number, and waiting for a page to load.

“Back to top” is annoying

The solution most websites take is to put all the content on one page and at multiple places down the page add a link labeled “Back to Top”. This typically links to an anchor #top which is defined at the top of the page or content. This seems logical for the Web since scrolling is just a fingertip away, people often use the CMD+F to search page content and there is no reloading and waiting for the page.

But “Back to Top” still doesn’t get it right. The Web is used as a page of content to be consumed and to take a next step, ideally getting the visitor one step closer to their goal. “Back to Top” links introduce two obstacles to that goal. The first is clutter on the page that doesn’t relate to the content. The second is a link that unnaturally moves the user “backward” to where they came from.

The holy grail

We are not claiming to have invented this technique, just adopting it and embracing how more usable our pages are because of it. The technique is to omit the “Back to Top” links all together and force the user to scroll. Then use javascript to detect how far the visitor has scrolled and display a button (in a static location out of the content area) which scrolls the user back to the top of the page. It’s a technique that isn’t visible unless you see it in action. The video below shows how it works:

This solution solves the user experience issues introduced by pagination and the “Back to Top” links. It allows for all the content to be on a single page so the user can search and not have to reload and reorient themselves with each new set of content. It also doesn’t clutter the page with extra links that don’t bring the user closer to their next goal.

How it works

It progressively adds value to the page as the user scrolls down the page. The solution also introduces something else, a visual sign of what the action does. The default construct of a “link” is to move the visitor to another separate page, but in fact the “Back to Top” breaks that construct. The icon used to denote “scroll to top” visualizes exactly what the button will do once clicked, the user doesn’t have to guess or be surprised.

A little something extra

Lastly, a little something to pleasently surprise visitors is when they click to return to the top, the page doesn’t just jump up leaving the user to re-orient themselves with the page once again. It instead scrolls smoothly to the top passing by all the content they just viewed. Now at the top of the page again they just saw the journey they took down the page rewound and are at a familiar place with no need to re-orient themselves.

Some examples of it’s use:

Today@Wayne Chrome app available

We’re always on the hunt to find ways to connect more people to the great things happening on Wayne State’s campus. If you have been following this blog you know these initiatives are often thought of and executed completely by us.

Chrome app

Not everyone has, or wants to have, the Today@Wayne website set as their homepage, and that is completely understandable. But we wanted to make sure it is as easy as possible for people to get to it. What better way than to have a Chrome app that is displayed every time the user opens a new tab or window? This way they can visit the daily newsletter at their leisure without having it load automatically every single time.

If you are a Google Chrome user you know the power of the extensions and apps. Both are lightweight and don’t slow down the browser like Firefox.

Google Chrome has gotten a little bit of flack because a vast majority of their “apps” are simply redirects to websites. In our case we’re currently doing just that. This approach isn’t our long term goal but it will get us started.

Looking forward

Chrome has an amazing ability to render HTML5 and take advantage of every bit of the users processing power. You can see that clearly with the popular Angry Birds app. Over the next few weeks and months we will be expanding the functionality of our app to take advantage of the user’s environment. Extending the website to use local storage and media queries to take full advantage of the users screen size and offline processing.

Download the Chrome app at: http://go.wayne.edu/today-chrome

Preview early, preview often.

This is just a friendly reminder that we offer a “Preview” button in the CMS on purpose. Although we do our best to scrub the HTML in the editor and make it valid and the correct character set a few pages slip through the cracks. But as we discover them we change and make the CMS even better. This mainly happens when copy and pasting from Word, it is a long standing issue on the web.

The page above was actually published by us and it only hit the development server luckily. But it allowed us to detect a problem and fix it before it hit the campus community. It was a reminder to me to preview early and preview often. It will save you in the long run.

Tweaks to the global header and footer

Yesterday we made some changes to the global header. The header looks almost identical, all the changes were under the hood. I have been meaning to make these changes for some time now. Luckily I used this week’s independent study time to get it accomplished. More about that later.

From an on screen perspective the header is now 5px shorter and 960px wide (our new standard) instead of 900. The code was simplified to reduce space and be more descriptive. Last but not least it now works fully in all A-grade browsers and IE all the way back to 5.5. I have also outlined a few other benefits below.

Better Print Support

At some point the print style for the global header just simply disappeared. Not sure what happened but it was just gone. This newest update fixes that. The print header is now black and white with our wordmark and Aim Higher fully readable on top of each page. The top tab doesn’t print and the bottom border is where it is suppose to be.

The only thing that changed in the footer was the removal of the copyright policy link and no longer underlining Wayne State University.

Better Mobile Support

Something completely left out of the old header was support for mobile or “handheld” style rendering. It doesn’t do any mobile detection just yet but any device that does pick up the handheld style will now get a header like the one on the right above.

Using Opera’s small screen rendering you can see a simulation of how it looks on a mobile device. The old header (left) doesn’t accomodate for the small width and forces the user to scroll left/right. The new version (right) linearizes the page, makes the skip links visible and the tab links are now visible by scrolling down.

Fewer HTTP Requests

We reduced the number of HTTP requests that it takes to build the header from 10 to just 5. We did this by creating a sprite of all the images that make up the header. We did have to add two new “real” images though for the wordmark and aim higher to print in black and white. Having fewer HTTP requests will allow the header to load faster on devices with higher latency and makes rendering quite a bit faster. Yahoo has a great explanation about the importance of fewer HTTP requests. As you can see from the graphs above although we increased the file size size overall (just a little) the total rendering time was reduced by almost half.

More technical graphs with the comparison: old header | new header

Using a Sprite

Above is the sprite we used to create the header. A List Apart has a great article explaining sprites. This single image is used to create all the background and styled images that make up the header. It just needs to load and position it in the right spot and the browser does the rest of the work.

Skip to Navigation and Content

Recently testing our site with a screen reader we found our skip links were not functioning correctly. WebAIM had a great article about making the skip links available to people using keyboard navigation so we decided to give it a shot. Above you will see what any of our sites look like if you press the “Tab” key to navigate your way through the page. The “Skip to Navigation” link will come up first, then the “Skip to Content” will show. Basically when the links have :focus they become visible, otherwise they are hidden.

Legacy Code

We tried to support as many legacy situations as possible and fix any issues before hand. But unfortunately we came up with two situations after the fact that we could not account for. The first was users who replicated the main header code but hotlinked to our style sheet. These sites will see an odd shaped header till they update their code. The second is customized headers, some sites used our original code but with overrides in their local css to change the header style. These sites will all be broken till the individual site administrators update their code, there is nothing we can do about custom overrides.

Using the New Header/Footer

If we don’t handle your web site and you want to use the new header/footer you can right away. The code and instrcutions can be found at: http://wcs.wayne.edu/style/

Additional Issues

If you happen to see a site that is looking funky with the new header please take a screen shot and send it to wcs@wayne.edu and we’ll look into it.