Fri, February 8, 2013 Joshua Gatcke

HTML KickStart is Responsive

HTML KickStart is now fully responsive. Featuring a Responsive and flexible grid (completely optional) with 4 breakpoints: desktop, tablet, tablet small, and phone. Go ahead and try it out at http://www.99lime.com and give your browser a resize. 

New Features:

  • Responsive Grid .grid
  • Flexible Responsive Grid .grid.flex
  • New Responsive Grid Helper Classes
  • .show-desktop
  • .hide-desktop
  • .show-tablet
  • .hide-tablet
  • .show-phone
  • .hide-phone
  • .column for global column styling
  • New Slideshow fully responsive and touch enabled (using the awesome BXSlider)
  • New Menus fully responsive
  • Responsive Images
  • Responsive Videos (Youtube & Vimeo)
  • Updated Documentation
  • Updated blank.html, Elements.html, & Examples.html in the Download
  • Optimized smaller file size and faster page loads
  • Smaller CSS & JS files
  • Now uses box-sizing: Border-box by default globally
  • 99lime.com has been updated. 

Changes

In an effort to clear the way for my upcoming updates, I have made a huge amount of small changes to the CSS and JS of HTML KickStart. I have also removed some seldom-used features in preparation for some new UI elements that I will be adding soon. 

Removed Features

  • Media Elements
  • Video Placeholder
  • Map Placeholder
  • Calendar Placeholder
  • Form Elements
  • select.fancy
  • select multiple.fancy
  • Image Styles 1, 2, & 3
  • ScrollTo and LocalScroll

Goodbye IE 7, Hello Future

One of the big considerations holding me back from going responsive was support for Internet Explorer 7. With under 3% marketshare, it’s time to move forward. Removing IE 7 makes way for a cleaner, more optimized, easier to use HTML KickStart and also sets the stage for some very exciting mobile, tablet, and desktop UI elements that are coming very soon. In the next update, you will see all reference to IE 7 removed from HTML KickStart.

Note: if you really rely on IE 7 support, take a look at https://github.com/Schepp/box-sizing-polyfill It works great. Also see: HTML5 Cross Browser Polyfills

Border-box & Layout

With this new release I am taking full advantage of border-box sizing (Learn about box-sizing). This means that you can add padding and borders to elements and they will maintain their defined width. For example, a <div> with a width of 200px and padding of 20px will remain 200px wide instead of growing to 240px. Why is this important? Because now you can add your styling, padding and borders directly to your columns in HTML KickStart. No more .inner div inside every column. This greatly increases rendering performance and makes styling and page layout easier. Trust me, if you are not already using border-box, you are going to be extremely pleased. 

What’s Coming: New UI Elements & Design

HTML KickStart will be getting a style refresh along with some very exciting UI Elements. The Menu will be getting an overhaul and better mobile options, Responsive Tabs, and easier style & color customizations. This is gonna be hot! 

Get in on the Action!

Now is your chance to let me know what you would really like to see in the next release. I have a list of new UI elements that I will be adding in the next release of HTML KickStart and I would love to include something that would really make your life awesome. Send me an email at joshua@99lime.com with your suggestions and you could get your feature included in the next update. 

Say Hi. Hola. What’s up.

Take the new responsive features for a ride and kick the tires. Break it. Change it. Improve it. And let me know what’s working and what’s not. I love to hear from you guys and your feedback keeps me excited & passionate about HTML KickStart – So say hi. Email me directly at joshua@99lime.com, or on twitter @htmlkickstart

You guys Rock. Happy coding!

- Joshua

99Lime Announcements & Releases.