Toolbox and Resources

KonFusion

So I was thinking it'd be handy to have a list of resources & a 'toolbox' of sorts, containing things we use every day/week/month, such as Compass, Animate.css, Prefix-free, or maybe even ST2 plugins etc.

I'll come back to edit this in an hour or 2 when I finish compiling my list, but feel free to post your own in the meantime. Any handy links, the text editor you use, sites you visit regularly, plugins, JavaScript libraries, resourses etc and once we get the ball rolling I can add them all to this post along with my own. (Might need mod help to update once my editing-time-window closes.)

If we could categorise them in bullited lists that'd be handy. Akin to:

Responsive design resources:

Text editors:

Editor Plugins:

Wordpress plugins:

Ecommerce solutions/plugins:

CSS frameworks:

and so forth.

Thoughts?

KonFusion

Taking longer than expected :pac:

Any sass users out there with custom mixin sets they want to share?

KonFusion

Relates - http://net.tutsplus.com/articles/what-are-you-using/

Graham

Current tools:

Text Editors:
Coda 2 for as text editor (just started trying it) synchs nicely with iPad version.
Cloud9 http://c9.io - online IDE

Rested - for testing JSON feeds
RegexMatch - for testing/writing regular expressions.

_ciaran_

Adobe Illustrator - mockups, logos and icons

Big Stock Photo - Stock Imagery

Sublime Text 2 - Text Editor

Codekit - Compiles sass & live browser refresh amongst other things

HTML5 Boilerplate or Bones (if wordpress) - framework

Broswerstack - Testing cross browser compatability

Responsive grid system or Skeleton - Responsive grid

Filezilla - FTP/SSH

Sequel Pro - MySQL db management

Github - Version Control

Trojan

KeePass - password management (open source)
Bitvise Tunnelier - SSH, sFTP - lovely client (commercial use free with conditions)

I'm not getting into that whole text editor debate again

redman85

http://zmoazeni.github.io/csscss/

Came across this handy ruby gem for finding redundant css declarations. Also supports SASS and LESS.

miralize

For anyone using Fitvids these last few years, heres one that doesn't rely on jQuery

http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/

Also a very nice (free) icon set from Adam Whitcroft

adamwhitcroft.com/batch/

smcelhinney

_ciaran_ wrote: »

Codekit - Compiles sass & live browser refresh amongst other things

Agree with all except this one. Used Codekit for Sass then I copped on and just typed

sass --watch styles.sass --style=compressed

into Terminal, and never opened Codekit again.

miralize

smcelhinney wrote: »

Agree with all except this one. Used Codekit for Sass then I copped on and just typed

sass --watch styles.sass --style=compressed

into Terminal, and never opened Codekit again.

I still kind of like using Codekit. Its setup once and just run the app when you're developing.

_ciaran_

It's the ability to open and save whole projects in codekit that makes it essential to my workflow. I couldn't be arsed inputting file directories into terminal*, especially when working on multiple projects, when codekit has all my projects loaded up already.

Also, live refresh FTW.

*Edit: Never mind, just realized you don't need to declare the directory when using command line.

yoyo

Notepad++ is great, have tried changing to Sublime Text which is also very nice but find notepad++'s search features to be better. NPP is also free .

Nick

miralize

http://shouldiuseacarousel.com/

redman85

Livereload app for the mac is on sale today.

Was €9.99....now €0.89

iTunes link

http://livereload.com

Extremely useful app if your not to comfortable using the terminal.

miralize

Not working for ST3 users or for Pre-processing projects yet, but Emmet.io (the guys behind what was previously known as Zen Coding), released a cool tool that allows you to edit css in realtime in Chrome (or any device that uses web inspector) using ST2

http://livestyle.emmet.io

KonFusion

https://github.com/scottjehl/picturefill

Picturefill - Responsive image solution.

-

http://modernizr.com/

Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

-

http://xscopeapp.com/ - On screen ruler thingy

-

http://yeoman.io/

Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

-

http://smacss.com/ - Scalable and Modular Architecture for CSS

-

http://bourbon.io/ - Sass mixin library

-

Adobe edge inspect, for cross browser testing and what not - http://html.adobe.com/edge/inspect/

-

http://johnpolacek.github.io/superscrollorama/ - The jQuery plugin for supercool scroll animation

-

The Big Web Show - Podcast http://5by5.tv/bigwebshow

-

http://businessologyshow.biz/ - 'A podcast about the business of design and the design of business'. (In it's early stages so quality isn't as great as other 'big' podcasts, but it's been promising so far).

