Jon Kragh Starter

A clean responsive design that I use as a starting point for creating websites with HTML(5), CSS(3) and JavaScript

About

This is a work in progress... and is in transition to the official Twitter Bootstrap 2.0... Most of the documentation below is accurate, but I need to tweak some styles, update the header, and document that I transferred from GetSkeleton’s responsive grid to Bootstraps. I’m doing the bare minimum in styles here to get another project up and running.

Jon Kragh Starter is my current starting point for CSS & JavaScript for the websites that I create. This is not a supported framework! If you are looking for a great open source CSS/JS framework with tons of support, hit up Twitter Bootstrap. A majority of features here are taken from Bootstrap.

So why put this up at all? First and foremost, it's for me! But...

I think it may be a good reference to share showing how I pulled together a set of resources to REUSE across web projects. This is not an open source project, it is my attempt at combining a bunch of projects into one! And so I don't have to do the same crap OVER and OVER!

If you would like to try it out, there are three files below to reference, and you will be up and running with all of the features you see on this page.

Current Features

CSS

  • Core CSS Reset
  • Standardized Typography
  • Responsive Grid
  • Standardized and Responsive Html Form Entry
  • User Interaction Components (Errors, Warnings, etc)
  • Buttons
  • Top Navbar
  • Side Navbar
  • Formatting for code examples

JavaScript

Core

Components (included in Core + Components)

Current Release Version

×

If using SSL, change the references from http:// to https://

Using Jon Kragh Starter consists of adding three files:

  1. "head.css" in the Html <head> tag.
  2. "head.js" in the Html <head> tag.
  3. "foot-core.js" or "foot-complete.js" right before the </body> tag. "foot-complete.js" contains the entire Core library and the Extra Components as noted in the Features List

Head Css - This goes in the Html Head Element 

<link rel="stylesheet" type="text/css" href="http://www.jonkragh.com/starter/starter/v/5.3/head.css" />

Head Js - This goes in the Html Head Element (contains script required before the page loads) 
<script type="text/javascript" src="http://www.jonkragh.com/starter/starter/v/5.3/head.js"></script>

Scripts to put - Just before </body> - Core Only - or use the next one which includes everything 
<script type="text/javascript" src="http://www.jonkragh.com/starter/starter/v/5.3/foot-core.js"></script>

Scripts to put - Just before </body> - Core & Extra Components - If using this, do not use the "core only" 
<script type="text/javascript" src="http://www.jonkragh.com/starter/starter/v/5.3/foot-complete.js"></script>

Resources & Inspirations

I took code from some of these places "as is" and tweaked others.

Tech tidbits

My css is coded in .Less files and processed on the server using http://www.dotlesscss.org/. On the server side I am using Asp.Net MVC & .Net. I am using SquishIt for server side CSS and JavaScript minification on the server in .Net (it also calls out to dotLess for processing .Less files)

Core/Base Styles

Reset and core.css

The Reset and base styles in core.less originate from Html5 boilerplate and are tailored my tastes. The Html5 boilerplate styles include a great css reset called normalize.css and then adds styles for other items such as text selection.

Html5

I use a very slim customized Modernizr script with the Html 5 shim for Html5 element styling in older browsers and input tests for testing Html5 input type support.

Typography notes

I am using the type.less file from Twitter Bootstrap and then tweaked to my tastes. Body text is: Arial, 'Lucida Grande', Verdana, sans-serif; I chose those fonts because I want a predictable sans-serif set of fonts that I can size appropriatly. Headings are the header are done in the awesome Open Sans from Google web fonts. The font is loaded via Javascript in the head.js

The grid

A responsive grid from http://getskeleton.com/#grid and Respond.Js is used to provide media query support for older browsers.

Colors

Most of Starter is intentionally Grayscale. When color is used (e.g. Alerts & Buttons) I used colors based off of this scheme: http://www.colorschemer.com/schemes/viewscheme.php?id=9317

Typography & CSS Basic Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

List Types

Definition List

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  AVE
"This stylesheet is going to help so freaking much."
-Blockquote

Forms

The forms.less style originated from Nathan Smith's Formalize.me with my own adjustments.

Design notes
  • Universal form markup, supporting responsiveness
  • Placeholder support for older browsers is done by using the http://formalize.me script.
  • Script for styling unfocused inputs, selecting all text on focus, and adding calendar pickers to inputs is done by my own inputs.js.

Quick Example Form

×

Try submitting the form to see required, email and date validations.

×

Try resizing your browser to see the form become responsive

MM/dd/yyyy

Horizontal Form

Html Test

Html Code

<form class="form-horizontal">
    <div class="form_row">
        <span class="label">
            <label for="first_name">First Name</label>
        </span>
        <span class="field">
            <input type="text" id="first_name" name="first_name"/>
        </span>
    </div>
    <div class="form_row">
        <span class="label">
            <label for="last_name">Last Name</label>
        </span>
        <span class="field">
            <input type="text" id="last_name" name="last_name"/>
        </span>
    </div>
    <div class="form_row">
        <span class="label">
           
        </span>
        <span class="field">
            <input type="submit" value="Submit Form" class="btn primary"/>
        </span>
    </div>
</form>

Server Test

Server Code

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
{
    @(Html.FormLayout().
        TextBox(new TextBoxOptions()
                {
                    Name = "FirstName",
                    LabelText = "First Name",
                    IsRequired = true
                }).
        TextBox(new TextBoxOptions()
                {
                    Name = "LastName",
                    LabelText = "Last Name",
                    IsRequired = true 
                }).
                    TextBox(new TextBoxOptions()
                    {
                        Name = "SamplePlaceholder",
                        LabelText = "Example Placeholder",
                        PlaceholderText = "Sample Text",
                        IsRequired = true
                    }).
        Submit("name", "Submit Form", "btn").Render())
}

Vertical Form

Html Test

Html Code

<form class="form-vertical">
    <div class="form_row">
        <span class="label">
            <label for="first_name">First Name</label>
        </span>
        <span class="field">
            <input type="text" id="first_name" name="first_name"/>
        </span>
    </div>
    <div class="form_row">
        <span class="label">
            <label for="last_name">Last Name</label>
        </span>
        <span class="field">
            <input type="text" id="last_name" name="last_name"/>
        </span>
    </div>
    <div class="form_row">
        <span class="label">
           
        </span>
        <span class="field">
            <input type="submit" value="Submit Form" class="btn"/>
        </span>
    </div>
</form>

Server Test

Server Code

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-vertical" }))
{
    @(Html.FormLayout().
        TextBox(new TextBoxOptions()
                {
                    Name = "FirstName",
                    LabelText = "First Name",
                    IsRequired = true
                }).
        TextBox(new TextBoxOptions()
                {
                    Name = "LastName",
                    LabelText = "Last Name",
                    IsRequired = true 
                }).
                    TextBox(new TextBoxOptions()
                    {
                        Name = "SamplePlaceholder",
                        LabelText = "Example Placeholder",
                        PlaceholderText = "Sample Text",
                        IsRequired = true
                    }).
        Submit("name", "Submit Form", "btn").Render())
}

Server Test Login Form Example

Server Test Login No Labels

Detailed Search Form

 

Buttons

×

Button markup and styles are taken straight from Twitter Bootstrap. I also took the samples and docs below from Twitter Bootstrap.

Buttons

Button Class Description
Default .btn Standard gray button with gradient
Primary .btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
Info .btn-info Used as an alternate to the default styles
Success .btn-success Indicates a successful or positive action
Warning .btn-warning Indicates caution should be taken with this action
Danger .btn-danger Indicates a dangerous or potentially negative action

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

For anchors and forms

Button styles can be applied to anything with the .btn applied. However, typically you'll want to apply these to only <a> and <button> elements.

Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.

Multiple sizes

Fancy larger or smaller buttons? Have at it!

Primary action Action

Primary action Action

Disabled state

For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.

Primary action Action

Cross browser compatibility

In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.

Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow—unfortunately we can't fix this.


Button groups Join buttons for more toolbar-like functionality

Button groups

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

Left Middle Right
1 2 3 4
5 6 7
8

Example markup

Here's how the HTML looks for a standard button group built with anchor tag buttons:

  1. <div class="btn-group">
  2.   <a class="btn" href="#">1</a>
  3.   <a class="btn" href="#">2</a>
  4.   <a class="btn" href="#">3</a>
  5. </div>

And with a toolbar for multiple groups:

  1. <div class="btn-toolbar">
  2.   <div class="btn-group">
  3.     ...
  4.   </div>
  5. </div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Get the javascript »

Heads up

CSS for button groups is in a separate file, button-groups.less.

Buttons dropdowns Contextual dropdown menus built on button groups

Button dropdowns

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Action
Action
Danger
Success
Info

Example markup

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

  1. <div class="btn-group">
  2.   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  3.     Action
  4.     <span class="caret"></span>
  5.   </a>
  6.   <ul class="dropdown-menu">
  7.     <!-- dropdown menu links -->
  8.   </ul>
  9. </div>

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

Action
Action
Danger
Success
Info

Example markup

We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

  1. <div class="btn-group">
  2.   <a class="btn" href="#">Action</a>
  3.   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  4.     <span class="caret"></span>
  5.   </a>
  6.   <ul class="dropdown-menu">
  7.     <!-- dropdown menu links -->
  8.   </ul>
  9. </div>

User Interaction

The User Interaction Html markup is taken from Twitter Bootstrap. I added my own colors and variables to the Bootstrap .less code base. I also have a set of server side components for dealing with user interaction. Tha alerts have a dark background and white foreground for text. Highlight classes in the next section are light backgrounds, with dark text.

Basic Alerts

×

This is a sample warning

@Alerts.Error("This is a sample warning")
×

This is a sample error

@Alerts.Warning("This is a sample error")
×

This is a sample info

@Alerts.Info("This is a sample info")
×

This is a sample success

@Alerts.Success("This is a sample success")

Sample Error with Content

  • Example Error 1
  • Example Error 2

Blocks

×

Sample warning... Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Take this action Or do this

×

Sample error... Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Take this action Or do this

×

Sample info... Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Take this action Or do this

×

Sample success... Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Take this action Or do this

Highlights

Highlights are meant to be light, and can go behind dark text.

Sample text - class name .highlight_red1
Sample text - class name .highlight_red2
Sample text - class name .highlight_yellow1
Sample text - class name .highlight_yellow2
Sample text - class name .highlight_green1
Sample text - class name .highlight_green2
Sample text - class name .highlight_blue1
Sample text - class name .highlight_blue2

Tables

I use the jQuery DataTables plugin for advanced clientside table features.

