michaelfox + css 488
Google HTML/CSS Style Guide
6 days ago by michaelfox
This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.
css
html
style
styleguide
bestpractices
html5
css3
seo
standards
6 days ago by michaelfox
StyleDocco
11 weeks ago by michaelfox
StyleDocco generates documentation and style guide documents from your stylesheets.
Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write code examples inside GitHub Markdown code fences (```) or prefixed with 4 spaces in your comments, and StyleDocco both renders the HTML and shows the code example.
The document is automatically split into new sections when it encounters a level 1 or 2 heading. Read more about the heading syntax in the Markdown guide. Only comments at the beginning of new lines are included, so to exclude something from the style guide, put some whitespace before the comment.
If your project includes a README file, it will be used as the base for an index.html. StyleDocco will also add some default styles to your documentation, but they are easy to modify to make it fit with your project.
StyleDocco will automatically compile any SASS, SCSS, Less or Stylus code before it is applied to the page.
css
documentation
reference
tools
node
css3
style
styleguide
Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write code examples inside GitHub Markdown code fences (```) or prefixed with 4 spaces in your comments, and StyleDocco both renders the HTML and shows the code example.
The document is automatically split into new sections when it encounters a level 1 or 2 heading. Read more about the heading syntax in the Markdown guide. Only comments at the beginning of new lines are included, so to exclude something from the style guide, put some whitespace before the comment.
If your project includes a README file, it will be used as the base for an index.html. StyleDocco will also add some default styles to your documentation, but they are easy to modify to make it fit with your project.
StyleDocco will automatically compile any SASS, SCSS, Less or Stylus code before it is applied to the page.
11 weeks ago by michaelfox
Pears - common patterns of markup & style
11 weeks ago by michaelfox
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.
Grab the theme at Github.
Install the theme.
Create markup & style patterns.
Learn.
css
html
html5
css3
framework
patterns
bestpractices
snippets
wordpress
php
elements
reference
forms
breadcrumbs
buttons
pagination
tables
slats
thumbnails
lists
Grab the theme at Github.
Install the theme.
Create markup & style patterns.
Learn.
11 weeks ago by michaelfox
Checkbox Hack ✿ dabblet.com
december 2011 by michaelfox
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
css
css3
form
checkbox
code
sample
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
december 2011 by michaelfox
related tags
*todo ⊕ accessibility ⊕ accordion ⊕ actionscript ⊕ addons ⊕ add_editor_style ⊕ admin ⊕ advanced ⊕ air ⊕ ajax ⊕ alert ⊕ align ⊕ alphaimageloader ⊕ amazon ⊕ animation ⊕ apache ⊕ app ⊕ apple ⊕ applescript ⊕ apps ⊕ architecture ⊕ aristo ⊕ article ⊕ assets ⊕ attr ⊕ attribute ⊕ audio ⊕ aws ⊕ background ⊕ base ⊕ bash ⊕ beautifier ⊕ beginner ⊕ bestpractices ⊕ bevel ⊕ blacktext ⊕ blog ⊕ blogazine ⊕ bloggers ⊕ blogs ⊕ boilerplate ⊕ book ⊕ bookmarklet ⊕ bookmarklets ⊕ bookmarks ⊕ books ⊕ bootstrap ⊕ border-image ⊕ box ⊕ box-shadow ⊕ boxes ⊕ breadcrumbs ⊕ browser ⊕ browsers ⊕ bugs ⊕ bundle ⊕ bundles ⊕ button ⊕ buttons ⊕ byword ⊕ cache ⊕ cal ⊕ calculator ⊕ calendar ⊕ calibre ⊕ canary ⊕ canonical ⊕ cappuccino ⊕ catalog ⊕ cdn ⊕ center ⊕ centering ⊕ characters ⊕ chart ⊕ charts.bar ⊕ cheatsheet ⊕ checkbox ⊕ chrome ⊕ chromium ⊕ clean ⊕ cli ⊕ cms ⊕ cocoa ⊕ code ⊕ codeigniter ⊕ coding ⊕ coffeescript ⊕ collection ⊕ color ⊕ colorpicker ⊕ columns ⊕ comments ⊕ common ⊕ communitywiki ⊕ compass ⊕ compatibility ⊕ compiler ⊕ compress ⊕ compression ⊕ config ⊕ console ⊕ control ⊕ controls ⊕ copy ⊕ corners ⊕ counter ⊕ crossbrowser ⊕ crosshair ⊕ css ⊖ css.after ⊕ css.fontface ⊕ css.lists ⊕ css.menus ⊕ css.position ⊕ css.position:fixed ⊕ css.tricks ⊕ css.tutorials ⊕ css3 ⊕ cufon ⊕ cursor ⊕ custom ⊕ customization ⊕ dashboard ⊕ data ⊕ datagrid ⊕ datarepresentation ⊕ data_representation ⊕ date ⊕ db ⊕ debug ⊕ debugging ⊕ definitionlist ⊕ demo ⊕ demonstration ⊕ deployment ⊕ depth ⊕ design ⊕ development ⊕ dhtml ⊕ dialog ⊕ dictionary ⊕ directory ⊕ display ⊕ documentation ⊕ dom ⊕ domain ⊕ dotjs ⊕ downloader ⊕ dropdown ⊕ dropshadow ⊕ dynamic ⊕ dynamiccss ⊕ dynamic_css ⊕ easing ⊕ ebooks ⊕ ecsstender ⊕ editor ⊕ editor-style ⊕ education ⊕ ee ⊕ effeciency ⊕ effect ⊕ elements ⊕ em ⊕ email ⊕ enhancement ⊕ environment ⊕ epub ⊕ equal-height-columns ⊕ equalheight ⊕ examples ⊕ experience ⊕ explanation ⊕ extend ⊕ extension ⊕ extras ⊕ fade ⊕ fadeoutbottom ⊕ familytree ⊕ favicon ⊕ features ⊕ featuretest ⊕ file ⊕ firefox ⊕ firefox3.5 ⊕ fixed ⊕ fixes ⊕ flash ⊕ flexbox ⊕ flexible ⊕ flipboard ⊕ float ⊕ flow ⊕ fluid ⊕ folding ⊕ font ⊕ font-face ⊕ fontface ⊕ fonts ⊕ footer ⊕ form ⊕ format ⊕ formatter ⊕ formatting ⊕ forms ⊕ forum ⊕ FOUT ⊕ framework ⊕ frameworks ⊕ free ⊕ frontend ⊕ gadget ⊕ gallery ⊕ generator ⊕ gist ⊕ gist-460360 ⊕ gist-581815 ⊕ github ⊕ github-user ⊕ gloss ⊕ glossary ⊕ google ⊕ gradient ⊕ gradients ⊕ grammar ⊕ graph ⊕ graphcis ⊕ graphic ⊕ graphics ⊕ graphing ⊕ grid ⊕ grids ⊕ gzip ⊕ hacks ⊕ headaches ⊕ header ⊕ height ⊕ hierarchy ⊕ highlight ⊕ horizontal ⊕ hosting ⊕ hover ⊕ howto ⊕ href ⊕ htaccess ⊕ html ⊕ html5 ⊕ http ⊕ ical ⊕ icons ⊕ idea ⊕ ie ⊕ ie.dximagetransform ⊕ ie6 ⊕ ie7 ⊕ ie8 ⊕ ie9 ⊕ image ⊕ imagemap ⊕ images ⊕ img ⊕ inactive ⊕ index ⊕ inline ⊕ inline-block ⊕ input ⊕ inputs ⊕ ins ⊕ inset ⊕ inspector ⊕ inspiration ⊕ interface ⊕ ios ⊕ ipad ⊕ iphone ⊕ itlp ⊕ itunes ⊕ javascript ⊕ jpg ⊕ jquery ⊕ jqueryui ⊕ keyboard ⊕ keys ⊕ label ⊕ labels ⊕ language ⊕ layout ⊕ learning ⊕ less ⊕ lesscss ⊕ lessframework ⊕ lessphp ⊕ letterpress ⊕ li ⊕ libraries ⊕ library ⊕ link ⊕ links ⊕ lint ⊕ list ⊕ lists ⊕ loading ⊕ log ⊕ lp ⊕ mac ⊕ mail ⊕ manager ⊕ mark ⊕ markdown ⊕ marked ⊕ marketing ⊕ markup ⊕ matchbox ⊕ mce ⊕ media ⊕ mediaqueries ⊕ menu ⊕ messagebox ⊕ messaging ⊕ meta ⊕ metadata ⊕ metatag ⊕ microformats ⊕ min ⊕ minify ⊕ minimal ⊕ minimalism ⊕ minimalist ⊕ mobile ⊕ modal ⊕ Modernized ⊕ modernizr ⊕ moduels ⊕ modular ⊕ mod_rewrite ⊕ mozilla ⊕ multilevel ⊕ music ⊕ mvc ⊕ myspace ⊕ mysql ⊕ navigation ⊕ negative-margins ⊕ newsletter ⊕ node ⊕ nodejs ⊕ noise ⊕ normalize ⊕ notification ⊕ ol ⊕ opacity ⊕ opensource ⊕ opera ⊕ optimization ⊕ optimize ⊕ organization ⊕ orientation ⊕ osx ⊕ outlook ⊕ pagination ⊕ parse ⊕ parser ⊕ password ⊕ patterns ⊕ pdf ⊕ percentage ⊕ performance ⊕ perl ⊕ phonegap ⊕ photography ⊕ photoshop ⊕ php ⊕ pie ⊕ pixelation ⊕ placeholder ⊕ placeholders ⊕ plastic ⊕ player ⊕ plugin ⊕ plugins ⊕ png ⊕ pngfix ⊕ pointer ⊕ polaroid ⊕ popups ⊕ position ⊕ positionfixed ⊕ positioning ⊕ posts ⊕ post_type ⊕ pre ⊕ presentation ⊕ prettifier ⊕ print ⊕ printing ⊕ problems ⊕ programming ⊕ progressiveenhancement ⊕ psd ⊕ pseudoselectors ⊕ python ⊕ quality ⊕ queries ⊕ radio ⊕ rdf ⊕ redirect ⊕ reference ⊕ reflection ⊕ regex ⊕ render ⊕ replace ⊕ repo ⊕ report ⊕ representation ⊕ research ⊕ reset ⊕ resources ⊕ responsive ⊕ resume ⊕ rewrite ⊕ rgba ⊕ ribbon ⊕ robot ⊕ rotate ⊕ rounded ⊕ roundedcorners ⊕ rss ⊕ ruby ⊕ rwd ⊕ s3 ⊕ safari ⊕ sample ⊕ samples ⊕ sass ⊕ scaffold ⊕ scale ⊕ scaling ⊕ screencast ⊕ screenshots ⊕ scripting ⊕ scroll ⊕ scrolling ⊕ scss ⊕ search ⊕ security ⊕ sed ⊕ select ⊕ selector ⊕ selectors ⊕ semantic ⊕ semantics ⊕ semanticweb ⊕ seo ⊕ setup ⊕ shadow ⊕ shadows ⊕ sheets ⊕ shell ⊕ shim ⊕ showcase ⊕ sifr ⊕ simple ⊕ sitemap ⊕ skeleton ⊕ slats ⊕ snap ⊕ snippet ⊕ snippets ⊕ snippits ⊕ software ⊕ sort ⊕ spark ⊕ spreadsheet ⊕ sprite ⊕ sprites ⊕ sql ⊕ standard ⊕ standards ⊕ stick ⊕ sticky ⊕ style ⊕ styleguide ⊕ styles ⊕ stylesheet ⊕ stylesheets ⊕ styling ⊕ stylish ⊕ sublimetext ⊕ support ⊕ sxsw ⊕ symbols ⊕ syntax ⊕ table ⊕ table-cell ⊕ tables ⊕ tabs ⊕ target ⊕ techniques ⊕ template ⊕ templates ⊕ test ⊕ testing ⊕ text ⊕ text-shadow ⊕ textarea ⊕ textmate ⊕ theme ⊕ themes ⊕ thumbnails ⊕ tidy ⊕ timeline ⊕ tinymce ⊕ tips ⊕ toolbar ⊕ toolbox ⊕ toolkit ⊕ tools ⊕ tooltip ⊕ tooltips ⊕ touch ⊕ transitions ⊕ transparency ⊕ tree ⊕ trick ⊕ troubleshooting ⊕ tutorial ⊕ tutorials ⊕ twitter ⊕ typography ⊕ ui ⊕ ul ⊕ ultimatebuild ⊕ units ⊕ unix ⊕ uri ⊕ url ⊕ usability ⊕ usecase ⊕ userchrome ⊕ usercontent ⊕ userscripts ⊕ userstyle ⊕ userstyles ⊕ utilities ⊕ utility ⊕ utils ⊕ ux ⊕ validation ⊕ validator ⊕ variables ⊕ vertical ⊕ vertical-center ⊕ via:filamentgroup ⊕ via:twitter ⊕ video ⊕ viewport ⊕ visualization ⊕ w3c ⊕ watch ⊕ web ⊕ web2.0 ⊕ webapp ⊕ webdesign ⊕ webdesign.buttons ⊕ webdev ⊕ webdev.buttons ⊕ webdev.css ⊕ webfonts ⊕ webkit ⊕ webstandards ⊕ webtool ⊕ webui ⊕ wheel ⊕ widget ⊕ width ⊕ wiki ⊕ wikipedia ⊕ window ⊕ wordpress ⊕ work ⊕ workaround ⊕ workflow ⊕ wrapping ⊕ wysiwyg ⊕ xhtml ⊕ xml ⊕ xul ⊕ yahoo ⊕ yslow ⊕ yui ⊕ zend ⊕ zip ⊕ ★ ⊕Copy this bookmark: