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.
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."
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 is a free and open-source project.
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.
Twitter's Bootstrap in a WordPress Theme: http://320press.com/wpbs/
Twitter's Bootstrap: Drupal.org/project/twitter_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.
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:
GCPCUG/CDPUG Web SIG 10/20 Bootstrap from Twitter, 10:30am-12, Rm 30 Lwr Flr Admin Bldg, Notre Dame, S. Euclid, free websigcleveland.org— CDPUG (@CDPUG) October 18, 2012
At #WebSigCle, looking forward to learning more on Twitter Bootstrap— Mark Harr (@markharr) October 20, 2012
Presentation time! instagr.am/p/RAf4cqhJAp/— Dan Vega (@cfaddict) October 20, 2012
Wow! I'm going to use Bootstrap carousel. #WebSigCLE— Debbie Kennedy (@4debbiekennedy) October 20, 2012
@sidecut thanks for the link James!— Dan Vega (@cfaddict) October 20, 2012
@cfaddict No problem. Great talk! The HTML5 slides worked out very well; they look great!— James Raden (@sidecut) October 21, 2012
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.