Accessorizing Ning Networks with Twitter Bootstrap

[JFarrow]

So i've been playing around with the Twitter Bootstrap framework, building new responsive pages for home, about network and otherwise.  I just wanted to open a discussion regarding the possibilities of using Bootstrap in hope of discovering (or creating) new ways to further integrate them within the Ning system.  Before we go any further, I'll admit that I haven't quite got it perfect yet, thus my reasoning behind posting this discussion.  I am interested to hear back from any other NCs who might  have experimented with Bootstrap as I cannot find any discussions on the creators forum regarding bootstrap.

Extending Ning With Bootstrap

The possibilities for extending Ning with bootstrap seem endless, using the file manager a bit of hard work and imagination.  Here are a couple of new clean pages that I made for my network using Twitter Bootstrap.
View New Home PageExample:

View New About PageExample:

Twitter bootstrap also built using LESS for CSS, so I am optimistic about being able to (eventually) fully integrate bootstrap into my entire network, thus allowing me to have features to pull in member profile data, extend the capabilities of my network.

 Tips

You can customize your bootstrap download to match the color scheme of your network here.

If you are interested in practicing with the same intentions, I will give you a tip.  Download the bootstrap folder and place it into your Public Dropbox folderto make changes as you see fit and when you have it the way you like it, then upload it to your network to save a lot of headaches.

If you are interested in discussing my experiments with twitter bootstrap or are in need of some help with your own network, connect with me from my profile on creators and don't be shy.

[MAXX]

Just not sure what it is and how to utilize it....

[JFarrow]

if you have any questions, let me know.

[JFarrow]

perhaps I should explain a bit

Twitter Bootstrap is a toolkit created by Twitter for kickstarting CSS when developing websites.

It is built with Less and consists of base CSS + HTML for typography, forms, buttons, tables, grids, navigation, and some more.

The grid provided is 940px wide 16-column and, for the layouts, there are solutions for both fixed + fluid ones.

Twitter Bootstrap's HTML elements have a plain-yet-elegant style where form inputs get a nice box-shadow on focus or table rows being highlighted.

The kit also includes other stuff like popovers, alerts, tabs and pagination which all use semantic XHTML.

It is actually built with Preboot, an open-source pack of mixins and variables to be used with Less and, for anyone willing to use it with Less rather than the static CSS, a detailed how-to is provided.

[Alex]

I think this is a great idea! I look forward to seeing what you are doing.  We will be upgrading our main site using bootstrap so it would be great if we can use this with the Social Network.

[JFarrow]

Great Alex..i'll keep you posted..

[solo]

nice post thanks for sharing..and explaining

[John]

Wow!  Yeah, what Solo said.

[JFarrow]

Thanks John and Solo...hope it helps!

[Armani Rouse]

Jay the site looks great bro! Nice job, I havent forgot about our project, super busy these days my corporations birthday is today actually lol but we'll be in touch soon, just sorting out my last few kinks! Keep up the great site, its doing well!

[JFarrow]

Thanks Armani!  Have fun we'll talk soon..

[JFarrow]

Twitter Bootstrap is a widely used set of free tools containing HTML and CSS-based templates for buttons, charts, forms, typography, along many others, and even optional JavaScript extensions. GitHub continuously develops the project and it is most likely their most impressive toolkit until now – as a matter of fact, it is even used by MSNBC, CodeSprint and NASA. If you check all their websites, you will notice clean grids with a professional interface and will note a lot of variety in details. Bootstrap was released as open-source in August 2011; its latest version at the publishing time of this article is 2.0.4 and is dated June 3^st 2012.

Bootstrap started as an internal Twitter project that was intended for developing internal analysis and management tools. Because various libraries were used for the interface development, this led to inconsistency and high maintenance costs. Many people started using the framework after one of the leader developers showed how useful it is to accelerate projects with it.

Although the support for HTML5 and CSS is relatively incomplete, the Bootstrap framework is compatible with all major browsers on the market. However, although support for gradients, rounded corners and shadows are not featured by older browsers, Bootstrap uses them – this way it extends its use, although the usage of the above-mentioned techniques is not required.