Header 0 Header 1 Header 2 Header 3 Header 4
Item 0 Item 0 Item 0 Item 0 Item 0
Item 0 Item 1 Item 2 Item 3 Item 4
Item 0 Item 2 Item 4 Item 6 Item 8
Item 0 Item 3 Item 6 Item 9 Item 12
Item 0 Item 4 Item 8 Item 12 Item 16
Item 0 Item 5 Item 10 Item 15 Item 20
Item 0 Item 6 Item 12 Item 18 Item 24
Item 0 Item 7 Item 14 Item 21 Item 28
Item 0 Item 8 Item 16 Item 24 Item 32
Item 0 Item 9 Item 18 Item 27 Item 36
Item 0 Item 10 Item 20 Item 30 Item 40
Item 0 Item 11 Item 22 Item 33 Item 44
Item 0 Item 12 Item 24 Item 36 Item 48
Item 0 Item 13 Item 26 Item 39 Item 52
Item 0 Item 14 Item 28 Item 42 Item 56
Item 0 Item 15 Item 30 Item 45 Item 60
Item 0 Item 16 Item 32 Item 48 Item 64
Item 0 Item 17 Item 34 Item 51 Item 68
Item 0 Item 18 Item 36 Item 54 Item 72
Item 0 Item 19 Item 38 Item 57 Item 76
Item 0 Item 20 Item 40 Item 60 Item 80
Item 0 Item 21 Item 42 Item 63 Item 84
Item 0 Item 22 Item 44 Item 66 Item 88
Item 0 Item 23 Item 46 Item 69 Item 92
Item 0 Item 24 Item 48 Item 72 Item 96
Item 0 Item 25 Item 50 Item 75 Item 100
Item 0 Item 26 Item 52 Item 78 Item 104
Item 0 Item 27 Item 54 Item 81 Item 108
Item 0 Item 28 Item 56 Item 84 Item 112
Item 0 Item 29 Item 58 Item 87 Item 116
Item 0 Item 30 Item 60 Item 90 Item 120
Item 0 Item 31 Item 62 Item 93 Item 124
Item 0 Item 32 Item 64 Item 96 Item 128
Item 0 Item 33 Item 66 Item 99 Item 132
Item 0 Item 34 Item 68 Item 102 Item 136
Item 0 Item 35 Item 70 Item 105 Item 140
Item 0 Item 36 Item 72 Item 108 Item 144
Item 0 Item 37 Item 74 Item 111 Item 148
Item 0 Item 38 Item 76 Item 114 Item 152
Item 0 Item 39 Item 78 Item 117 Item 156
Item 0 Item 40 Item 80 Item 120 Item 160
Item 0 Item 41 Item 82 Item 123 Item 164
Item 0 Item 42 Item 84 Item 126 Item 168
Item 0 Item 43 Item 86 Item 129 Item 172
Item 0 Item 44 Item 88 Item 132 Item 176
Item 0 Item 45 Item 90 Item 135 Item 180
Item 0 Item 46 Item 92 Item 138 Item 184
Item 0 Item 47 Item 94 Item 141 Item 188
Item 0 Item 48 Item 96 Item 144 Item 192
Item 0 Item 49 Item 98 Item 147 Item 196
Item 0 Item 50 Item 100 Item 150 Item 200
Item 0 Item 51 Item 102 Item 153 Item 204
Item 0 Item 52 Item 104 Item 156 Item 208
Item 0 Item 53 Item 106 Item 159 Item 212
Item 0 Item 54 Item 108 Item 162 Item 216
Item 0 Item 55 Item 110 Item 165 Item 220
Item 0 Item 56 Item 112 Item 168 Item 224
Item 0 Item 57 Item 114 Item 171 Item 228
Item 0 Item 58 Item 116 Item 174 Item 232
Item 0 Item 59 Item 118 Item 177 Item 236
Item 0 Item 60 Item 120 Item 180 Item 240
Item 0 Item 61 Item 122 Item 183 Item 244
Item 0 Item 62 Item 124 Item 186 Item 248
Item 0 Item 63 Item 126 Item 189 Item 252
Item 0 Item 64 Item 128 Item 192 Item 256
Item 0 Item 65 Item 130 Item 195 Item 260
Item 0 Item 66 Item 132 Item 198 Item 264
Item 0 Item 67 Item 134 Item 201 Item 268
Item 0 Item 68 Item 136 Item 204 Item 272
Item 0 Item 69 Item 138 Item 207 Item 276
Item 0 Item 70 Item 140 Item 210 Item 280
Item 0 Item 71 Item 142 Item 213 Item 284
Item 0 Item 72 Item 144 Item 216 Item 288
Item 0 Item 73 Item 146 Item 219 Item 292
Item 0 Item 74 Item 148 Item 222 Item 296
Item 0 Item 75 Item 150 Item 225 Item 300
Item 0 Item 76 Item 152 Item 228 Item 304
Item 0 Item 77 Item 154 Item 231 Item 308
Item 0 Item 78 Item 156 Item 234 Item 312
Item 0 Item 79 Item 158 Item 237 Item 316
Item 0 Item 80 Item 160 Item 240 Item 320
Item 0 Item 81 Item 162 Item 243 Item 324
Item 0 Item 82 Item 164 Item 246 Item 328
Item 0 Item 83 Item 166 Item 249 Item 332
Item 0 Item 84 Item 168 Item 252 Item 336
Item 0 Item 85 Item 170 Item 255 Item 340
Item 0 Item 86 Item 172 Item 258 Item 344
Item 0 Item 87 Item 174 Item 261 Item 348
Item 0 Item 88 Item 176 Item 264 Item 352
Item 0 Item 89 Item 178 Item 267 Item 356
Item 0 Item 90 Item 180 Item 270 Item 360
Item 0 Item 91 Item 182 Item 273 Item 364
Item 0 Item 92 Item 184 Item 276 Item 368
Item 0 Item 93 Item 186 Item 279 Item 372
Item 0 Item 94 Item 188 Item 282 Item 376
Item 0 Item 95 Item 190 Item 285 Item 380
Item 0 Item 96 Item 192 Item 288 Item 384
Item 0 Item 97 Item 194 Item 291 Item 388
Item 0 Item 98 Item 196 Item 294 Item 392
Item 0 Item 99 Item 198 Item 297 Item 396
Item 0 Item 100 Item 200 Item 300 Item 400
Item 0 Item 101 Item 202 Item 303 Item 404
Item 0 Item 102 Item 204 Item 306 Item 408
Item 0 Item 103 Item 206 Item 309 Item 412
Item 0 Item 104 Item 208 Item 312 Item 416
Item 0 Item 105 Item 210 Item 315 Item 420
Item 0 Item 106 Item 212 Item 318 Item 424
Item 0 Item 107 Item 214 Item 321 Item 428
Item 0 Item 108 Item 216 Item 324 Item 432
Item 0 Item 109 Item 218 Item 327 Item 436
Item 0 Item 110 Item 220 Item 330 Item 440
Item 0 Item 111 Item 222 Item 333 Item 444
Item 0 Item 112 Item 224 Item 336 Item 448
Item 0 Item 113 Item 226 Item 339 Item 452
Item 0 Item 114 Item 228 Item 342 Item 456
Item 0 Item 115 Item 230 Item 345 Item 460
Item 0 Item 116 Item 232 Item 348 Item 464
Item 0 Item 117 Item 234 Item 351 Item 468
Item 0 Item 118 Item 236 Item 354 Item 472
Item 0 Item 119 Item 238 Item 357 Item 476
Item 0 Item 120 Item 240 Item 360 Item 480
Item 0 Item 121 Item 242 Item 363 Item 484
Item 0 Item 122 Item 244 Item 366 Item 488
Item 0 Item 123 Item 246 Item 369 Item 492
Item 0 Item 124 Item 248 Item 372 Item 496
Item 0 Item 125 Item 250 Item 375 Item 500
Item 0 Item 126 Item 252 Item 378 Item 504
Item 0 Item 127 Item 254 Item 381 Item 508
Item 0 Item 128 Item 256 Item 384 Item 512
Item 0 Item 129 Item 258 Item 387 Item 516
Item 0 Item 130 Item 260 Item 390 Item 520
Item 0 Item 131 Item 262 Item 393 Item 524
Item 0 Item 132 Item 264 Item 396 Item 528
Item 0 Item 133 Item 266 Item 399 Item 532
Item 0 Item 134 Item 268 Item 402 Item 536
Item 0 Item 135 Item 270 Item 405 Item 540
Item 0 Item 136 Item 272 Item 408 Item 544
Item 0 Item 137 Item 274 Item 411 Item 548
Item 0 Item 138 Item 276 Item 414 Item 552
Item 0 Item 139 Item 278 Item 417 Item 556
Item 0 Item 140 Item 280 Item 420 Item 560
Item 0 Item 141 Item 282 Item 423 Item 564
Item 0 Item 142 Item 284 Item 426 Item 568
Item 0 Item 143 Item 286 Item 429 Item 572
Item 0 Item 144 Item 288 Item 432 Item 576
Item 0 Item 145 Item 290 Item 435 Item 580
Item 0 Item 146 Item 292 Item 438 Item 584
Item 0 Item 147 Item 294 Item 441 Item 588
Item 0 Item 148 Item 296 Item 444 Item 592
Item 0 Item 149 Item 298 Item 447 Item 596
Item 0 Item 150 Item 300 Item 450 Item 600
Item 0 Item 151 Item 302 Item 453 Item 604
Item 0 Item 152 Item 304 Item 456 Item 608
Item 0 Item 153 Item 306 Item 459 Item 612
Item 0 Item 154 Item 308 Item 462 Item 616
Item 0 Item 155 Item 310 Item 465 Item 620
Item 0 Item 156 Item 312 Item 468 Item 624
Item 0 Item 157 Item 314 Item 471 Item 628
Item 0 Item 158 Item 316 Item 474 Item 632
Item 0 Item 159 Item 318 Item 477 Item 636
Item 0 Item 160 Item 320 Item 480 Item 640
Item 0 Item 161 Item 322 Item 483 Item 644
Item 0 Item 162 Item 324 Item 486 Item 648
Item 0 Item 163 Item 326 Item 489 Item 652
Item 0 Item 164 Item 328 Item 492 Item 656
Item 0 Item 165 Item 330 Item 495 Item 660
Item 0 Item 166 Item 332 Item 498 Item 664
Item 0 Item 167 Item 334 Item 501 Item 668
Item 0 Item 168 Item 336 Item 504 Item 672
Item 0 Item 169 Item 338 Item 507 Item 676
Item 0 Item 170 Item 340 Item 510 Item 680
Item 0 Item 171 Item 342 Item 513 Item 684
Item 0 Item 172 Item 344 Item 516 Item 688
Item 0 Item 173 Item 346 Item 519 Item 692
Item 0 Item 174 Item 348 Item 522 Item 696
Item 0 Item 175 Item 350 Item 525 Item 700
Item 0 Item 176 Item 352 Item 528 Item 704
Item 0 Item 177 Item 354 Item 531 Item 708
Item 0 Item 178 Item 356 Item 534 Item 712
Item 0 Item 179 Item 358 Item 537 Item 716
Item 0 Item 180 Item 360 Item 540 Item 720
Item 0 Item 181 Item 362 Item 543 Item 724
Item 0 Item 182 Item 364 Item 546 Item 728
Item 0 Item 183 Item 366 Item 549 Item 732
Item 0 Item 184 Item 368 Item 552 Item 736
Item 0 Item 185 Item 370 Item 555 Item 740
Item 0 Item 186 Item 372 Item 558 Item 744
Item 0 Item 187 Item 374 Item 561 Item 748
Item 0 Item 188 Item 376 Item 564 Item 752
Item 0 Item 189 Item 378 Item 567 Item 756
Item 0 Item 190 Item 380 Item 570 Item 760
Item 0 Item 191 Item 382 Item 573 Item 764
Item 0 Item 192 Item 384 Item 576 Item 768
Item 0 Item 193 Item 386 Item 579 Item 772
Item 0 Item 194 Item 388 Item 582 Item 776
Item 0 Item 195 Item 390 Item 585 Item 780
Item 0 Item 196 Item 392 Item 588 Item 784
Item 0 Item 197 Item 394 Item 591 Item 788
Item 0 Item 198 Item 396 Item 594 Item 792
Item 0 Item 199 Item 398 Item 597 Item 796

jQuery UI

From jQuery UI I use the Drag & Drop, Fade, Datepicker, Slider and Autocomplete. I use the theme "smoothness". The options I chose are here.

Navbars

Top Nav

The top nav is at the top of this page which I ported from Twitter Bootstrap and made responsive.

Side Nav

Side bar navigation is made responsive by the responsive grid.

Some example content

Well, well, my dear comrade and twin-brother, thought I, as I drew in and then slacked off the rope to every swell of the sea—what matters it, after all? Are you not the precious image of each and all of us men in this whaling world? That unsounded ocean you gasp in, is Life; those sharks, your foes; those spades, your friends; and what between sharks and spades you are in a sad pickle and peril, poor lad.

But courage! there is good cheer in store for you, Queequeg. For now, as with blue lips and blood-shot eyes the exhausted savage at last climbs up the chains and stands all dripping and involuntarily trembling over the side; the steward advances, and with a benevolent, consolatory glance hands him—what? Some hot Cognac? No! hands him, ye gods! hands him a cup of tepid ginger and water!

Html Code

<div class="row">
    <div class="three columns alpha">
        <nav>
            <ul class="sidenav">
                <li class="active"><a href="#">Item 1</a></li>
                <li><a href="#">lots and lots of text here and lots</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
    </div>
    <div class="thirteen columns">
        <h4>Some example content</h4>
       </div>
