I’ve created a coding game called Flexbox Froggy to help you brush up on flexbox. If you haven’t heard yet, flexbox is a powerful new CSS module for positioning that’s available in browsers today, and that will debut in the next major update to Bootstrap. So you’ll want to get familiar with it asap.
See if you can beat Flexbox Froggy! And for an extra challenge, try its spiritual sequel created by Channing Allen, Flexbox Defense.
If you’re using the Bootswatch API, please update your request to https://bootswatch.com/api/3.json. The old endpoint will cease to exist on December 16, 2015.
Up to this point, the API has been made available through AppFog. However, they recently announced that they’ll be retiring the free tier this December. Big thanks to AppFog for the service they provided.
The new URL is live, and as a bonus, available via https. More information at http://bootswatch.com/help/#api.
FontCDN is a new tool for those of us who love Google Fonts as a service, but want a faster way to grab the code we need. We built FontCDN so you can easily search their 700+ web fonts and quickly grab any font’s HTML and CSS.
For more on the motivations behind FontCDN, check out the post A Better Way to Search Google Fonts. If you’re interested in figuring out which platforms you should support when building tools for other web developers, check out the Bootswatch and GlyphSearch data presented in the post Developing for Web Developers.
FontCDN is available at fontcdn.org.
On any theme page, you can now click “Open Sandbox” to open a JSFiddle page with that theme and any dependencies pre-loaded.
Coupled with our snippets feature and Bootsnipp, it’s now easier than ever to experiment with the themes.
Paper brings the material design’s principles of transformation and movement to Bootstrap. Best of all, Paper’s animations are implemented in pure CSS, meaning no custom markup or JS is needed. In case you missed them, here’s a quick tour of these effects in action.
Buttons
When hovering over a button, a shadow edges in. On click, the shadow fills the button.
Input Fields
Input fields are marked by a bottom border, which transitions to a wider, more colorful border when focused.
Checkboxes
Paper makes use of custom checkboxes that transform in shape and color when selected.
Radio Buttons
Radio buttons are much the same.
Progress Bars
Not an animation, but progress bars in Paper have contextual backgrounds.
Floating Labels
We weren’t able to implement floating labels in pure CSS, but you only need to add a bit of code to achieve this effect. Check out the source.
A big thanks to Ryan Walters for his awesome work on the checkboxes and radio buttons, and sharing his code for floating labels.
With the release of Bootstrap 3.3.2, Bootswatch is not far behind. You can check out the latest Bootstrap changes here.
In addition, a number of Bootswatch issues have been addressed, including:
- #358: Select inputs in Paper are missing arrows in Chrome
- #375: Paper: Input button does not render properly on iOS 8
- #380: Can we move the bootstrap-sass-official to devDependencies?
- #381: Match also “contenteditable” with class “form-control”
- #383: Paper: select input-sm
- #388: Padding issue with .navbar-brand
Thanks to the bug reporters and contributors!
Bootswatch is supporting SASS! With Bootstrap offering an official SASS version for some time now, it’s only right Bootswatch did the same. You can now download _variables.scss and _bootswatch.scss, in addition to the usual CSS and LESS options.
Also available is a new grunt task, convert_less, that can be used to convert all LESS files in your repo to SASS.
Credit goes to Corey Sewell, who’s generously submitted a pull request with the SASS source and ensured that LESS to SASS conversion work as smoothly as possible.
We’re giving away Bootswatch merchandise this month! Three prize packs are up for grabs that include a t-shirt and stickers that feature the new logo.
There are two easy ways to enter the giveaway:
- Follow @bootswatch on Twitter.
- Tweet about Bootswatch
You’re welcome to do both to double your chances. Winners will be picked at the end of September.
T-shirts and stickers are also available for purchase, if you’d like to show your love for the project. Several t-shirt designs are available based on themes including Cyborg, Flatly, and Slate (pictured above). Head over to the Support page for more details.
Update
Winners have been chosen and contacted via Twitter. Thanks to all for participating!
Two new themes have been added to the Bootswatch library: Paper and Sandstone.
Paper takes inspiration from Google's material design manifesto. Features include animated form inputs and tabs, as well as progress bars with matching background colors. No button click animations yet, but if you’re up to the task of recreating them with CSS only, please contribute.
Sandstone offers a warmer palette of tans, browns, and greens in this cold world of blues and grays.
But Bootswatch giveth, and Bootswatch taketh away — Amelia has been deprecated. For now, you can still access it directly here and through the API, but it will be removed in the next update.
Bootswatch is giving away five copies of Extending Bootstrap by Christoffer Niska.
Extending Bootstrap covers more advanced ground compared to Packt’s previous offering, Twitter Bootstrap Web Development How-To. Topics include when and how to apply Bootstrap themes, make custom builds using LESS and Grunt, and create custom JavaScript plugins. It touches on some similar topics as my Smashing Magazine article on customizing Bootstrap, but adds highly guided walkthroughs and examples.
To find out more about the book, visit the publisher site or Amazon.
Enter to Win
Five lucky entrants will win an ebook copy of Extending Bootstrap. Enter to win using the form below by Friday, June 27.
Winners will be selected at random. Please do not submit multiple entries. Your email address will be used for this contest and nothing else.
Don’t forget to tell your friends and colleagues about this giveaway, and subscribe by RSS or email to get future updates. Good luck!
Update
The giveaway has ended and the winners will be contacted by email.