TextWrangler TextWrangler TextWrangler is an all-purpose text and code editor for Mac OS X, based on the same award-winning technology as BBEdit, our leading professional HTML and text editor. We will be eventually retiring TextWrangler from our product line, and so we encourage anyone interested in TextWrangler to download and use BBEdit instead. We’ve put together a handy chart comparing BBEdit and TextWrangler, to help you out. Should I upgrade to BBEdit? BBEdit is TextWrangler’s elder sibling. A better free alternative BBEdit offers a 30-day evaluation period, during which its full feature set is available. After the evaluation period, BBEdit provides a modified set of features, which incorporates all of TextWrangler's features, and offers unique features of its own. How do I get BBEdit? Download BBEdit here. If you already have BBEdit and would like to update to the latest version, please go to our updates page. How do I get TextWrangler? Download TextWrangler here. TextWrangler System Requirements
Icon System with SVG Sprites I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system. First let’s cover how it works. A nice way to handle your icons is to have a folder full of .svg files. They can be colored, not colored, multiple shapes, sizes, whatever. You can let Illustrator (or whatever) save it however, with all the cruft that comes along for the ride: Combine the .svg files You can manually do this if you want. It should just be an <svg> tag, with a <defs> tag (which just means you are defining stuff to use later), and then a bunch of <g> (group) tags. Again you can do that by hand, but of course that’s a bit laborious. If you’ve never used Grunt, you can do it. You can install it with: npm install grunt-svgstore --save-dev Make sure the task is available with: grunt.loadNpmTasks('grunt-svgstore'); <! Browser Support
CSSTidy Writing efficient CSS selectors 17 September, 2011 Efficient CSS is not a new topic, nor one that I really need to cover, but it’s something I’m really interested in and have been keeping an eye on more and more since working at Sky. A lot of people forget, or simply don’t realise, that CSS can be both performant and non-performant. This can be easily forgiven however when you realise just how little you can, err, realise, non-performant CSS. These rules only really apply to high performance websites where speed is a feature, and 1000s of DOM elements can appear on any given page. CSS selectors CSS selectors will not be new to most of us, the more basic selectors are type (e.g. div), ID (e.g. More uncommon ones include basic pseudo-classes (e.g. Selectors have an inherent efficiency, and to quote Steve Souders, the order of more to less efficient CSS selectors goes thus: ID, e.g. Quoted from Even Faster Websites by Steve Souders The difference in speed between an ID and a class is almost totally irrelevant. N.B. #content {}
Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts. Let's compare. Icons are Vector There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them. In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over. CSS Control The big win for inline SVG here is probably multi-color icons. Positioning Weird Failures Forced Failures Semantics Accessibility Ease of Use Browser Support Winner It all comes down to browser support.
Dynamic Drive CSS Layouts- CSS Frames CSS Frames Layouts New (Dec 26th, 06'): The following are a collection of CSS Frames layouts, where select columns or rows inside the layout remain static even when the page is scrolled, mimicking a frames like behavior. Page 1 of 2 pages 1 2 > This is a two columns liquid layout with the left column being static, always in view. This is a two columns liquid layout with the right column being static, always in view. This is a two rows liquid layout with the top row being static, always in view. This is a two rows liquid layout with the bottom row being static, always in view. This is a three columns liquid layout with the leftmost and rightmost columns being static, always in view. This is a mixed columns and rows layout (two main columns, later split into two rows), with the leftmost column and top row being static, always in view. This is a mixed columns and rows layout (two main columns, later split into two rows), with the leftmost column and bottom row being static, always in view.
Downloads- 978 Grid System for Web Design Introduction Welcome to 978.gs. This website is owned and operated by Brothers Roloff, LLC. By visiting our website and accessing the information, resources, services, products, and tools we provide, you understand and agree to accept and adhere to the following terms and conditions as stated in this policy (hereafter referred to as 'User Agreement'). This agreement is in effect as of Jan 22, 2011. We reserve the right to change this User Agreement from time to time without notice. Responsible Use and Conduct By visiting our website and accessing the information, resources, services, products, and tools we provide for you, either directly or indirectly (hereafter referred to as 'Resources'), you agree to use these Resources only for the purposes intended as permitted by (a) the terms of this User Agreement, and (b) applicable laws, regulations and generally accepted online practices or guidelines. Wherein, you understand that: a. b. c. d. e. f. g. h. i. Limitation of Warranties Governing Law
Please Stop "Fixing" Font Smoothing - The Usability Post I wrote two posts on the topic of WebKit font smoothing before, but unfortunately the situation has grown worse since then. In allowing the designer to pick their own font smoothing mode with the -webkit-font-smoothing CSS property, WebKit developers have opened up an opportunity for typographic abuse, namely, the disabling of subpixel font rendering. As I mentioned before, WebKit gives designers three font smoothing modes: Nothing, which gives you jagged fontsSubpixel-rendering, i.e. the default font smoothing mode that is used for most other stuff on your desktop OS (mobile devices don’t use subpixel rendering due to having to suport both vertical and horizontal screen orientations)Antialiased, which disables subpixel-rendering and smoothes the font on the level of the pixel, as opposed to the subpixel. Why the choice? Abusing antialiasing But upon closer inspection, antialiased text is always blurrier than subpixel rendered text. It’s not a “fix” Why do designers keep misusing it?
Merging Realities: Skeuomorphic Design Infographic Auditory skeuomorph This type of skeuomorphism can be easily illustrated with audio effect that imitates that sound of the camera shutter while you are taking pictures with your cell phone. You know that there is no mechanical shutter in your device but it does exactly the same sound like its real life analogue. Visual skeuomorph Visual skeuomorphism refers to using various textures (wooden, metallic, paper etc.) which will emulate design of things from the real world. Skeuomorph design stands between minimalistic and functionally-oriented designs. Spoke patterns Various spoke patterns in automobile hubcaps and wheels resembling earlier wheel construction (wooden spokes or wire spokes). Leather grain Artificial leather grain on items that traditionally used leather but now use plastics, such as car dashboards and books. Nonfunctional pockets Nonfunctional pockets in clothing. Cork textures Cigarettes with the paper around their filter printed to look like cork. Flame-shaped light bulbs Familiarity
iconic/illustrator-svg-exporter Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.