miralize

I'm addicted to looking at brand guidelines, spend a good 30 mins reading this Jamie Oliver one

http://dl.dropboxusercontent.com/u/107364/FRV-Brand-Guidelines-%28Final%29.pdf

KonFusion

miralize wrote: »

I'm addicted to looking at brand guidelines, spend a good 30 mins reading this Jamie Oliver one

http://dl.dropboxusercontent.com/u/107364/FRV-Brand-Guidelines-%28Final%29.pdf

Got any more? Love these.

tricky D

miralize wrote: »

I'm addicted to looking at brand guidelines, spend a good 30 mins reading this Jamie Oliver one

http://dl.dropboxusercontent.com/u/107364/FRV-Brand-Guidelines-%28Final%29.pdf

http://www.sitepoint.com/create-a-style-guide-for-your-brand/

Used to enjoy doing these up and like yourself, reading others'.

KonFusion

miralize wrote: »

Not working for ST3 users or for Pre-processing projects yet, but Emmet.io (the guys behind what was previously known as Zen Coding), released a cool tool that allows you to edit css in realtime in Chrome (or any device that uses web inspector) using ST2

http://livestyle.emmet.io

Jsbin has a similar feature too - https://www.youtube.com/watch?v=nWRf570IJ68&feature=player_embedded

miralize

KonFusion wrote: »

Jsbin has a similar feature too - https://www.youtube.com/watch?v=nWRf570IJ68&feature=player_embedded

Yeah I saw that last year, Remy Sharp is a JS god.

I like how it works for production sites though

redman85

KonFusion wrote: »

http://smacss.com/ - Scalable and Modular Architecture for CSS

KonFusion do you us this approach for css? How do you find it? Is it essential another name for OOCSS?

Read the book a few weeks ago and thinking of using this method but would like to get someones experience with it.

KonFusion

redman85 wrote: »

KonFusion do you use this approach for css? How do you find it? Is it essential another name for OOCSS?

Yup, I think it's great, and yup.

If you're using Sass, check out this recent post: http://thesassway.com/advanced/modular-css-an-example

Read the book a few weeks ago and thinking of using this method but would like to get someones experience with it.

Not sure how I can 'explain' my experience with it. Good? ha. Can you rephrase that question maybe and I might be able to better answer.

As Snooka says:

! Feel free to take this in its entirety or use only the parts that work best for you. Or don’t use it at all. I understand that this won’t be everybody’s cup of tea. When it comes to web development, the answer to most questions is “it depends”.

So, use it. If its not for you then nothing lost. There's no 'one true way'. It's just another tool in the box. I think you'll find it beneficial though, especially if you work on a team.

You may even find you've already been doing something similar anyway.

redman85

KonFusion wrote: »

If you're using Sass, check out this recent post: http://thesassway.com/advanced/modular-css-an-example

Thanks for the link. Bookmarked and will give that a read tomorrow.

Came across this video the other day, some good tips when using Sass and OOCSS...

https://www.youtube.com/watch?v=GhX8iPcDSsI

Mister Man

Seen this website yesterday - http://subtlepatterns.com/
Lots of nice patterns on there for designers. Could be really handy.
They just released a plugin which allows you to get all the patterns straight to your photoshop without any of the messing around. It's 11.99$ currently. I would pay for it, if the updates to the library became for frequent. Worth keeping an eye on.

miralize

Its been around for a few years. They used to have a Photoshop .pat file for free.

miralize

Mentioneda few days before that I wanted something like this, but its here now! Edit Sass in realtime http://usetakana.com/

redman85

miralize wrote: »

Mentioneda few days before that I wanted something like this, but its here now! Edit Sass in realtime http://usetakana.com/

Whats the difference between these apps and running the grunt live reload task?

miralize

redman85 wrote: »

Whats the difference between these apps and running the grunt live reload task?

No save button in between I think. Thats what I assume anyway. Theres no point in a separate app otherwise

redman85

miralize wrote: »

No save button in between I think. Thats what I assume anyway. Theres no point in a separate app otherwise

Cool, saving has become second nature to me at this stage in sublime. Its nice to see new apps released tho

miralize

redman85 wrote: »

Cool, saving has become second nature to me at this stage in sublime. Its nice to see new apps released tho

Ahh now it'd be great to have browser and IDE side by side and seeing the changes in realtime..

Video here

redman85

git plugin for sketch - https://github.com/almonk/SketchGit

Also layervault released a free version of their version control for photoshop - https://layervault.com/