Archive for the ‘ css ’ Category

PNG Optimisation File Watcher for WebStorm

Here is a great file watcher that will optimise any PNG file added or modified in the project. It uses OptiPNG and a ‘scope’ called ‘PNG Images’ that targets only PNG images

<TaskOptions isEnabled="true">
 <option name="arguments" value="-strip all -v $FileDir$\$FileName$" />
 <option name="checkSyntaxErrors" value="true" />
 <option name="description" value="Uses OptiPNG to optimise new images" />
 <option name="exitCodeBehavior" value="ALWAYS" />
 <option name="fileExtension" value="Images" />
 <option name="immediateSync" value="false" />
 <option name="name" value="PNG Optimisasion" />
 <option name="output" value="" />
 <option name="outputFilters">
 <array />
 <option name="outputFromStdout" value="false" />
 <option name="passParentEnvs" value="true" />
 <option name="program" value="$PROJECT_DIR$/Tools/OptiPng/optipng.exe" />
 <option name="scopeName" value="PNG Images" />
 <option name="trackOnlyRoot" value="false" />
 <option name="workingDir" value="$ProjectFileDir$" />
 <envs />

Adding CSS to a page through Javascript

There is no sensible reason to use this but it comes in handy as a hack for CMS systems – when there is no other choice!.

var head = document.getElementsByTagName('head')[0],
                style = document.createElement('style'),
                rules = document.createTextNode('.coming-soon-state-selection{margin:25px 0;}.coming-soon-table{width:593px;}.coming-soon-table .title{overflow:hidden;}.coming-soon-table .title h3{float:left;font-size:1.375rem;}.coming-soon-table .title p{float:right;line-height:2rem;padding-left:22px;}.coming-soon-table .coming-soon-state{border-bottom:1px solid #dbdbdb;}.coming-soon-table .coming-soon-state .category .category-title{min-height:40px;border-top:1px solid #dbdbdb;border-bottom:1px dotted #ababab;overflow:hidden;}');

    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = rules.nodeValue;
    } else {

Essential frontend development browser extensions

Here’s the tools I’m currently using for frontend development:
Web Developer – All sorts of useful tools that you don’t get with the browser standard developer tools
PixelZoomer – Screengrab, zoom, measure and colour pick
FireRainbow – Adds JavaScript syntax highlighting in Firebug
Dust-Me Selectors – helps with clearing out redundent CSS
Empty Cache Button – Adds a button that’s a shortcut to clear the cache
FireDiff – Track changes in the DOM

Visual Event – Bookmarklet that displays JavaScript events on the current page
XRay – Bookmarketlet gives you tools for looking at layout in older browsers
CompanionJS – Gives you a console in IE6/7/8! Plus other JavaScript debugging tools.

Base64, optimised, 8bit with full alpha PNG workflow

This is a quick guide to creating 8bit PNGs with full transparency and embedding resources in CSS using base64 encoding. If you want to know why you’d want to do this have a look at this and this.

Export full 24bit PNGs with transparency from Photoshop. Use PNGoo to create an 8bit PNG with full transparency (It’s just an GUI for PNGQuant. If you need Mac or command line check out their site) . PNGoo will also optimise the PNG.

Now you have your correctly compressed image we need it included in the CSS as base64. Two good tool for this. If it’s just the one file then Visual Studio Extension – Web Essentials allows you to right click on any url in your CSS file and convert it to base64. If you want to batch process any number of CSS files with any number of references you can use the Java application CSSEmbed. This will scan the CSS for any URL and convert it to base64.

If you want to optimise any PNG, 8bit or 24bit then PNGOptimizer is a good tool. Just drag and drop and it will strip out the unnecessary information like meta data.

PNG Base64 Toolkit, a bundle of the apps mentioned above

Font-face Fonts as Symbols Workflow – Free

Adding a custom font to a site as cross compatible way to add scalable graphics alongside type is a great concept. But in the past I’ve struggled to find the right tools for free. Hopefully the following will stay free/available.

Step one:
Type Lite – This allows you to create your symbols/glyphs. Unfortunately it doesn’t allow you to import vectors from anywhere else, such as Illustrator. But I can’t find anything for free that is better. From this you will save out a .TTF

Step two:
Upload your new .TTF to Font Squirrel’s font-face Generator and create kit with optimal settings.

Step three:
Add the example CSS the Font Squirrel gives you to your site and then add your symbols to the site as CSS content (to ensure your markup stays semantic).

h2:after {
	font-family: siteSymbolsRegular;
	content: ">";
	display: inline;
	height: 16px;
	width: 8px;
	overflow: hidden;
	white-space: nowrap;

Non-JQuery script class switcher

Been using the JQuery equivalent for some time. Just had the need to convert it, so thought I’d save it.

It switches a ‘no-script’ class to a ‘script’ class on the HTML element and can be run in the head of the document.

var docElement = document.documentElement;
docElement.className = docElement.className.replace( /\bno-script\b/ , 'script');

Some debug code to isolate an element

This is great if you have layout issues and want to simplify things. Just add a selector for the only element you want on your page. In the following its page header.

var theElement = $(".page-header");
$("body > *").remove();