s12.in (beta)

A Simple Code Repository

Stay Up to date

I've got plans to add lots of neat stuff to s12.in if you want to know the who, what, when, where, and why... Follow @s12in on twitter.

What is s12.in?

Simple it's a repository for code mostly jQuery the purpose of which is to provide quick and easy access to the things you use often. For example you use jQuery in all your projects, so to add it to your projects just add a script tag with the "src" attribute set to "http://s12.in/jquery/core.js" and now you're ready to rock -n- roll with jQuery... read more »

There is a simple explanation to why I made a code repository, I use a lot of resources in my projects, rather than trying to track down everything everytime I start a new project, I can just include the files from here, and if I plan on using something often or across more than a few projects, I upload it here. The goal is simplicity so the file naming convention is as semantic as possible. There's more than just jQuery here. Keep reading for a list of what is available.

What is on s12.in?

Starting at the site root...

Google Chrome Frame

• /cfinstall.js

Usage:
<!--/*Google Chrome Frame*/-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="/cfinstall.js"></script><![endif]-->
fontsquirrel.com @fontface kit library

• /fonts/

  • 3dumb.css (.three-dumb)
    • 2dumb (.two-dumb)
  • apple_chancery.css
  • boycott.css
  • century_gothic.css
    • century_gothic-bold
    • century_gothic-italic
    • century_gothic-bold-italic
  • especial_kay.css
  • impact_label.css
    • impact_label-reversed
  • neoretro.css (neoretro-draw)
    • neoretro-fill
    • neoretro-shadow
  • proggysquare.css
  • santana.css
    • santana-condensed
    • santana-bold
    • santana-black
    • santana-black-condensed
Usage:
  1. Add the font(s) to your project with <link> tag(s) or @import(s).
  2. The url is /fonts/font_name.css
  3. Alternatively import or link to the entire library: /fonts.css
  4. Use the font in your stylesheet or inline styles, as you would with any font.
  5. Alternatively, use class="font_name" to the desired element.

Naming convention is simple: font_name-variant_name-variant_name as shown in the previews above. The exception is 2dumb/3dumb you would expect the file name to be dumb and the fonts to be dumb-2 and dumb-3 however there is no "dumb" font.

Also note that there is no "neoretro" font only variants: -draw, -fill and -shadow

If you include the entire library, "/fonts.css" note that fonts and variants will be added regularly and at my discretion. Despite Google's recent font library release, I will only be using fonts from the fontsquirrel.com font library, to keep this framework consistent. I am not taking requests to add new fonts. If you want to make use of fonts not included in this library, please use fontsquirrel.com's services or the Google font library.

See: New code repository, plus developer resources!

HTML5 Framework

• /html5/

Makes using html5 a breeze see: HTML5 Tutorial [Bulletproof] for an extended how to.

Usage:
<!--/*Google Chrome Frame*/-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="/cfinstall.js"></script><![endif]-->
<!--/*GCF Fallback*/-->
<!--[if lt IE 9]>
<script src="/html5/shiv.js"></script><![endif]-->
<!--[if lt IE 8]>
<script src="/ie.js"></script><![endif]-->
IE < 8 Update Script

• /ie.js

Make IE < 8 behave like IE8

Usage:
<!--[if lt IE 8]>
<script src="/ie.js"></script><![endif]-->
jQuery

• /jquery/

/jquery/core.js
jQuery v. 1.4.2 [latest - STABLE - minified]
/jquery/tools.js

jQuery.tools v. 1.2.2 [latest - STABLE - minified] All of the trimmings included

You need to fetch your own images and write your own stylesheet(s)

See: jQuery Tools - Documentation for instructions.

/jquery/ui/

jQuery UI v. 1.8.1 [latest - STABLE - minified]

Quick List:
  • /jquery/ui/accordian.js
  • /jquery/ui/autocomplete.js
  • /jquery/ui/button.js
  • /jquery/ui/core.js
  • /jquery/ui/datepicker.js
  • /jquery/ui/dialog.js
  • /jquery/ui/draggable.js
  • /jquery/ui/droppable.js
  • /jquery/ui/effects/
    • /jquery/ui/effects/blind.js
    • /jquery/ui/effects/bounce.js
    • /jquery/ui/effects/clip.js
    • /jquery/ui/effects/core.js
    • /jquery/ui/effects/drop.js
    • /jquery/ui/effects/explode.js
    • /jquery/ui/effects/fold.js
    • /jquery/ui/effects/highlight.js
    • /jquery/ui/effects/pulsate.js
    • /jquery/ui/effects/scale.js
    • /jquery/ui/effects/shake.js
    • /jquery/ui/effects/slide.js
    • /jquery/ui/effects/transfer.js
  • /jquery/ui/images/
  • /jquery/ui/mouse.js
  • /jquery/ui/position.js
  • /jquery/ui/progressbar.js
  • /jquery/ui/resizeable.js
  • /jquery/ui/selectable.js
  • /jquery/ui/slider.js
  • /jquery/ui/smoothness.css
  • /jquery/ui/sortable.css
  • /jquery/ui/tabs.js
  • /jquery/ui/widget.js
Usage:

Use a script tag to get the files you need, if you don't have a theme from jQuery UI Theme Roller you can use /jquery/ui/smoothness.css this file uses the default jQuery UI images.

See: jQuery UI for instructions.

SyntaxHighlighter

• /sh/ [latest - STABLE - minified]

Adds syntax highlighting to code snippets.

Usage
HTML inside <head>
<link rel="stylesheet" href="http://s12.in/sh/styles.css" />
<!--Load local styles here-->
<script src="http://s12.in/sh/core.js"></script>

<script src="http://s12.in/sh/xml.js"></script>
<script src="http://s12.in/sh/css.js"></script>
<script src="http://s12.in/sh/js.js"></script>
<script src="http://s12.in/sh/php.js"></script>
<script src="http://s12.in/sh/sql.js"></script>
HTML in context:
<pre name="code" class="xml|css|js|php|sql:option(s)">
	<!--Your Code Here-->
</pre>

Example options are:

  • :nogutter | Removes gutter.
  • :nocontrols | Removes toolbar. (used here)
  • :collapse | Collapses code block.
  • :firstline[value] | The line number to start with. (Default 1)
  • :showcolumns | Shows columns on the first line.

Options can be chained to the class name. eg:

<pre name="code" class="xml:nocontrols:showcolumns:firstline[12]">
	<!--Your Code Here-->
</pre>
JS inside jQuery <script> block
/* <![CDATA[ */
$(function(){
	dp.SyntaxHighlighter.ClipboardSwf = 'http://s12.in/sh/copy.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
});
/* ]]> */
  1. Grab the default stylesheet. You can overide it's definitions in your local stylesheet.
  2. Grab the core.js script.
  3. Grab the necessary script(s) for your language(s).
  4. Add name="code" and class="lang:option:option:etc" to pre elements, where lang=(xml|css|js|php|sql) and option=(:nogutter|:nocontrols|:collapse|:firstline[n]|:showcolumns)
  5. Initialize the script:
    • The developer recommends placing the init script just before the </body> tag.
    • When not using jQuery the contents of $(); should be placed inside a window.load(); function.
    • File List:
      • /sh/copy.swf
      • /sh/core.js
      • /sh/css.js
      • /sh/js.js
      • /sh/php.js
      • /sh/sql.js
      • /sh/styles.css
      • /sh/xml.js

    6. *Note I've added custom styles to my local css slighty altering the default look and feel. You should do the same.

Stay Up to date

I've got plans to add lots of neat stuff to s12.in if you want to know the who, what, when, where, and why... Follow @s12in on twitter.