blumenberg + css 482
Gumby 960 Grid Responsive CSS Framework
2 days ago by blumenberg
The NEW Responsive 960 Grid CSS Framework That You’re Already Familiar With.
css
framework
grid
responsive
web
design
960
prototype
html5
css3
:sk
:sm
:st
:am
:mg
2 days ago by blumenberg
Create a new Fiddle - jsFiddle
7 days ago by blumenberg
… is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.
html
css
javascript
jquery
testing
tool
online
development
share
snippet
embed
framework
:mg
:sk
:sm
:st
:am
7 days ago by blumenberg
Font Awesome
11 weeks ago by blumenberg
… the iconic font designed for use with Twitter Bootstrap
design
font
icon
@font-face
twitter
bootstrap
commercial
usage
css
ux
ui
creativecommons
license
3.0
11 weeks ago by blumenberg
BootstrapWP
february 2012 by blumenberg
Bootstrap starter theme for WordPress
bootstrap
css
theme
twitter
wordpress
february 2012 by blumenberg
Pears
february 2012 by blumenberg
Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.
interface
pattern
css
html
wordpress
theme
framework
february 2012 by blumenberg
HTML KickStart
february 2012 by blumenberg
… is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project.
framework
bootstrap
html5
css
jquery
javascript
design
template
:mg
:ce
:am
:sk
:st
february 2012 by blumenberg
Responsive Design Test Bookmarklet
january 2012 by blumenberg
It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.
bookmarklet
css
webdesign
viewport
screen
size
device
:ce
:am
:nc
ui
ux
:sk
:st
responsive
january 2012 by blumenberg
A better way to use icon fonts
january 2012 by blumenberg
yatil. Eric Eggert about web development & design.
css
web
development
javascript
icon
aria
accessibility
@font-face
:nc
ux
:am
january 2012 by blumenberg
Twitter Bootstrap Generator
january 2012 by blumenberg
Kick-start your Twitter Bootstrap project the way you want. Simply alter the options below and click "Generate" to get your compiled Bootstrap CSS file.
twitter
bootstrap
generator
css
compile
:ce
:am
:mg
:sk
:st
january 2012 by blumenberg
Bootstrap
december 2011 by blumenberg
… a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.
css
design
framework
html
twitter
ui
javascript
less
:am
:ce
:sk
:st
:mg
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.
december 2011 by blumenberg
An Introduction To Object Oriented CSS (OOCSS)
december 2011 by blumenberg
In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.
code
object
oriented
css
oocss
by:smashingmagazine
:ce
:am
:sk
:st
december 2011 by blumenberg
The Heads-Up Grid
november 2011 by blumenberg
The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.
css
development
grid
layout
webdesign
javascript
:sk
:st
:nc
:am
:ce
:mg
responsive
november 2011 by blumenberg
Default WordPress Generated CSS Cheat Sheet for Beginners
october 2011 by blumenberg
… there are certain CSS classes and IDs that are generated by WordPress
wordpress
css
template
:sk
:st
october 2011 by blumenberg
CSS Background
october 2011 by blumenberg
… There’s More To Know Than You Think
css
css3
background
howto
reference
:sk
:st
:nc
:ce
october 2011 by blumenberg
Rapid Prototyping For Any Device With Foundation
october 2011 by blumenberg
… a framework to help you build prototypes and production code that’s truly responsive.
zurb
prototype
foundation
html
css
grid
article
:ce
:am
:nc
:sk
:st
by:smashingmagazine
responsive
october 2011 by blumenberg
PNG Masking
october 2011 by blumenberg
… How to Dynamically Shape Any Image on Your Website
css
design
html
png
webdesign
howto
october 2011 by blumenberg
font dragr
october 2011 by blumenberg
… allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop.
@font-face
css
testing
dragndrop
bookmarklet
:nc
:sk
chrome
firefox
october 2011 by blumenberg
debugCSS.css at master from yahoo/debugCSS
october 2011 by blumenberg
CSS to highlight potentially malformed, invalid or questionable markup.
github
css
malformed
error
markup
:ce
:am
:st
:sk
october 2011 by blumenberg
XRAY :: for web developers
october 2011 by blumenberg
… a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.
css
development
webdesign
bookmarklet
browser
ie6
webkit
gecko
:nc
:ce
:am
:st
:sk
october 2011 by blumenberg
Gradient App for OSX
october 2011 by blumenberg
The Missing Link between Web Designers and Colors
mac
osx
application
design
css
color
recommendation
:sk
:st
:ce
:nc
ui
october 2011 by blumenberg
BluCSS
october 2011 by blumenberg
Your best buddy when it comes to creating responsive layouts.
css
design
framework
grid
:am
:ce
:nc
:st
:sk
responsive
october 2011 by blumenberg
Fluid Squares V2
october 2011 by blumenberg
• A HTML5 fluid grid framework whose units remain square.
• Column widths increase or decrease to suit your display size using Media Queries.
• It’s Mobile First, CSS is written for small displays, with Media Queries incorporated as display size increases.
• It works on all modern desktop browsers, as well as iOS, Android and BlackBerry’s mobile WebKit browsers.
• Uses css3-mediaqueries.js to work in IE or any browser that supports JavaScript but not Media Queries.
fluid
grid
framework
html5
css
css3
square
:ce
:am
:nc
:st
:sk
• Column widths increase or decrease to suit your display size using Media Queries.
• It’s Mobile First, CSS is written for small displays, with Media Queries incorporated as display size increases.
• It works on all modern desktop browsers, as well as iOS, Android and BlackBerry’s mobile WebKit browsers.
• Uses css3-mediaqueries.js to work in IE or any browser that supports JavaScript but not Media Queries.
october 2011 by blumenberg
Adaptive Images in HTML
september 2011 by blumenberg
«A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed. Adaptive Images is intended for use with Responsive Designs and to be combined with Fluid Image techniques. […]»
image
php
adaptive
fluid
javascript
css
:sk
:st
:nc
:am
:ce
ux
ui
responsive
september 2011 by blumenberg
CSS Prototyping
september 2011 by blumenberg
It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.
css
design
grid
prototype
:sk
:st
:nc
:ce
:am
september 2011 by blumenberg
The Semantic Grid System
september 2011 by blumenberg
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
css
framework
semantic
grid
webdesign
:ce
:nc
:st
:sk
:am
september 2011 by blumenberg
Golden Grid System
august 2011 by blumenberg
A folding grid for responsive design.
css
design
framework
grid
webdesign
responsive
august 2011 by blumenberg
Responsive HTML images
august 2011 by blumenberg
… adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
design
image
html
automatic
css
solution
download
mobile
htaccess
php
javascript
jpeg
ui
ux
responsive
august 2011 by blumenberg
Download Quick Sprites for Mac - Create and maintain CSS sprite sheets. MacUpdate.com
august 2011 by blumenberg
… simplifies the creation and maintenance of CSS sprite sheets that enable you to optimize your websites.
mac
osx
10.6
css
sprites
generator
application
macappstore
ui
:nc
august 2011 by blumenberg
Webseiten Cross-Browsertests
august 2011 by blumenberg
Ein kleiner Überblick praktischer Tools und Tipps
html
css
ui
ux
cross-browser
test
tool
article
:nc
:sk
:st
august 2011 by blumenberg
@font-face Solutions & Suggestions
august 2011 by blumenberg
«So what are the options for implementing web fonts? I'm going to review the three main methods of incorporating @font-face and explain the pros and cons of each method. […]»
@font-face
css
css3
font
typography
design
development
:nc
:sk
:st
review
article
howto
august 2011 by blumenberg
Octopress
august 2011 by blumenberg
… is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages. To start blogging with with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of. Simply clone or fork Octopress, install dependencies and the theme, and you’re set.
blog
generator
github
html
css
javascript
octopress
august 2011 by blumenberg
Fount
august 2011 by blumenberg
… will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style.
bookmarklet
css
font
typography
webdesign
identify
:sk
:st
august 2011 by blumenberg
Memu Demo
july 2011 by blumenberg
dropdown menu navigation w/ and w/o javascript
css
dropdown
menu
navigation
template
javascript
:sk
:st
july 2011 by blumenberg
CSS Lint
july 2011 by blumenberg
… 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. The rules are all pluggable, so you can easily write your own or omit ones you don't want.
css
problem
code
syntax
check
tool
:sk
:st
july 2011 by blumenberg
Simple Media Queries Debugger
june 2011 by blumenberg
English Media Queries are going to establish, the pros and cons are not an issue here. "Debugging" is not easy and creating layouts can be quickly complex. This solution is an idea to know the viewport, since it shows in the upper area of the page. Via these values you can use it for different width.
debug
css
media
query
screen
viewport
@media
:sk
:st
june 2011 by blumenberg
Baseline
june 2011 by blumenberg
… a designer framework built around the idea of a “real” baseline grid
css
framework
grid
typography
webdesign
template
creativecommons
:sk
:st
june 2011 by blumenberg
Sprite Cow - Generate CSS for sprite sheets
june 2011 by blumenberg
What? Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css. […] Why?
Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & sizes from graphics apps wasted a ton of my time, so I made this!
css
images
sprites
tool
online
chrome
firefox
:sk
:st
!essential
Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & sizes from graphics apps wasted a ton of my time, so I made this!
june 2011 by blumenberg
Initializr
june 2011 by blumenberg
… an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian. Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start.
boilerplate
css
html5
javascript
template
generator
:sk
:st
june 2011 by blumenberg
CSS Tools FTW!
june 2011 by blumenberg
«[…] Hier eine Liste von hilfreichen Referenzen, Tools, Dings; hauptsächlich damit ich sie selbst schneller wiederfinde […]»
css
css3
online
tool
reference
list
!essential
:sk
:st
june 2011 by blumenberg
related tags
!essential ⊕ !important ⊕ !nohack ⊕ !note ⊕ !re-check ⊕ 3.0 ⊕ 9rules ⊕ 10.6 ⊕ 960gs ⊕ :am ⊕ :ce ⊕ :cs ⊕ :ji ⊕ :mg ⊕ :nc ⊕ :sk ⊕ :sm ⊕ :st ⊕ @font-face ⊕ @media ⊕ accessibility ⊕ adaptive ⊕ add ⊕ agency ⊕ ajax ⊕ album ⊕ analyze ⊕ animation ⊕ api ⊕ application ⊕ apps ⊕ aria ⊕ art ⊕ article ⊕ artikel ⊕ attack ⊕ attribute ⊕ audiobook ⊕ automatic ⊕ award ⊕ background ⊕ bar ⊕ barrierefreiheit ⊕ basic ⊕ blog ⊕ blueprint ⊕ boilerplate ⊕ book ⊕ bookmark ⊕ bookmarklet ⊕ bootstrap ⊕ border ⊕ box ⊕ brand ⊕ browser ⊕ bubble ⊕ bug ⊕ build ⊕ builder ⊕ bulletproof ⊕ business ⊕ button ⊕ by:alistapart ⊕ by:bradfrostweb ⊕ by:davidwalsh ⊕ by:designshack ⊕ by:smashingmagazine ⊕ by:webdesigntuts ⊕ cache ⊕ calculator ⊕ cart ⊕ center ⊕ chart ⊕ cheatsheet ⊕ check ⊕ checker ⊕ child ⊕ child-theme ⊕ chrome ⊕ class ⊕ clearfix ⊕ clickjacking ⊕ clip ⊕ cms ⊕ code ⊕ collaboration ⊕ collection ⊕ color ⊕ column ⊕ commercial ⊕ community ⊕ compare ⊕ comparison ⊕ compile ⊕ compress ⊕ computer ⊕ concept ⊕ content ⊕ convert ⊕ creativecommons ⊕ creativity ⊕ cross-browser ⊕ crossplatform ⊕ css ⊖ css3 ⊕ custom ⊕ customization ⊕ data ⊕ debug ⊕ degree ⊕ design ⊕ developer ⊕ development ⊕ device ⊕ devlounge ⊕ diagnostic ⊕ diagram ⊕ diff ⊕ directory ⊕ discussion ⊕ display ⊕ diy ⊕ Doctor ⊕ Dojo ⊕ DoS ⊕ download ⊕ dragndrop ⊕ dropdown ⊕ dtr ⊕ dynamic ⊕ ebay ⊕ eclipse.public.license ⊕ ecommerce ⊕ edit ⊕ editor ⊕ effect ⊕ efficiency ⊕ email ⊕ embed ⊕ enhancement ⊕ eot ⊕ equation ⊕ error ⊕ escape ⊕ eula ⊕ example ⊕ examples ⊕ explorer ⊕ extension ⊕ external ⊕ facebook ⊕ faq ⊕ fast ⊕ field ⊕ file ⊕ firebug ⊕ firefox ⊕ fix ⊕ flash ⊕ flexible ⊕ float ⊕ fluid ⊕ font ⊕ fontsquirrel ⊕ footer ⊕ form ⊕ foundation ⊕ frame ⊕ framework ⊕ free ⊕ freeware ⊕ ftp ⊕ gallery ⊕ gecko ⊕ generated ⊕ generator ⊕ german ⊕ github ⊕ global ⊕ glossary ⊕ gmail ⊕ google ⊕ gpg ⊕ gpl ⊕ graphic ⊕ graphs ⊕ grid ⊕ gui ⊕ guide ⊕ guillemets ⊕ hack ⊕ handbook ⊕ hatom ⊕ hcard ⊕ header ⊕ heading ⊕ hook ⊕ hotmail ⊕ howto ⊕ hr ⊕ htaccess ⊕ html ⊕ html5 ⊕ http ⊕ icon ⊕ id ⊕ identify ⊕ identity ⊕ ie ⊕ ie6 ⊕ ie8 ⊕ illustration ⊕ image ⊕ images ⊕ imap ⊕ improve ⊕ index ⊕ injection ⊕ input ⊕ inspiration ⊕ interaction ⊕ interface ⊕ internet ⊕ invalid ⊕ ios ⊕ ipad ⊕ iphone ⊕ javascript ⊕ jpeg ⊕ jquery ⊕ js ⊕ k2 ⊕ kellum ⊕ kit ⊕ language ⊕ layout ⊕ less ⊕ letterpress ⊕ library ⊕ license ⊕ lightbox ⊕ like.box ⊕ link ⊕ list ⊕ load ⊕ logo ⊕ mac ⊕ macappstore ⊕ magazine ⊕ magazines ⊕ malformed ⊕ manual ⊕ markup ⊕ media ⊕ mediaquery ⊕ media_queries ⊕ menu ⊕ microformat ⊕ mistakes ⊕ MIT.license ⊕ mobile ⊕ mockup ⊕ model ⊕ mondaybynoon ⊕ MooTools ⊕ mp3 ⊕ music ⊕ mysql ⊕ navigation ⊕ news ⊕ nospec.designer ⊕ nth-child ⊕ number ⊕ object ⊕ octopress ⊕ online ⊕ oocss ⊕ opensource ⊕ opentype ⊕ optimization ⊕ organization ⊕ oriented ⊕ oscommerce ⊕ osx ⊕ otf ⊕ overflow ⊕ overlay ⊕ overview ⊕ page ⊕ pattern ⊕ pdf ⊕ pe ⊕ performance ⊕ phark ⊕ Philosophiœ ⊕ phishing ⊕ photo ⊕ photography ⊕ photoshop ⊕ php ⊕ picture ⊕ pixel ⊕ plugin ⊕ plugindirectory ⊕ png ⊕ podcast ⊕ pop3 ⊕ popup ⊕ portfolio ⊕ position ⊕ prefix ⊕ preload ⊕ presentation ⊕ preview ⊕ print ⊕ pro/contra ⊕ problem ⊕ production ⊕ productivity ⊕ programming ⊕ progressive ⊕ project ⊕ prototype ⊕ prototype.js ⊕ psd ⊕ query ⊕ quirks ⊕ rails ⊕ ratio ⊕ recommendation ⊕ redesign ⊕ redundancy ⊕ reference ⊕ replacement ⊕ request ⊕ resize ⊕ resolution ⊕ resource ⊕ responsive ⊕ retina ⊕ review ⊕ revolver ⊕ rfi ⊕ rgba ⊕ ruby ⊕ s3 ⊕ safari ⊕ sandbox ⊕ sass ⊕ screen ⊕ script ⊕ scriptaculous ⊕ scripting ⊕ search ⊕ security ⊕ selector ⊕ semantic ⊕ seo ⊕ service ⊕ sftp ⊕ shadow ⊕ shadowbox ⊕ share ⊕ sheet ⊕ shop ⊕ showcase ⊕ sifr ⊕ siir ⊕ simple ⊕ site ⊕ size ⊕ skin ⊕ slides ⊕ slideshow ⊕ snippet ⊕ software ⊕ solution ⊕ source ⊕ spalten ⊕ spam ⊕ specific ⊕ specificity ⊕ spectrum ⊕ sprites ⊕ sql ⊕ square ⊕ ssl ⊕ standard ⊕ sticky ⊕ stock ⊕ structure ⊕ studio ⊕ style ⊕ stylesheet ⊕ stylus ⊕ submit ⊕ support ⊕ svg ⊕ svn ⊕ switch ⊕ syntax ⊕ t3n ⊕ tab ⊕ table ⊕ tables ⊕ tabs ⊕ technology ⊕ template ⊕ terminal ⊕ test ⊕ testing ⊕ text ⊕ text-indent ⊕ texture ⊕ theft ⊕ theme ⊕ Thesis ⊕ thickbox ⊕ tidy ⊕ tip ⊕ tool ⊕ transform ⊕ transition ⊕ transitions ⊕ trick ⊕ truetype ⊕ try ⊕ ttf ⊕ tutorial ⊕ twitter ⊕ type ⊕ typeface ⊕ typekit ⊕ typo ⊕ typography ⊕ typogridphy ⊕ ui ⊕ unicode ⊕ usability ⊕ usage ⊕ utility ⊕ ux ⊕ validate ⊕ value ⊕ video ⊕ viewer ⊕ viewport ⊕ virus ⊕ visualization ⊕ w3c ⊕ web ⊕ web2.0 ⊕ webdav ⊕ webdesign ⊕ webdev ⊕ webfonts ⊕ webkit ⊕ webkrauts ⊕ website ⊕ webstandard ⊕ wev ⊕ widget ⊕ wikipedia ⊕ windows ⊕ wireframe ⊕ woff ⊕ wordpress ⊕ wysiwyg ⊕ xhtml ⊕ xray ⊕ xss ⊕ yahoo! ⊕ Yahoo!UIL ⊕ yaml ⊕ yui ⊕ zoom ⊕ zurb ⊕Copy this bookmark: