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

<pre>
<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>
 <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 />
 </TaskOptions>
</pre>
2013
09/24
CATEGORY
css
Javascript
Web Development
TAGS


Leave a comment

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 {
        style.appendChild(rules);
    }
    head.appendChild(style);
2012
06/29
CATEGORY
css
Javascript
Leave a comment

Essential frontend development browser extensions

Here’s the tools I’m currently using for frontend development:
Firebug
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.

2012
04/16
CATEGORY
css
Javascript
Web Development
TAGS









Leave a comment

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

2012
03/19
CATEGORY
css
Web Development
Leave a comment

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;
}
2012
01/31
CATEGORY
css
Web Development
TAGS



Leave a comment

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');
2011
11/14
CATEGORY
css
Javascript
Web Development
TAGS

Leave a comment

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();
$("body").append(theElement);
2011
09/27
CATEGORY
css
Javascript
JQuery
Web Development
TAGS
Leave a comment

SASS and Visual Studio

Quick guide to perfect tools for using SASS in Visual Studio

Syntax highlighting, creating new files and compiling all without Ruby can be done with Mindscape Web Workbench.

Converting CSS to SASS can be done with the sass-convert foo.css foo.scss command or this online tool. Of course the sass-convert command will always be more up to date as it’s part of SASS. But of course you will need SASS and Ruby install to run it.

Code formatting isn’t a problem if you’re used to Ruby. If you’re not the default formatting from any converter is horrible. To convert it to a more ECMAScript style first remove all whitespace (you can leave the line breaks if you like). I use Notepad++ and just remove the indents with shift + tab. Then you can use any CSS cleaning/formatting tool such as Tabifier.

2011
08/17
CATEGORY
css
SASS
Web Development
TAGS





Leave a comment

Dotless and Combres

Either Dotless or Combres for compiling the .less
http://www.dotlesscss.org/
http://combres.codeplex.com/

For syntax highlighting.
http://www.mindscapehq.com/products/web-workbench

If you use ReSharper then it’s best to disable it for .less files.

2011
07/22
CATEGORY
css
Web Development
TAGS



Leave a comment

Great tool for calculating EM sizes

http://drewish.com/tools/vertical-rhythm

2011
03/16
CATEGORY
css
Web Development
Leave a comment

Recent entry

Archive

Category