addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1linklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

Bootstrap 101: Crash Course Design for Developers

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!

Join or login to comment.

  • A former member
    A former member

    Great Job by John! Great Topic!

    June 12, 2013

  • Jonathan S.

    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

  • Charlene W.

    Great presentation!

    June 12, 2013

  • Matthew A.

    Nice job John. Great stuff for developers who don't necessarily love to spend a ton of time on design.

    June 12, 2013

  • David M. T.

    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

  • John B.

    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

  • Joel C.

    Great approach to the topic, including a bit of design theory and enough information about Bootstrap to make people want to dive in and start using it.

    1 · June 11, 2013

    • David S.

      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

  • Chris L.

    Great presentation. People should also check out - 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

  • David S.

    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

  • James B.

    Theme forest is stacked with bootstrap themes

    June 11, 2013

  • Joe

    May be able to come for a minute. Excited to start attending this group!

    June 11, 2013

  • Erica C.

    Bootstrap is getting lots of buzz, I'm excited to learn more.

    June 5, 2013

  • Rich L.

    I am there.

    June 5, 2013

  • A former member
    A former member

    You know I'm going to be there for a Bertucci special! Can't wait!

    1 · June 3, 2013

  • Eric L.

    Sounds like a great approach to this topic, looking forward to it.

    May 23, 2013

34 went

Our Sponsors

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy