1. Home
  2. Blog sosAssociates

Bootstrap: Powerful & Easy HTML/CSS

Blog Date
Author(s)
Stuart O. Smith, Jr.
Tags
Cleveland
Technology
Bootstrap
WebSigCleveland.org

 

Bootstrap: Powerful & Easy HTML/CSS Templates

 

At the October 20, 2012, WebSigCleveland.org meeting, attendees were given an in-depth introduction to a collection of HTML/CSS components, as well as JavaScript extensions, that make the creation of websites easier --  Bootstrap (@twbootstrap). After I saw a May 15, 2012, presentation on Bootstrap from Twitter by the Cleveland Adobe Users Group leader, Dan Vega (DanVega.org - @cfaddict), I asked him to do his presentation at a WebSigCleveland.org meeting. Dan did a great job sharing his knowledge of the subject, and prepared an incredible set of slides (I highly recommend you see these great slides here: Responsive Web Apps Bootstrap 2.0) that will be a resource for WebSigCleveland.org members going forward.

Dan Vega’s presentation on Bootstrap was a natural extension to the WebSigCleveland.org March 17, 2012, meeting where Richard Schulte (@Rerooting) did a general review of web toolkits. Learn more about several web toolkits presented by reading the “WebSigCleveland.org Javascript & Stylesheet Toolkits” blog post.  It also contains a nice overview of Bootstrap that I am not going to repeat here (please take a moment to see this overview of Bootstrap​).

If you know of other web toolkits that you want to share, please take a moment to add a comment to the blog post.

Here is a summary from my notes of some of the key points learned that day, along with a list of other related resources. I hope you find these as useful as I did.

Meeting description:

Bootstrap is an amazing set of tools to help you kick-start your web applications. It is designed to help people of all skill levels -- designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

It was originally built with only modern browsers in mind, but it has evolved to include support for all major browsers and, with Bootstrap 2, tablets and smart phones. Despite its small footprint, Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

In this presentation, we will talk about the origin of Bootstrap, what it is, and where it may be heading. We will take a deep dive into all of the features of this toolkit.

When you leave this presentation, you should have an understanding of what it does and how to get started. Presenter Dan Vega states: "I feel confident that once you see just how awesome Bootstrap is, you may never start another project without it."

Presenter Bio:

Dan Vega (@cfaddict) is a Senior Developer for the REX Development Department at First Comp, and has been developing software for nine years. Dan has a passion for inspiring and educating others. This has led to his being named an Adobe Community Professional for the last two years. He also blogs regularly at www.DanVega.org/blog about his daily findings, and enjoys speaking to those willing to listen.

Dan is also the manager of the Cleveland Adobe User Group. As manager, he regularly provides content to the group, answers members' questions, and presents on a wide variety of topics at monthly Cleveland AUG meetings, and has also presented to other user groups.

  • Bootstrap does not fully support HTML 5, but it is compatible with all major browsers.

  • Bootstrap was developed by Mark Otto - (@mdo) and Jacob Thornton - (@fat) while they were at Twitter. The idea was to have a standardized way of adding functionality.

  • Bootstrap is a free and open-source project.

  • Again, please see links/descriptions from the Bootstrap website from my blog post: “WebSigCleveland.org Javascript & Stylesheet Toolkits”

Dan Vega's Great "Bootstrap, from Twitter" Slides

Though I had seen Dan Vega's presentation previously, I was still amazed by the "Bootstrap, from Twitter" slides he prepared for his presentation. They really did a great job of presenting the topic. I highly recommend that everybody look at this slideshow about bootstrap, since they provide more details about the power of Bootstrap than I have seen elsewhere. Please find Dan's presentations at: DanVega.org/Presentations

For the purpose of this blog post, I thought that after you view all the slides, it would be helpful to have direct links to some of the slides that have code that you can use. These are links to the actual slides, so you can use your left and right buttons to view the related slides before and after. If you want to see particular examples of bootstrap code, check out any of these slides:

Here are some additional resources:

As part of Dan Vega's presentation, he recommended Sublime Text text editor. Learn more and download from: SublimeText.com. I noted that it is also recommended on the Bootstrap website on their "Get started" section. Per their website: "Sublime Text is a sophisticated text editor for code, markup and prose." Sublime Text may be downloaded and evaluated for free. However, a license must be purchased for $59 for continued use. I have downloaded Sublime Text, but have not really taken the time to test drive it yet. Please feel free to leave a comment below and let me know what you think. 

Placehold.it is a simple image place-holding service.  I found this useful when I was creating a Bootstrap photo gallery. I like that you can add your own text to the images.

Bootstrap uses LESS: The Dynamic Stylesheet Language.  LESS extends CSS with dynamic behavior such as variables, mixins, operations, and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. Learn more at: LessCSS.org

During Dan Vega's presentation, I shared links to two very popular content management systems that use Bootstrap. 

At the end of the meeting, James Raden (@sidecut) shared via Twitter the BVision Ruby Blog (@bvrubydev) entitled: "Please stop embedding Bootstrap classes in your HTML!" This article asks some interesting questions that I would like to explore further. I highly recommend you read its perspective.

#WebSigCLE Tweets

Here are tweets from the Bootstrap WebSigCleveland.org meeting. Some of the tweets include useful links for your use. Watch for the #WebSigCLE hashtag on Twitter the third Saturday of each month for more information:

 

WebSigCleveland.org

Please visit WebSigCleveland.org website to learn details about upcoming meetings and for driving directions.

You may also want to read about how WebSigCleveland.org was featured in Cleveland Business Connects Magazine, September 2012 issue, in the article "Networking 2.0: Techies Harness the Power of Continual Education."

Please mark your calendar and plan on attending these upcoming meetings: 

I am always looking for great topic ideas, so please feel free to contact me (@sos_jr) with your ideas for 2013 WebSigCleveland.org meetings. All WebSigCleveland.org meeting are free and open to all. Meetings are normally the third Saturday of the month, at 10:30 a.m., in room 30 (Lower Floor - Administration Building) at Notre Dame College.