Let’s get Sassy today with this little yet very useful Sublime Text 2 breakpoint snippet hand made by James Nowland and obviously editable as you wish.

If, like me, you code a lot of responsive sites, chances are that you work with Sass and end up putting half a million @include breakpoint lines, working your site’s scss the modular way… as you do.

Well, this little snippet will surely reduce your work, by allowing you to tabTrigger mq (or whatever you wanna call it) into the full @include breakpoint desired code lines.

Open Sublime, go to Tools, then New Snippet. Copy and paste James’s code in there, and save. Your’re done. You can type mq and tab in your scss and enjoy the ride.

The Snippet:

<snippet>
  <content><![CDATA[
@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) {
    ${2:}
}
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>mq</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

The result in Sublime:

The post Add a neat little breakpoint snippet to your Sublime appeared first on shoogle designs' blog.

Today, I’d like to talk about a package which I reckon will help a lot of folks keen to keep a hand on their project task management, without having to deal with getting-things-done apps way too complex for their own good.

Don’t get me wrong, I am a big fan of Wunderkit, Producteev, et al, but most times, a list of tasks and checkboxes are way better than the whole nine yeards app that lists your tasks, interacts with twitter, and makes coffee.

Let’s talk plain tasks then, and as a matter of facts lets talk PlainTasks, as the package I wanna introduce is named like so.

PlainTasks is a Sublime Text 2 plugin allowing you to create simple yet powerful todo lists in a few clicks and/or shorthands. I personally recommend to use Plaintasks at project level and create a single todo list at the root of each of your project’s directory structures.

I absolutely love it. It’s simple to install (look it up in your Package Control), and mega simple to use. No need for fancy stuff, all you need to do is create section, tasks, archive, and keep track (once again) at project level of all the nitty gritty things you (and your team) need to do.

If you put your project files in a shared dropbox folder like most folks do, then, do not change anything and make sure your .todo file is there at the root, and up to date for your team.

For full details go to aziz’ github page.

For more posts on SublimeText 2, click da link.

The post Task management within Sublime Text 2 with PlainTasks appeared first on shoogle designs' blog.

Back for a new blog post on the text editor of the moment, with a couple of new tips to increase your productivity while working with Sublime Text 2.

Sidebar enchancements

Working on Sublime Text 2 with the sidebar visible is a must when juggling with a large number of files and folders. Right-clicking on the folders and files gives you the opportunity to create files on the fly, delete unwanted files and folders quickly, and rename your elements while working on them.

However, you may not be aware of the sidebar enhancements plugin which gives you a wider array of options from the very same location. Use your Package control to install Sidebar enchancements and take your sidebar right-click options to a higher level.

Once the plugin intalled, you will be able to see new editing features such as ‘Find and replace’, ‘Copy as text’ (and more), access to project management capabilities, and also a very much wanted ‘Open in browser’ feature which will take your page to your default browser. Neat.

Save your Work environments as a Projects!

When I started using Sublime Text 2, I got used to drag my folders into the sidebar and start working from there. For a wee while now, I have been saving all my work as independent projects, and it does make much more sense to do so.

For starters, you only have to go to Recent Projects to reopen what you had been working on lately. On top of that, it is so much cleaner when switching projects. Instead of having all your folders visible in the sidebar, simply use Ctrl+Cmd+P to bring each and every project independently on screen.

To view the rest of my Sublime text 2 tips: click here.

The post Sublime Text 2 Tips: Sidebar enhancements and Projects appeared first on shoogle designs' blog.

The cool thing about Submine Text 2 is you can literally sit all day talk about its many features and plugins.

We’ve already talked LiveReload, Edit History, Distraction-free mode, ColorPicker, and Placeholders, and today we’re going to bring out the Karma of Sublime Text 2 by installing (and taking a look at) the Zen Coding plugin.

For those of you who wouldn’t be familiar with Zen Coding, it is a set of plugins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist. Created by Sergey Chikuyonok in 2009 and actively developed by the Zen Coding community, the plugin has been integrated in all text editors, TextMate, Coda, Espresso and sublime Text to name only a few.

Right, so let’s get down to business, use your Package Control to install Zen Coding.

Once this done, you can start using the full power of the plugin by entering code ‘shorthands’, tab away and start saving you some valuable coding time.

Examples

Simply type your elements such as html, body, or div and use the tab key to get the corresponding HTML elements.

<html></html>
<body></body>
<div></div>

Here are more advanced examples:

Type link:css and use the Tab Key to get the link to your style.css.

Same thing with a table 2 rows 3 columns: table>tr*2>td*3 + TAB

The ‘ * ‘ sign will be your multiplier, while the ‘ $ ‘ sign will increment automatically.

Hence, ul>li*3 + TAB will get you a nice unordered list with 3 items.

ul>li#id-$*6>a[href=# title=title-$] + TAB will display an unordered list of 6 items, each of them having a specific ID and containing a blank link with a specific title… How about that.

… while html>head+body>nav>ul>li.first+li*4+li.last + TAB will give you this:

On top of that, you can even use wrap tags to play with plain data.
For example, you are building the navigation menu of your next site, and have started entering the titles of the sections like so:

About
Portfolio
Blog
Contact

Simply select the four sections.

Use Ctrl+alt+enter and start typing your Zen Coding wrap tag (haiku), in this case nav>ul>li* will get the job done. Note, you don’t even need to specify the number of list elements. The * multiplier will be enough, clever little bugger.

You get the point I guess, so here’s the full list: Zen Coding Cheat Sheet.

I don’t reckon you should go overboard with long combinations of shorthands but having been playing with this plugin for quite some time now, i can guarantee Zen Coding is a great way to improve your productivity in coding.

The post Boost your Sublime Text 2 with Zen Coding appeared first on shoogle designs' blog.

Following a couple of articles on Package Control, Livreload, and the Edit History package, here’s a new post of a few more Sublimetext 2 features you may not know about, which I find rather useful.

Distraction-free mode

We all have spells in a project where heavy coding without glancing at the resulting product browser side occurs. If you’re a fan of the minimalistic approach like I am (yes I have been praising about this already), then you will follow me on this. Use the distraction-free mode Sublime Text 2 offers.

I usually use it (Ctrl+Shift+Cmd+F) with a 2 column layout (for my HTML and CSS) and as nothing else (as in NOTHING else, even not a menu bar) is disrupting you in your work, you can gain in productivity and concentrate on your task at hand.

Another tip I give you, if you (like me) are no writer but like the minimalistic approach of applications such as Clean Writer Pro , then I encourage you to use Sublime Text 2′s distraction free mode (this time with a single column layout) and have nothing but your writing on screen to help you concentrate (Use Plain text as your file type).

I can already hear a few moaners from here, saying Sublime Text 2′s writing area is not wide enough for writing articles and essays. Actually you’re right it isn’t, but you can change the distraction-free mode settings as stated here and increase the wrap-width value to whatever value is suitable for you. I personally went with 120 and I am currently writing this post undistracted!

Got to: Preferences > Settings – More > Distraction-Free User and add this:

{
	"wrap_width": 120
}

ColorPicker

ColorPicker is another package you may want to install in your favorite code editor (using the Package control as shown below) if you want a bit more details and fine tuning on your color selection. It does exactly what it says on the box, it helps you pick your colors by bringing up a color selection widget you may find in TextMate if I’m not mistaking.

Use Cmd+Shift+C to bring it up.

PlaceHolders

Finally, PlaceHolders, yet another package to install through the package control.
You may have clicked on the Tools > Snippets command, and you may not have seen much.

Get this repository installed, and you’ll get a handful of useful HTML placeholder content such as lorem ipsum text, forms, images and much more.

The post Sublime Text 2 tips: Distraction-free mode, ColorPicker, and Placeholders appeared first on shoogle designs' blog.

Following last week’s very much appreciated post on Sublime Text 2′s Package Control and Livereload plugin, I thought I would keep the momentum going with a new tip (funny how you discover stuff almost every day with Sublime Text 2) on the popular code editor’s editing history.

I am not a fan of the bookmark feature within any code editor. Obviously, there are some parts of your HTML, CSS or JavaScript where you’re going to come back all the time, but being able to browse through your latest changes without having to bookmark the whole document is something quite appealing to me.

Therefore, let me introduce you to Stuart Knightley’s Edit History plugin (github location here + drop your congrats to Stuart here), allowing us to navigate back and forth between edit locations, providing the new edit location is created further than 5 lines away from the previous one (setting changeable in the package).

Practical Example

Right click on your preferred code editor, not a lot to see here, right?

Go ahead and install Stuart’s Edit History plugin (you will need to have Sublime Text 2′s Package Control already installed for this – see my previous post) as shown below:

You can already notice, that a couple of new options are showing up as you right-click the editor now.

Let’s test the plugin now. I’m still on the index page of the 320 and up framework, and I will make a couple of changes to the document, adding a bit of text here…

… and there (enabling in the process the ‘Back’ option):

Right, let’s now navigate through our changes, and see where our ‘Back’ and ‘Forward’ options take us…

Wicked.

The post Sublime Text 2 Tip: Edit History appeared first on shoogle designs' blog.

I’ve been using Sublime Text 2 for a few months now, as it’s mega fast, it supports multi-selection, and it’s got cool features like the distraction-free editing mode. In 4 words, “I fucking love it”.

Since i’m far from the only one getting hooked on the app as the text editor for code is becoming more and more popular, I thought I would share a couple of things with you.

Sublime Package Control

For those of you who still wouldn’t know it, Sublime Text 2 can be ‘equipped’ with a full-featured package manager helping you discover, install, update and remove packages (on top of this, it supports GitHub).

To install it, follow the Instructions stated here. I personally went for a manual install as shown below:

• Click the Preferences > Browse Packages… menu entry
• Browse up a folder and then into the Installed Packages folder
• Download Package Control.sublime-package and copy it into the Installed Packages directory
• Restart Sublime Text

Livereload

You may know about the LiveReload app monitoring changes in the file system, and refreshing the browser as soon as the file change has been saved. You can find the app and links to the mac app store and browser extensions here.

However, I stumbled upon another way of using the same functionality Livereload offers and this with Sublime Text 2. First of all, let’s install the Livereload package by using the package control (recently installed).
To do this, got to Preferences/Package Control and select Install Package as shown below.

Type Livereload and double click the package to install it.

Once installed, install the Livereload extension/add-on of your preferred browser.

• If you are using Chrome like me, go there. Note: If you want to use it with local files, be sure to enable “Allow access to file URLs” checkbox in Tools > Extensions > LiveReload after installation.
• For firefox lovers, select the followin add-on.

This done, all ou need to do is activate the Livereload extension by clicking the toolbar button (it will turn green to indicate that LiveReload is active), and fire away your changes in your code editor.

Practical example

I have downloaded the 320andup responsive boilerplate of Andy Clarke and placed it in my MAMP htdocs folder.

The chrome extension activated (green button), I can now edit the various 320andup files and see the changes happen live on the browser without refreshing it. In this case, I simply went with a brutal background change on the css file and saved it.

- Before Making a change on the CSS file -

- After (simply) saving the change of the CSS file -

The post Sublime Text 2: Package Control and Livereload appeared first on shoogle designs' blog.