Jack Brewer

CSS+ TextMate and Sublime Text Bundle

Tue, 10 Apr 2012 00:00:00 +0000

The CSS+ bundle is a project I've been working on for a while. It is a vast collection of CSS snippets and commands which has completely changed the way I write CSS.

When I started using TextMate for development I was amazed by the simplicity and flexibility of its Bundle Editor. This, coupled with existing bundles such as Minimal Design's mCSS bundle inspired me to find ways to use it to speed up my general development. While the mCSS bundle is an amazing piece of work, I felt it could do so much more. With this in mind, I started my own bundle, with the view that I would never need to write a line of CSS by hand again.

Using the bundle

The CSS+ bundle contains (nearly) every line of CSS you will ever need to write, all mapped to Tab Triggers. All the shortcuts have been set up so you can write the first letter of each word in the line you want, then hit tab to expand the full line.

c  -> colour: #fff;
b  -> border: 1px solid #777;
mt -> margin-top: 10px;
ts -> text-shadow: 1px 1px 2px #000;

Multiple Choice

You can also add the first letter of each word within values for extra control.

db  -> display: block;
di  -> display: inline;
dib -> display: inline-block;
dn  -> display: none;

The value is optional for some properties and if omitted, a multiple choice drop-down appears to assist you in finishing the line.

oa -> overflow: auto;
o  -> overflow: auto;  
      overflow: hidden;
      overflow: scroll;

Exceptions

As there are so many CSS properties available, there are some inevitable clashes. To avoid these, some properties use the first two letters of their initial word as their triggers. While this seems confusing, after a few uses it becomes second nature. It also avoids confusing multiple choice drop-downs with too many mixed values.

fl  -> float: ; /* f is reserved for font */
flr -> float: right;
cl  -> clear: ; /* c is reserved for color */
cll -> clear: left;
bg  -> background: ; /* b is reserved for border */
bga -> background-image: url("image.png");

Tab Stops

If you write a line where the value is customisable, for example a colour or pixel value, the editable value will be automatically highlighted for you to edit.

w -> width: 10px;
c -> color: #fff;

Multiple Tab Stops

Some snippets have multiple tab stops to allow complete control. At each step, the value can be changed - or removed, with another tab press highlighting the next value. Pressing tab a final time will always leave you at the end of the line, ready to continue coding.

/* Continue tabbing to move through all values*/
b -> border: 1px solid #777;
  -> border: 2px solid #777;
  -> border: 2px dashed #000;
  -> border: 2px dashed #000;

Nested Tab Stops

Another cool feature of the bundle is that some snippets contain nested tab stops. This means that, for example with background position, the default value of 0px is automatically selected. This means you can write a percentage or keyword in its place. If instead, you press tab again, the selection changes to just the unit part, allowing you to change the pixel value without the need to type px each time.

/* Continue tabbing to move through all values*/
bgp -> background-position: 0px 0px;
    -> background-position: 0px 0px;
    -> background-position: 5px 0px;
    -> background-position: 5px 0px;
    -> background-position: 5px top;

Pseudo Classes, Pseudo Elements and Attribute selectors

As well as speeding up writing properties and values, the CSS+ bundle helps with selectors.

