UPDATE (6/5): We'll be raffling off a FREE PHPStorm IDE license!
UPDATE (6/3): Bring a friend - we will be having a feast! (See Bottom)
This month John Bertucci presents Bootstrap 101...
As PHP Developers, we don’t always have the time or skills to create beautiful UI designs. Some projects, like an API service, might not even have a front‐end design, but needs a UI to demo the API to a client or boss.
Bootstrap to the rescue! Bootstrap is a CSS framework that comes with some nice out‐of‐the box designs and layouts (including Responsive!) for all kinds of common UI elements such as: dropdown menus, buttons, navigations, breadcrumbs and more. You just need fairly standard structured HTML element and a Bootstrap CSS class and watch the magic work.
In this presentation, we’ll cover a quick crash‐course in web design, talking about: grid layout, color, and other real basic concepts. No, you won’t walk away with a design certificate. Yes, I hope you’ll at least start to see more into design (if you don’t already).
Then, we’ll jump into Bootstrap and some of its components including how its 12‐column grid, called “Scaffolding”, and how to customize Bootstrap files using LESS. We’ll also look at how we turn the static grid into a responsive grid so your design can target variable screen sizes such as tablets and smartphones.
The goal of this talk is to introduce fellow PHP developers to Bootstrap and how it can help with making quick reasonable front‐end web interfaces with a little bit of design knowledge. If you have already used Bootstrap, this presentation won’t be anything new. If you’re new to Bootstrap, you will hopefully learn how Bootstrap can improve or speed‐up your front‐end development and design.
UPDATE : This month's sponsor is Strike IT. Conor Duffy has arranged for a feast! Fried Chicken, Beef Tips, Baked Cod, California Vegetables, Roasted Potatoes, Rolls, Salad, the works! Come hungry, bring a friend!
June 12, 2013
Gonna be running what I learned by my boss and senior web developer at work tomorrow.
Would be a major time saver if we can manage to integrate it into our new e-commerce platforms especially in regards to responsive design.
June 12, 2013
Nice job John. Great stuff for developers who don't necessarily love to spend a ton of time on design.
June 12, 2013
Excellent. If I can use half of what I was exposed to, it will be an excellent investment of time. The food the caterer provided was also excellent, by the way.
June 12, 2013
Thanks all for coming! I'd love to hear feedback to help me tweek this presentation and I'll look to post my slides online. Also, to answer David's question about responsive columns, at 767px width all columns become unfloated with 100% width by standard styles. So, if you have 12 "spans" in a row (12 columns), if you shrink the page to 767px width, you will get a single column with 12 rows. Thanks for sharing the DivShot link Chris!
1 · June 11, 2013
Yeah, good point! I think I learned more about design theory than bootstrap! The tech stuff I would have learned on my own, but not design. ;-)
June 12, 2013
Great presentation. People should also check out http://www.divshot.com/ - It is a great drag and drop Bootstrap interface builder. It doesn't have everything, but you can also add code using the code editor for anything you want. It even allows you to customize the CSS and JS. It can definitely jumpstart any web project.
June 11, 2013
I had to leave before the presentation was finished, but it was very tantelizing. :-) I intend to learn more about bootstrap after having gotten this short intro.
June 11, 2013
Help support your Meetup
Chip in
PHPStorm Licenses
Clever Hacks. Creative Ideas. Innovative Solutions.
438 Members
1,087 practitioners
223 Media Communicators
867 Web Professionals
88 Members
40 Laravel Ninjas
We just grab a coffee and speak French. Some people have been coming every week for months... it creates a kind of warmth to the group.
— Rafaël, started French Conversation Group
Meetup members, Log in
By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy
Great Job by John! Great Topic!