CSS Stats

  • Posted By: Jason Taetsch
  • ...

Think your CSS skills are on par with the titans of the tech industry? CSS Stats can provide some impartial insight into the matter. The CSS Stats tool by Mrmrs & Jxnblk  parses the CSS of a site to tally the number of total rules, selectors, declarations and colors used to deliver the front-end experience to a user. It provides a quick snapshot of total vs. unique declarations and other important factors to assess the overall health and maintainability of your code. CSS Stats also has quick links to some of the most-visited sites on the Internet to compare how your codebase matches up against industry benchmarks.

CSS_Stats

Snabbt.js Animation Library

  • Posted By: Jason Taetsch
  • ...

Animation libraries enable developers to quickly include complex and smooth animations into projects faster than ever before. While most developers are familiar with the more common libraries, there are a number of lesser-known ones that provide both functional and lightweight solutions for animations and other effects. The snabbt.js library by Daniel Lundin uses modern browser capability to perform animations as fast as possible, without dominating too many resources.  This approach suits mobile applications perfectly, providing smooth and fast transitions.  The snabbt.js library works in environments both with and without jQuery.

snabbt_js

 

WYSIHTML Editor

  • Posted By: Jason Taetsch
  • ...

WYSIWYG or What-You-See-Is-What-You-Get editors turn the task of creating content for the web out of the hands of professionals and hand it over to everyday computer users. These editors mimic how the entered content will display on the front-end of a website without the use of HTML attributes and tags as well as styling. The WYSIHTML editor is an open source project created by the team at Voog and is compatible with modern mobile devices as well as modern browsers up to IE8. It makes use of the latest HTML5 features to deliver a fast and lightweight experience without the the use of iframes or the use of external libraries like jQuery.

WYSeditor

Material Palette

  • Posted By: Jason Taetsch
  • ...

With the ever increasing resolution of screens and monitor sizes the visual aspects of a web design has never been more important. Fortunately there are a number of tools available to make the task of creating an impressive color scheme even easier. The Material Palette from Matthieu Aussaguel creates a custom palette for web design and other projects based on a selection of flat colors chosen by the user. The Material Palette coordinates appropriate primary and secondary text colors, suggested divider colors as well as the primary colors of the design and any hues that would work nicely as accents.

materialpallette

Linea Outline Icon Set

  • Posted By: Jason Taetsch
  • ...

A well coordinated icon set adds visual cues that can help users navigate your site or engage with content.  Grab the Linea Icon set from Dario Ferrando for a comprehensive icon pack that includes over 700 outline icons in both .PNG and .SVG as well as icon fonts for quick usage in web-based projects. The linea icon pack comes with a basic set of icons for standard UI elements, a music themed set, ecommerce icons, software icons, navigational arrows and weather icons and more. The set is free for use in both personal and commercial products with proper attribution.

linea_icon

Minimal Looping Preloaders

  • Posted By: Jason Taetsch
  • ...

Everyone wants to include stunning graphics and eye-catching photographs to enhance the look of their website, but with high-resolution images often come much higher load times. Even if you are using a CDN, a weak connection on the user side can cause unwanted delays for the delivery of graphics and other files. If you’re still intent on serving large images in your project, but want to keep the user engaged, looping preloaders are the answer. This set of minimal loop preloaders by MarinaD will complement simple, flat designs and offer a variety of different preloaders to best fit the aesthetics of your design.  The set features .AI, .EPS, .PSD and of course .GIF.

minmialpreloaders

 

 

Get Colors From Image

  • Posted By: Jason Taetsch
  • ...

Implementing the colors from an image into a design project is a surefire to have the colors complement one another.  With the emergence of HTML5, grabbing specific colors from an image has never been easier, or quicker. Browsers can complete these simple tasks that were previously reserved for image processing software. The Get Colors From Image tool by HTML-Color-Codes enables designers to select individual colors from an image without ever having to upload the file to a web-server. The multiple windows display the original image, the targeted area of the image as well as the specific color and corresponding hexadecimal code.

getcolorsfromimage

HEX to RGB Converter

  • Posted By: Jason Taetsch
  • ...

Converting colors from their hexadecimal values to their RGB counterpart is a common task that any busy designer would like to streamline in their workflow.  While there are a million ways to complete the process, the Hex To RGB Converter from the team at by Jamie Brittain performs this task with simplicity and style. The clean and minimalistic layout is a welcome departure from the free tools that are littered with ads and other extraneous content. Once a color is entered into either the RGB or Hex field, the browser window adjusts to the entered color, and its hexadecimal or RGB value is displayed. (If you add RGB code like this: rgb(0,001,123) it will convert to hex code.)

hexcolorrrrs

Prefix My CSS

  • Posted By: Jason Taetsch
  • ...

While browsers have gotten better at complying to the latest web standards and languages, many of the new CSS features still require browser-specific prefixes to properly display the content.  PrefixMyCSS  automatically adds the necessary prefixes to your CSS code so it will properly display in the major web browser. The tool allows designers to copy all of the CSS into one window and output a fully prefixed version of the CSS including comments.   Prefix My CSS also includes options to control the spacing between the different CSS properties and the line spacing of the entire document for readability.

CSS Terminal

  • Posted By: Jason Taetsch
  • ...

Adjusting the layout and design of a webpage can take up a serious amount of time due to the constant need to save, test and debug the appropriate code. CSS Terminal by Ben Barber is a browser bookmarklet that can input CSS rules directly into any current webpage, allowing a designer to get a live view of how changes or updates to the current CSS rules will affect the finished project.  Once active in your browser, the CSS Terminal window will appear and apply any of the entered CSS rules immediately to the webpage as they are entered.  The terminal window can be collapsed via the “ESC” or “Tab” key for a full view of the edited page.

>