Bootstrap

CCN4B.js

CCN4B.js - a Javascript framework for CCNx Protocol.
The CCN4B.js project is an open source project which is a proof of concept. Short for Content Centric Networking for Browsers, CCN4B is a small CCNx client API written in Javascript (JS), that utilizes the evented model of development of JS. APIs are written to be asynchronous. Web application developers can choose to deploy this API in the client side of the web application (in script tag), or on the server-side of the web application, as a module import for a Server-Side Javascript platform called Node.js.

Coding

Discuss the Javascript

h1. Heading 1

h2. Heading 2

h3. Heading 3

blah blah

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Example heading Has sub-heading…

When to use

Emphasis tags (<strong> and <em>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <strong> for importance and <em> for stress emphasis.

Emphasis in a paragraph

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: It's still okay to use <b> and <i> tags in HTML5, but they don't come with inherent styles anymore. <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

Default grid

The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.

Example grid markup

As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.

 
						<div class="row">
						<div class="span6 columns">
						...
						</div>
						<div class="span10 columns">
						...
						</div>
						</div>
					
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16

Offsetting columns

4
8 offset 4
4 offset 4
4 offset 4
5 offset 3
5 offset 3
10 offset 6

Default styles

All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.

Example form legend
Some Value Here
Small snippet of help text
Example form legend
@
Example form legend
Note: Labels surround all the options for much larger click areas and a more usable form.
to All times are shown as Pacific Standard Time (GMT -08:00).
Block of help text to describe the field above if need be.

Stacked forms

Add .form-stacked to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Example form legend
Example form legend
Note: Labels surround all the options for much larger click areas and a more usable form.

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

All buttons default to a light gray style, but a blue .primary class is available. Plus, rolling your own styles is easy peasy.

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

Alternate sizes

Fancy larger or smaller buttons? Have at it!

Disabled state

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

Links

Buttons

A simple demonstration of CCNX4B.js


What is it

Snarf Service lets you manage your CCNx Node in your browser and snarf content to share with other CCN4B users.

Service management

Just like you used to do with PHPMyAdmin, you can use this to manage your CCNx services (start/stop/restart) + configuration.

Content Snarfing

Input any URL and pull in content.

Content Sharding

As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.

Tabs and pills

Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

 
							<ul class="pills">
							<li class="active"><a href="#">Home</a></li>
							<li><a href="#">Profile</a></li>
							<li><a href="#">Messages</a></li>
							<li><a href="#">Settings</a></li>
							<li><a href="#">Contact</a></li>
							</ul>