</div>

Bottom Nav

See the bottom nav on this page

Structure

Here are a few custom structural classes that I use on top of bootstrap.

Padding

.p3
.p5
.p10
.p20

Margin

.m3
.m5
.m10
.m20

Margin Sides

.mtop5
.mtop10
.mright5
.mright10
.mbot5
.mbot10
.mleft5
.mleft10

Borders

.b3
.b5
.b10
.b20

Rounded Corners

.round3
.round5
.round10

Grid

.half_left
.half_right
.third_left
.third_left
.third_right
.fourth_left
.fourth_left
.fourth_left
.fourth_right

Miscellaneous Components

Tabs

I switched from jQuery UI Tabs to Bootstraps Tabs. The following examplee is taken from the bootstrap docs.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

FB Login / Connect

I have wrapper components for the FaceBook Javascript SDK called "Sincerity.FBCore"

Html & JavaScript

<!-- needed as a place to load the fbscripts async -->
<div id="fb-root"></div> 

<!-- a debug node for testing in this sample -->
<div id="fb-debug"></div> 

<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>

<script>
    $(function () {
        var $status = $("#fb-debug");
        
        Sincerity.FBCore.init(
            { 
                appId: "199758186775097",
                initLoginStatus: function (isLoggedIn, session) {
                    $status.text("logged in: " + isLoggedIn);
                },
                onLogin: function () {
                    $status.text("user logged in");
                },
                onLogout: function () {
                    $status.text("user logged out");
                }
            });
    });
</script>

Edit in place

I use jEditable for inline edits.

Click Me to Edit

Images

Loader
Bootstrap glyph test

jQuery color plugin

Color animations used for highlights.

click to test

Autogrow textareas

Autocomplete

The awesomely simple Twitter Bootstrap Carousel

Asp.Net tweaks

Setting Asp.Net render for the latest version of IE

This avoids the compatability mode icon from being shown in IE9. View the response headers for this site in your tool of choice. 

<system.webServer>
<httpProtocol>
<customHeaders>
  <clear />
  <add name="X-UA-Compatible" value="IE=edge" />
</customHeaders>
</httpProtocol>
</system.webServer>

Resources