a:h     -> a:hover
li:fc   -> li:first-child
span:b  -> span:before
span::b -> span::before
[       -> [attr="value"]

Special Values

Some properties can be triggered in multiple ways, to quickly reset values to empty or default values. As with the mCSS bundle, these can be triggered by repeating the final letter of the trigger.

m  -> margin: 10px;
mm -> margin: 0;
l  -> left: 10px;
ll -> left: 0;

CSS3

I've tried to include as many CSS3 properties and selectors as possible, but with more frequently surfacing there are probably a couple missing. If you find any that don't appear in the CSS+ bundle, you can either add an issue on GitHub which I will fix, or fork the bundle and submit your own pull request.

All the CSS3 properties in this bundle are prefix free. This is a conscious choice, as many people already have their own ways of dealing with these, either by hand or through a service such as Prefixr. I've created a separate TextMate bundle and Sublime Text snippet as my way of adding relevant prefixes.

Use with TextMate

This bundle has a well organised menu structure, so for an overview of all the commands and snippets available, go to Bundles -> CSS+ in the menu bar. The snippets are organised into groups, with each snippet listing its keyboard trigger for reference. At the bottom of the menu is an 'Update Bundle via Git' option which will ensure your version of CSS+ is up to date.

I have also included a handy colour conversion command to speed up switching between colour formats. With your caret (text cursor) on the correct line, press cmd + ctrl + c to switch between Hex, RGB and RGBa formats. This command currently only works on lines which contain one colour.

Use With Sublime Text

I switched from TextMate to Sublime Text a while ago, as it is a much more feature rich editor. One of the deciding factors for the switch was that Sublime supports TextMate bundles. That said, the support isn't flawless. The colour format command doesn't yet work and it sometimes has trouble if you delete a set of nested tab stops, with it still requiring that you tab through all of the removed tab stops before allowing you on to the next snippet.

Even with these drawbacks, the CSS+ bundle if definitely a must for anyone who writes CSS. Sublime also adds the advantage that users on Windows and Linux can make use of this normally OSX bundle.

Download

The best way to get your hands on this bundle is to clone it using Git. This means you can easily update it when changes are made. Installation instructions, as well as a regular download version of the CSS+ bundle can be found on GitHub.

Download / Source

CSS iPhone Icon

Mon, 12 Mar 2012 00:00:00 +0000

RSS Readers: This article contains a live demo which probably isn't going to work in your RSS reader. View the full post to see it in action.

This is the result of a long evening playing with box shadows and gradients — an iPhone icon made with CSS.

iPhone

Make sure you hover for yet more outrageously complicated styling.

You've probably seen similar experiments where people have used hundreds of empty <div> and <span> elements to recreate similar details to a pixel perfect level. I decided to take a different approach and write my optimal HTML first.

<span class="iphone">iPhone</span>

That's all there is! Although limiting, I still managed to achieve a fairly impressive result using this one element and its :before and :after pseudo elements. The <span> element itself forms the iPhone body, the :after pseudo element handles the lock / home screen whilst the :before pseudo element forms the home button.

The bulk of the styling makes use of multiple background gradients, sizes and positions. Combine that with the fact that every CSS3 property is duplicated 5 times with various vendor prefixes and the overall CSS file length of 200 lines doesn't seem too crazy.

iPhone

Here is the exact same icon, this time scaled up three times to allow you to see the finer details (or lack of).

There is a tiny amount of JavaScript in use on this demo — it updates the :after pseudo element's content property to ensure the icon is always displaying the correct time.

You may also notice at this zoom level that the icon is modelled on an iPhone 3GS — this demo has been living on my hard drive for a while!

Disclaimer: This is an experiment and was a great learning experience. I would never recommend using something this complicated or pointless on an actual site.

Demo Source

Multiple Document Windows In Photoshop

Wed, 07 Mar 2012 00:00:00 +0000

Multiple document windows are a little known Photoshop feature that saves a lot of zoom effort! To open a second window for an open document, go to Window > Arrange > New Window for [filename].

This comes in very useful when you need to zoom in to a high level but would still be able to see realtime changes to your document at 100%. I mainly use this when designing icons, with two or three copies of a document open simultaneously, each at a different zoom level.

Animated CSS Progress Bar

Thu, 01 Mar 2012 00:00:00 +0000

RSS Readers: This article contains a live demo which probably isn't going to work in your RSS reader. View the full post to see it in action.

There are countless examples of people making progress bars using nothing but CSS — this one is different.

There are no images, the HTML is extremely minimal and the animation is handled by a pseudo element. Unfortunately this means it's only animated in Firefox for now.

85% Complete

The CSS above is interactive — change the width value in Firefox to see the animation in action.

This is the only example I have seen so far that makes use of a negative background-position to animate the colour of the bar from red, through orange and yellow, to green — depending on the amount of progress made.

For those of you who don't want to wake the slumbering beast that is Firefox, here are a few more examples of the colour changing goodness that you are missing.

0% Complete

25% Complete

50% Complete

75% Complete

100% Complete

I've hard-coded non-animated widths on these to illustrate how the progress bar looks at vartious stages of its transition, at 0%, 25%, 50%, 75% and 100% progress.

Pros

The markup is beautiful! No wrapping or empty elements.

<div role="progressbar">85% Complete</div>

Switching the <div role="progressbar"> for a <progress value="85%" max="100%"> would make this semantically better but browser support for styling progress elements is extremely poor at the moment.

An actual implementation of this would also need some method of updating the value(s) within the markup.

Cons

This is a prototype that is not yet ready to be unleashed on the world. I have set up this demo to animate using CSS transitions whereas a real implementation would probably need some JavaScript interaction to dynamically calculate the user's actual progress. Using JS to handle the animation would also negate some of the browser compatibility issues which the :after pseudo element causes.

I could also have increased browser support for this demo by using extra markup instead of pseudo elements but this goes against what I was trying to achieve.

Demo Source

Google Maps Template

Wed, 29 Feb 2012 00:00:00 +0000

I often find clients want good Google Maps integration on their sites — Some more than others! After the first few, I decided to put together a handy Photoshop document containing all the common assets needed when coming up with concept designs involving maps.

Some components in the template have been converted to vector for easy resizing, while others (such as the zoom control) have been split into parts. I've tried to keep all components as pixel perfect as possible.

Download

Mapping A Hash Keyboard Button In OSX

Fri, 24 Feb 2012 00:00:00 +0000

When I switched to using a Mac, one of the very few problems I had was the lack of a hash key on my (UK) keyboard. For the average user, this probably isn't too much of an issue but for someone who codes, I can't live without it! Alt + 3 is slightly too awkward a shape to pull off frequently with one hand.

To remedy my problem, i needed to find a donor key on my keyboard. The § key looked like the perfect candidate (I even had to google it to find out what it was!).

The section sign (§, Unicode U+00A7, HTML entity §), also called the "double S", "sectional symbol" or signum sectionis, is a typographical character used mainly to refer to a particular section of a document, such as a legal code.

Well now you know too.

Now for the magic. If you don't already have it, you will need to create a DefaultKeyBinding.dict file here:

~/Library/KeyBindings/DefaultKeyBinding.dict

Once you have this file, open it and add:

{
  /* Map # to § key*/
  "§" = ("insertText:", "#");
}

Save that, restart your Mac and you will be the proud owner of a new hash key!

OSX Cursors PSD

Wed, 22 Feb 2012 00:00:00 +0000

One of the hardest things about delivering flat Photoshop mockups to clients is the lack of interaction that you would get with a live demo. Showing off your well considered hover state, tooltips or other interactive elements can be quite confusing.

A good way to help this confusion is by including cursors in you designs to help illustrate the intended action.

Download

Disabling Caps Lock on OSX

Thu, 16 Feb 2012 00:00:00 +0000

The majority of the code I write is CSS or HTML and I have spent a long time setting up hundreds of ~~TextMate~~ Sublime Text 2 tab triggers^[1] to speed up the process. The thing that slows me down again is my clumsy, non-touch typing finger frequently mashing the caps lock key instead of the tab key.

Turns out it is easy to disable caps lock in OSX. Go to System Preferences > Keyboard > Modifier Keys and choose 'No Action' in the Caps Lock dropdown.

In the few months that I've had it disabled, I can count the number of times I've needed caps lock on one finger. Compared to the frequency of my accidental activations beforehand, I'm definitely happy with the choice!

TextMate / Sublime Bundles: HTML, CSS.