Bootstrap 2.0 also features support for responsive designs, which means that a page created with the framework can adjust dynamically to screen size. If you’ve been in the branch for more than 3 minutes, you already know how important responsiveness is to a website or an application. Bootstrap gets another praise from me for this.

Functions and structure

The framework is modular and consists of several LESS stylesheets that implement various components of it. Obviously the stylesheets can be adapted by developers with a limited amount of effort, so that the framework fits the project and its needs.

If you’ve seen LESS stylesheets before, you probably know it allows the usage of variables, functions, operators and nested selectors.

Another advantage of Bootstrap is that since the 2.0 version, the framework allows developers to configure it for his own needs. For example, if needed, the values of different options can be modified. The developer can also choose the desired components and adjusts them, so that the generated package already comes with the pre-built CSS stylesheet for the wished configuration.

Responsiveness

As mentioned earlier, the framework is responsive. It comes with a 940-pixel wide, grid layout, but there are some more to choose form if the default one doesn’t fit. In all cases the toolkit comes with four variations in order for the design to adapt to the screen – so you have support for mobile phones (portrait and landscape), tablets and PCs both with low and high-resolution (widescreen).

The stylesheet

With so many stylesheets provided by default, developers need to have a clear understanding of them. All stylesheets provide style definitions for key HTML components. Thanks to those the toolkit features a system-wide uniform, modern interface for formatting text, form elements and tables.

Re-usable components

There are lots of regular HTML elements included in the toolkit, but there are also some other commonly user interface elements such as buttons with different features (grouping with drop-down, creating navigation lists, vertical and horizontal tabs, breadcrumbs for navigation, pagination and many other popular ones), labels, thumbnails, creation of warning messages and progress bars and even advanced typography capabilities.

JavaScript plugins

As mentioned earlier, the toolkit also provides some JavaScript elements – all of them are based on the jQuery framework. With the JavaScript plugins available developers can make use of user-interface elements, including tooltips, carousels and dialog; the auto-complete function for input fields is available as well.

Some more plugins were added with the 2.0 version, including Modal, Dropdown, Scrollspy, Tab, Popover, Collapse, Tooltip, Typeahead, Carousel, Alert and Button.

How to use it

Bootstrap is in principle quite easy to use. Even a rookie designer or developer would be able to follow the simple steps that are required for setting it up. The developer must first compile one CSS file from the LESS stylesheets included in the toolkit. Special tools can do this. The generated CSS file needs to be integrated in the HTML file afterwards. And if JavaScript elements are to be used, then a reference along with the jQuery library has to be included in the document.

The concept behind

The project started in August 2011 at the hands of Mark Otto and Jacob Thornton. Some of their internal tools at Twitter lacked, according to Otto, a refined and approachable design. The answer they came up with was quite ingenious: bringing designers and developers together is the solution.

The constant interaction with developers is assured by their continuous efforts to develop the toolkit even one year after its release. The project was so successful because it allowed individuals to collaborate across different disciplines – each brought their most important values and technical skills to the project. The fact that the project was for internal use at Twitter tells a lot about its success rate. It’s Twitter we’re talking about here…

Bootstrap was created as a style guide. It gave developers a single point of reference and this way they shared guidance from designers and created a set of documentation for each of the living components. Their approach helped form the beginning, assuring Bootstrap will not only be a tool for internal use at Twitter, but also a toolkit for any designer or developer.

Another asset of Bootstrap is the documentation behind it. Some time ago I’ve been to an exam where I had to defend a project I worked on. It was a WordPress theme development project. During question time, the censor made it clear that he doesn’t like WordPress because it lacks documentation – and where it doesn’t, the documentation is a bit vague and difficult to follow for beginners. I agreed. You won’t meet with this issue when handling Bootstrap.

The toolkit provides interactive documentation to anyone who wants to use it – regardless of their skill level. It allows anyone to clone or download the source code or debug the code with Firebug. This is their main philosophy it seems. The fact that the project was open-source helped its development even more, with more and more people wishing to be directly involved.

Source: http://designmodo.com/twitter-bootstrap/#ixzz2Ho0HRP39

[Ceddy J]

I'm going to try to put myself to the test