This is just a list I’ve created basically for myself, so I don’t forget any scenario or issue when thinking about a frontend project, but I thought it’d be useful for any other frontend out there :-)
Please feel free to add anything I’ve forgot in the comments, so I can update it.
Documenting the code
One of the easiest ways to improve the communication between frontend and backend developers is using a styleguide (starbucks, Github or Hackerhires examples) — that’s one of the main reasons why twitter bootstrap has been so widely used.
The following tools and links will help you to create styleguides:
- Kneath is a methodology for documenting CSS and generating styleguides.
- Nadarei KSS is a Kneath KSS port to Rails.
- Kalei styleguide is a clever client-side solution using backbone, so no need to maintain a server.
- Pears uses wordpress and a specific theme to create styleguides.
- Styledocco uses NodeJS and Markdown to generate HTML styleguides and documentation.
- Patter primer generates styled markup from a folder of markup snippets.
- TopDoc is a well documented tool for generating usage guides for css that uses very stric structures to document our CSS code.
- And some interesting reference posts from Warpspire, rjmetrics and UXMag.
CSS is a set of rules that, applied to some specific HTML, produce a pleasant result. That’s why is not easy to add tests to a CSS framework, but there are some different stages we can add to our pipeline, mostly based on before and after image diffs:
- Wraith, a responsive screenshot comparison tool from the BBC guys.
- PhantomCSS provides visual regression testing with PhantomJS.
- Hardy is, as they say, a “Selenium-driven, cucumber-powered CSS testing”.
- CSS critic, a lightweight framework for regression testing of Cascading Style Sheets.
- Sikuli is a general purpose visual technology to automate and test graphical user interfaces using screenshot images.
- SuitCSS provides a test structure for visually testing other components.
Static code analysis
Interesting as a before-commit, checking any syntax errors and code redundancy:
- CSSCSS is a CSS redundancy analyzer that analyzes redundancy (I love this guys :-)
- CSSLint online tool and command line tool for syntax and basic performance checking.
- MINCSS will check unused CSS selectors in your code.
Specific HTML+CSS implementation
Once we have set up our whole project, is time to start thinking about the specific CSS code we are going to write, then you should think about: