There are many tools built to help with CSS, and improved ones are constantly being created. The fresh tools we have for you in this article will greatly improve your work-flow, whether that be by solving validation or debugging snags, or taking care of many of those tedious repetitive tasks that every project requires, or by simply offering solutions to many of those tasks that are time consuming (like sprites) and at times challenging (CSS3 animations).
You’ll certainly appreciate this selection.
CSS Lint - Will hurt your feelings (and help you code better)
CSS Lint helps point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
CSS Lint →
CSS Prism - Enter the URL of any CSS file to modify its color spectrum
CSS Prism lets you enter the URL of any CSS file to view and modify its color spectrum. It also includes a bookmarklet to view the colors from any website.
CSS Prism →
Fractal - View code that is not supported in over 24 email clients
Fractal is a simple HTML and CSS Validator for email designers and marketers. It lets you see exactly which lines of code are not supported in over 24 email clients. It’s designed to make the lives of email designers easier so that they don’t have to go through checklists to make sure their emails work in all email clients.
Fractal →
CSS Pivot - Add CSS styles to any website, and share with a URL
CSS Pivot lets you add CSS styles to any website and share the result with a short link. It’s designed to let you invite others to submit improvements for your website. Just type in the website’s URL in the text field, click the button, and you’re ready to rock.
CSS Pivot →
PCSS - Shortcut-oriented Server-side CSS3 Preprocessor
PCSS is a shortcut-oriented server-side CSS preprocessor. Huh? Basically it helps you write CSS code by letting you use all that CSS3 ha to offer but with much less code and features like class nesting, server-side browser specifics, default unit, and variables.
PCSS →
Holmes - Stylesheet that highlights invalid and inaccessible HTML5 markup
Holmes is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML and HTML5 markup by adding one class. The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as missing required attributes on tags, potentially improvable markup, deprecated and non-W3C elements and attributes, and others.
Holmes →
Sencha Animator - Desktop app to create CSS3 animations
Sencha Animator is a desktop app that lets you create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices. You can animate text and images with smooth transitions, design buttons with gradients, and embed analytics tracking code – all the while using web standards.
Sencha Animator →
Layer Styles - Like your favorite graphics editor but in your browser (and it creates CSS)
Layer Styles is a web browser-based graphics editor, but instead of creating graphics, it creates CSS. If you’ve ever used Photoshop or similar graphics editor (like, 99% of you readers), then you’ll know how to use Layer Styles’ interface. Nice for those who prefer GUIs for creating visuals, except in this case you’re creating CSS code instead of an image.
Layer Styles →
The Web Font Combinator - A Web Typography Tool
The Web Font Combinator lets you preview web font combinations. It shows you font examples that you can combine in order to see how a header and body font work together – but does it on the web and uses current web font technologies. You can edit any of the text on the page, then select the font family you would like to preview.
The Web Font Combinator →
Normalize.css - Customisable CSS file that makes browsers render all elements consistently
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. It targets only the styles that need normalizing (ie. ones that have differences between default browser styles). How Normalize.css works is it preserves useful defaults, normalizes styles, corrects bugs, improves usability, and explains what the code does.
Normalize.css →
prefixMyCSS
prefixMyCSS instantly prefixes your CSS3 code. First, you write your CSS code. Then you paste your code in the prefixMyCSS website’s first block and click the prefix button. All vendor prefixes are added to your code. You can then safely replace your old code.
prefixMyCSS →
Spritemapper - CSS Spritemap Generator
Spritemapper is an app that merges multiple images into one and generates CSS positioning for the corresponding slices. It improves loading times, gives you code in CSS so that you don’t have to write any extra syntax, is self-contained and doesn’t have any 3rd-party dependencies, and minimizes space used with its image packer by implementing simulated annealing.
Spritemapper →
Skeleton - Boilerplate for Responsive, Mobile-Friendly Development
Skeleton is a small collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Its three core principles are having a responsive grid down to mobile, being fast to start, and being style agnostic. Basically, it’s a boilerplate for responsive, mobile-friendly development.
Skeleton →
SimpleGrid
SimpleGrid is a CSS grid framework that keeps it simple by including infinite nesting and only one class per element. It’s prepared for four distinct ranges of screen sizes, so the layout that’s shown will be one that’s best tuned to the size of the visitor’s browser window. It’s also self-aware, as each slot knows where it’s located in its row. And it’s simple by having as little markup and classes as possible.
SimpleGrid →
Columnal - A responsive CSS grid system
Columnal is a CSS grid system that’s a remix of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Columnal makes web design easier by making your grids fluid, dynamically changing based on the browser size (and even switching to a mobile-style layout if the width is small enough).
Columnal →
CSS3 Patterns Gallery
CSS3 Patterns Gallery is exactly what it sounds like: a gallery of CSS3 patterns. You get a preview of each pattern in the gallery, and if you like it, just click on it and the code for it will pop up, as well as a full-screen preview of what the pattern will look like. Handy for easy browsing of patterns and quick grabbing of the code to use or modify in your own design.
CSS3 Patterns Gallery →
Patternify - CSS Pattern Generator
Patternify is a simple CSS pattern generator. Its graphical web-based interface lets you draw the pattern you want, and then it generates the CSS code for you. Instead of having to launch your graphics editor and creating a 2px by 2px image, you can just build your pattern online using this. And with the base64 code, you don’t even need an image file anymore: just include the code in your CSS and you’re ready to rock.
Patternify →
CSS3 Buttonize Framework - Light-Weight, Flexible Instant Button Framework
CSS3 Buttonize Framework is a lightweight, flexible instant-button framework. Simply choose one of the button style examples, then download the CSS code form the provided link, add the code it gives you to where it tells you to put it, and you’re set for having your website use that button style.
CSS3 Buttonize Framework →
CSS Text Shadow Generator
CSS Text Shadow is a text shadow generator that uses CSS. Type your text you want to preview in the website’s box (or leave the sample text if you want), choose which style you like, pick the font, then hit the Get Code button to, you guessed it, get the code to insert into your stylesheet.
CSS Text Shadow Generator→
Animatable - Easy way to create CSS3 animations
Animatable is an easy way to create CSS3 animations for WebKit browsers on any platform or device – including Android, BlackBerry, iOS and WebOS. It lets you create multi-scene CSS3 animations without knowing much about CSS or animation. Useful for not only designers and developers but animators as well.
Animatable →
What Are Your Most Useful Tools?
Over to you: what are your favorite new CSS tools? What glaring omissions do you know that should be on this list? Feel free to share your useful additions in the comments section below.
0 yorum:
Yorum Gönder