Category Archives: bootstrap

Yii 2 Mobile First Design

One of the amazing things I love about Yii 2 is that it delivers a mobile-first, device scaling interface right out of the box. This is done via Twitter Bootstrap, which is the default implementation.

I never really knew how powerful this was until I worked on my template that I describe in my book, Yii 2 For Beginners.

I’ve never really had any talent for frontend design, and always felt that programmers were being punished for having too much fun coding by having to deal with frontend css, jquery, etc. Life would be too perfect if not for frontend development. I’m sure you can relate to that.

However, with the adoption of Twitter Bootstrap, that is starting to change. And maybe I should acknowledge just how awesome that frontend framework really is, since it does so much.

For example, you know those really cool top pins, where the top nav is pinned to the top of the page? That is out-of-the-box standard in Yii 2 courtesy of bootstrap. Another thing about it that is really cool is that when you size down the browser, it automatically detects the size of the browser and compensates. You don’t have to write a mobile version, it’s already there for you, how cool is that?

Plus Yii 2 has really cool bootstrap widgets designed to make it easy to integrate your view code with Bootstrap. I think you’ll be amazed at how much you get out-of-the-box.

I just did a quick tutorial on the dropdown nav and dropdown menu, so you can find that just by clicking the link. You’ll see how easy it is to implement.

In my book, I don’t focus too much on frontend, but we do look at some nice widgets, such as a pretty JUI DatePicker, Collapse, Alert, and more. It’s so simple when you see it in action.

Speaking of my book, please let me mention that I recently got my first book review from Vegibit:

“Another great resource is a great book by Bill Keck who maintains a blog about Yii. You can get the book at leanpub right here. It’s a great resource because it takes the perspective of someone who is new to the framework and is diving in with a self learning crash course in getting things working with Yii. This real world approach is valuable in learning the key concepts when the rubber hits the road so to speak.”

Thank you Vegibit for the kind words. When you get a chance, check them out, they are a good source for tutorials on Yii 2.

With the whole world moving toward mobile-first development, you can be confident that when you are developing on Yii 2, you are using a framework that gets it. The framework itself will provide most of what you need, right on install, and then after that, it’s easy to import extensions from Packagist.org.

I take a certain amount of pride in seeing the browser scale perfectly with my UI, even in reality, it wasn’t me, it was bootstrap. It’s just so cool!

If you would like more info on Bootstrap itself, just visit Get Bootstrap.

In a future tutorial, I’m going to write about how to configure your Yii 2 application to use a CDN for Bootstrap, jquery, and font-awesome, the dynamic trio of libraries that will make your UI sizzle. These libraries help take the drudgery out of frontend UI work and it makes development more fun, which is half the battle. Using a CDN will make them download faster and we all need that.

Feel free to add your comments to our blog and join the conversation. Thanks for your support!