An open API service indexing awesome lists of open source software.

https://github.com/typeofweb/starter

Set of files used to start a new project
https://github.com/typeofweb/starter

Last synced: 12 months ago
JSON representation

Set of files used to start a new project

Awesome Lists containing this project

README

          

# Starter

Starter is a mix of [H5BP](http://h5bp.com) and [Paweł Ludwiczak's project](http://github.com/ludwiczakpawel/project).

Starter uses [LESS](http://lesscss.org).

## Structure

* __css__ - contains all CSS files generated by LESS
* __images__ - contains all images used in CSS
* __js__ - contains all JS libraries and scripts
* __less__ - contains all LESS files
* _variables.less_ - this file contains all the variables
* _mixins.less_ - this file contains all the mixins
* _layout.less_ - this file contains all layout-related rules
* _common.less_ - this file contains some generic styles (no need to create a separate less file)
* __media__ - contains all media files used as a content placeholder during development or a place to storage files not used in CSS
* _index.html_
* _robots.txt_

## Namespace & coding conventions

### Images

All image files should contain a prefix specific for its usage.

* __bg-__ - background images
* __ico-__ - icons
* __logo-__ - all logos, main logo should be named _logo.png_
* __nav-__ - all images navigation-related
* __txt-__ - all images which are being used as a text replacement

__PLEASE NOTE:__ All content-related images should be placed in `assets/media` directory.

### CSS/LESS code

All LESS files should be named in lowerCamelCase.

All ids & classes should be written in lowercase with dashes instead of spaces.

All properties should be written in following order:

1. Properties that have a major impact on the layout.
2. Dimensions.
3. Margins, borders, padding.
4. Background and colour.
5. Typographic properties.
6. Element type specific properties.
7. Generated content.

#### Example

element {
display: ;
visibility: ;
overflow: ;
direction: ;
unicode-bidi: ;

float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
clip: ;

width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;

margin: ;
border: ;
padding: ;
outline: ;

background: ;
color: ;

font: ;
font-family: ;
font-size: ;
font-style: ;
font-variant: ;
font-weight: ;
letter-spacing: ;
line-height: ;
text-align: ;
text-decoration: ;
text-indent: ;
text-transform: ;
vertical-align: ;
white-space: ;
word-spacing: ;

list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

quotes: ;
counter-reset: ;
counter-increment: ;
content: ;
}

### JavaScript

All JS scripts should use a namespace given in `js/scripts.js` or similar.

All variables used in scripts should have a prefix `$`.

#### Example

var Website = {
init: function(){
this.foo();
},

foo: function(){
var $foo = $('#bar');

$foo.css('color', 'red')
.show();
}
}

$(function(){
Website.init();
});

## Questions & such

If you have any questions related to _Starter_, feel free to ask: lukasz [at] klis [dot] pl or [@LukaszKlis](http://twitter.com/lukaszklis).

## Credits

H5BP project is being developed by [HTML5boilerplate.com's team](http://html5boilerplate.com/#footer).
Namespace convention was an idea of [Paweł Ludwiczak](http://twitter.com/ludwiczakpawel) - thanks man!

(c) 2012 [Łukasz Kliś](http://lukasz.klis.pl)