Basic rules-of-thumb for coding and setup
- Download, clone, fork... whatever the cool kids do these days
- Add project to Codekit
- Once added, right-click on project and go to 'Project Settings > Apply project defaults from file...'
- Select the file 'codekit-config.json'
As much as possible, try to stick with the following structures
-
_normalize.scss
- Avoid modifying unless a style consistently interferes with desired results
-
_variables.scss
- All Sass variables
-
_typography.scss
- Define what links, headers, etc. look like
- Also try keeping any font related styles and coloring in this doc
-
_font-awesome.min.scss
- Permits the use of the font awesome icon font
- Requires that the font files in the font folder also be included
-
screen.css
- The previous css files are pulled into this one
- Global Styles - Buttons, Lists, Clear Float/Fix, Tooltips, etc.
- Header Styles
- Footer Styles
- Main Styles - general layout like wrappers, sidebars, etc.
- From here on, divide sections by page
HTML is written in .kit files
- partials folder for pieces to be included in other files such as header and footer
- header.kit contains the some of the basics. Also if there is a consistent wrapper on most pages, it should open here.
- footer.kit does not close the body or html but should contain typical footer items like nav, copyright, etc.
- sample.kit is an example of what a typical page may look like. Already contains links to common js libraries.
- Vendor plugins intended for the section of the page are stored in the js/vendor folder and are concatenated automatically to the vendor-min.js file by adding their filenames to the vendor.js file. This convention assumes the use of minified plugins.
- Vendor plugins that are to be loaded at the bottom of the page are also stored in the js/vendor folder, but their filenames should be added to the top of the scripts.js file. Again, this convention assumes the use of minfied plugin code.
- app.js is where the Knockout code should be written
- screen.js should contain all self written jQuery code. The "document ready" is already there so no need to add another one.
- The two files are then concatenated and minified. This can be prevented during development to assist in debugging.
- jQuery UI is purposely not included here by default. If it is necessary, we should create a custom build with only the components that are necessary for the project to keep the file size down.
- Compiles, combines, minifies, reloads... Just use it.
- Not required for this boilerplate, but a local server may be needed down the line.
- Our text editor of choice.
- Here are some recommended packages to install:
- Sublime Package Control
- BracketHighlighter
- ColorPick
- Emmet
- jQuery
- Markdown Preview
- Sass
- SidebarEnhancements
- Sublime-KnockoutJS-Snippets
- SublimeCodeIntel
- SublimeLinter
- Source control used to work with Subversion
- Comparison tool
-
Less is more. Avoid adding elements to HTML when the same can be done with CSS. This prevents cross-browser issues, conflicts when integrating into back-end, and also removes overall clutter.
-
Avoid ID's. Classes should be used when there is a need to target something for CSS. Back-end code will sometimes add dynamic ID's to important elements. Sticking with classes prevents conflicts in case that needs to be done.
-
Putting a block-level element inside an inline element may still work in some smarter browsers, but will make others go berserk.
-
Links vs. Buttons If clicking on an element will eventually submit user info to the server, use a button or input[type="submit"]. If that element is only meant to bring the user to another page, use an 'a' tag.
-
Check with Engineers ahead of time. For any non-static components of a web page, check with the developer to see if there are any requirements or expectations.
1...