April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
September 2012
August 2012
July 2012
June 2012
May 2012
April 2012
March 2012
finds unused CSS styles
CSSessCSSess is a JS tool that helps find extra CSS rules on your site. It is designed to be used as a bookmarklet.
toggled navigation
Responsive NavResponsive navigation plugin without library dependencies and with fast touch screen support.
CSS curiosities
- Flexy Boxes – CSS flexbox playground and code generation tool
- CSS Crush – An extensible PHP based CSS preprocessor
(by Pete Boere)
'mobile-friendly'
The Personal PageA free, simple, one-page website to identify yourself to the world
modern 'reset' alternative
Normalize.css:Make browsers render all elements more consistently.
(about)
design/dev 'playground'
LiveweaveHTML5, CSS3 & JavaScript playground for web developers and designers
[CodeVisually (ads)]
for lack of standards...
Browser Supportsee which CSS features are supported in each version of the major web browsers
'broad compatibility'
Announcing jQuery Mobile 1.0A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
'tidy and logical'
GridloverGridlover is the tool to establish a type system with modular scale and vertical rhythm to build upon.
another day, another 'grid'
Fluid Baseline Grid - A sensible HTML5 and CSS3 development kitThe collection is growing.
'proof-of-concept' for now
αlphaPun.ch[Introducing alphaPun.ch]Alphapun.ch is a tool that, given a transparent PNG or GIF file, will trace the opaque bits and create masks for them. You can use these masks to allow a user to click through the transparent bits of an image. Alphapun.ch outputs HTML, CSS and JavaScript for you to include on your site.
Note: This is not an endorsement.
'instant buttons'
CSS3 Buttonize FrameworkThe Buttonize Framework is a simple, light-weight CSS file with precompiled styles and colours for quick, modern looking buttons. It uses CSS3 for rounded corners and subtle gradients but with bulletproof fallbacks for older browsers.
checks your CSS code
CSS LintCSS Lint is a tool to help 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...
'beautiful at any size'
Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Developmentexperimental sharing project
HTML5 Snippets – "allows you to share html5 snippets. It's an small experimental project created by Roberto Brevé, currently in very alpha mode."'diagnostic CSS stylesheet'
Holmes - The CSS Markup Detectiveholmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website. It has a simple implementation and a mostly unobtrusive effect on your page. Not recommended for live enviroments.
(also available as simple bookmarklet)
a sensible boilerplate approach
320 and upMany CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.
'320 and Up' starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they're needed. Think of this as responsible responsive design.
'use CSS3 right now'
CSS3 properties exposedNote (our opinion):
All of the proprietary syntaxes are a shame in terms of web standards, but this is a useful resource for keeping up with the syntaxes that currently work.
'super-easy to use'
KEYS.css – "a simple stylesheet for rendering beautiful keyboard-style elements"CSS grid framework pack
The Square GridWhat's in the Pack?
- Sketch sheets for printing (PDF).
- Design layout templates (for Photoshop, InDesign and Illustrator).
- Code files with explanations (CSS, HTML)
'lean, mean CSS'
{+}eCSStenderSay goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.
Note: This is not an endorsement.
memory game
CSS MemoryA game of memory in which you will have to find three matching cards. (as a tribute to the CSS level used for the transitions)
make 'pretty-printed' snippets
Source code beautifier / syntax highlighter- convert code snippets to HTML
layouts 'collapse intelligently'
Less Framework – "An HTML5-powered CSS framework for building smart website layouts for varying screen widths."start fresh
PrimerCSS – "undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet"another CSS framework (3)
Atatonic CSS framework – "created to provide a stable grid and solid typography"conditional CSS (for intermediate/advanced coders)
Modernizr – "a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies"another CSS framework (2)
BlueTrip CSS FrameworkBlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing.
useful browser compatibility reference
When can I use... – "Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies"style scrubber
CSS SuperScrubThis tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
Note: This is not an endorsement.
another CSS framework
SenCSsSenCSs supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website's style.
interesting scripting+css approach
Dynamic Layout – "a simple JavaScript library that allows you to easily adjust page layout based on the current browser width"'interactive type tool'
CSS Type Set – "a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content"'look at me' designs
What are CSS galleries actually showcasing?There are exceptions, but for the most part these sites seem to be nothing more than a collection of slow loading, non-accessible, barely usable sites made by fantastic digital artists who unfortunately have no idea how to build a web site.
developer resources
Endihm – "a resource for articles, guides and tutorials focusing on CSS, HTML, Javascript & PHP"step-by-step tutorial
Create your own drop down menu with nested submenus using CSS and a little JavaScript
The dailywebthing is intended
for a mature audience.
Some rights reserved.
daily pointers
AORTAL - the anti-portal,
here's today's daily pointers:
05/20/13
CSS Lint
Streetsy
Apres Garde
random ageless
other projects
The dailywebthing is intended
for a mature audience.
Some rights reserved.