From 4aa14be94fe9b9562beef3c7852648ff7dd7f187 Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Wed, 16 Jan 2013 20:11:01 +0000 Subject: [PATCH 01/12] Add minified file --- beautons.min.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 beautons.min.css diff --git a/beautons.min.css b/beautons.min.css new file mode 100644 index 0000000..b1ba8f0 --- /dev/null +++ b/beautons.min.css @@ -0,0 +1,5 @@ +/*!* + * + * @csswizardry -- csswizardry.com/beautons + * + */.btn{display:inline-block;white-space:nowrap;cursor:pointer;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}.btn,.btn:hover{text-decoration:none}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file From 81ff9337f22d4332e8331151bc4feafff985d120 Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Wed, 16 Jan 2013 21:42:41 +0000 Subject: [PATCH 02/12] Add basic docs --- index.html | 267 ++++++++++++++++++++++++++++++++++++++++++++++++++ inuit.min.css | 5 + 2 files changed, 272 insertions(+) create mode 100644 index.html create mode 100644 inuit.min.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..9852a26 --- /dev/null +++ b/index.html @@ -0,0 +1,267 @@ + + + + + + + beautons – a beautifully simple button toolkit + + + + + + + + + +

beautons – a beautifully simple button toolkit

+ +

+ +

Download or View on GitHub + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ButtonClassDescription
Basic
+ Button + + .btn + + Plain ol’ regular button. +
Sizes
+ Button + + .btn .btn--small + + Smaller-than-normal button. +
+ Button + + .btn .btn--large + + Large button. +
+ Button + + .btn .btn--huge + + Huge button. +
+ Button + + .btn .btn--full + + Full-width button. +
Font sizes
+ Button + + .btn .btn--alpha + + Huge text button. +
+ Button + + .btn .btn--beta + + Big text button. +
+ Button + + .btn .btn--gamma + + Regular text button. +
Functions
+ Button + + .btn .btn--positive + + Positive actions, like ‘download’ or ‘log in’. +
+ Button + + .btn .btn--negative + + Positive actions, like ‘delete’ or ‘unfriend’. +
+ Button + + .btn .btn--inactive + + Disabled buttons. +
Styles
+ Button + + .btn .btn--soft + + Rounded, pill-like buttons. +
+ Button + + .btn .btn--hard + + Hard, non-rounded buttons. +
Combinations
+ Button + + .btn .btn--large .btn--positive + + Hard, non-rounded buttons. +
+ Button + + .btn .btn--negative .btn--full .btn--soft + + Full-width, rounded, negative button. +
+ Button + + .btn .btn--positive .btn--alpha .btn--small + + Small, positive button with huge text. +
+

A button in a paragraph.

+ 		+ .btn .btn--natural + + A button in a parent element. +
+ + + + + diff --git a/inuit.min.css b/inuit.min.css new file mode 100644 index 0000000..45c6943 --- /dev/null +++ b/inuit.min.css @@ -0,0 +1,5 @@ +@charset "UTF-8";/** + * + * inuitcss.com -- @inuitcss -- @csswizardry + * + *//* normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,table,th,td,caption,hr{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}a,u,ins{text-decoration:none}ins{border-bottom:1px solid}img{font-style:italic}label,input,textarea,button,select,option{cursor:pointer}.text-input:active,.text-input:focus,textarea:active,textarea:focus{cursor:text;outline:none}.cf,.gw,.grid-wrapper,.nav,.media,.island,.islet,.matrix,.multi-list,.stat-group{zoom:1}.cf:before,.gw:before,.grid-wrapper:before,.nav:before,.media:before,.island:before,.islet:before,.matrix:before,.multi-list:before,.stat-group:before,.cf:after,.gw:after,.grid-wrapper:after,.nav:after,.media:after,.island:after,.islet:after,.matrix:after,.multi-list:after,.stat-group:after{content:" ";display:table}.cf:after,.gw:after,.grid-wrapper:after,.nav:after,.media:after,.island:after,.islet:after,.matrix:after,.multi-list:after,.stat-group:after{clear:both}h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.form-fields>li,.media,.island,.islet{margin-bottom:18px;margin-bottom:1.5rem}.islet h1,.islet h2,.islet h3,.islet h4,.islet h5,.islet h6,.islet hgroup,.islet ul,.islet ol,.islet dl,.islet blockquote,.islet p,.islet address,.islet table,.islet fieldset,.islet figure,.islet pre,.islet .form-fields>li,.islet .media,.islet .island,.islet .islet{margin-bottom:9px;margin-bottom:0.75rem}.landmark{margin-bottom:36px;margin-bottom:3rem}hr{margin-bottom:16px;margin-bottom:1.33333rem}ul,ol,dd{margin-left:36px;margin-left:3rem}html{font:0.75em/1.5 serif;overflow-y:scroll;min-height:100%}h1,.alpha{font-size:36px;font-size:3rem;line-height:1}h2,.beta{font-size:30px;font-size:2.5rem;line-height:1.2}h3,.gamma{font-size:24px;font-size:2rem;line-height:1.5}h4,.delta{font-size:20px;font-size:1.66667rem;line-height:1.8}h5,.epsilon{font-size:16px;font-size:1.33333rem;line-height:1.125}h6,.zeta{font-size:14px;font-size:1.16667rem;line-height:1.28571}hgroup .hN{margin-bottom:0}.giga{font-size:96px;font-size:8rem;line-height:1.125}.mega{font-size:72px;font-size:6rem;line-height:1}.kilo{font-size:48px;font-size:4rem;line-height:1.125}.lede,.lead{font-size:13.5px;font-size:1.125rem;line-height:1.33333}.smallprint,.milli{font-size:12px;font-size:1rem;line-height:1.5}.micro{font-size:10px;font-size:0.83333rem;line-height:1.8}q{quotes:"‘" "’" "“" "”"}q:before{content:"‘";content:open-quote}q:after{content:"’";content:close-quote}q q:before{content:"“";content:open-quote}q q:after{content:"”";content:close-quote}blockquote{quotes:"“" "”"}blockquote p:before{content:"“";content:open-quote}blockquote p:after{content:"";content:no-close-quote}blockquote p:last-of-type:after{content:"”";content:close-quote}blockquote q:before{content:"‘";content:open-quote}blockquote q:after{content:"’";content:close-quote}blockquote{text-indent:-0.41em}blockquote p:last-of-type{margin-bottom:0}.source{display:block;text-indent:0}.source:before{content:"—"}pre{overflow:auto}pre mark{background:none;border-bottom:1px solid;color:inherit}.code-comment{opacity:0.75;filter:alpha(opacity=75)}.line-numbers{font-family:monospace, serif;list-style:decimal-leading-zero inside;white-space:nowrap;overflow:auto;margin-left:0}.line-numbers code{white-space:pre}a:hover,a:active,a:focus{text-decoration:underline}.current>a{cursor:text;text-decoration:underline}img{max-width:100%;height:auto}.img--right{float:right;margin-bottom:18px;margin-left:18px}.img--left{float:left;margin-right:18px;margin-bottom:18px}.img--center{display:block;margin-right:auto;margin-bottom:18px;margin-left:auto}.img--short{height:90px}.img--medium{height:180px}.img--tall{height:270px}figure>img{display:block}li>ul,li>ol{margin-bottom:0}.numbered-list{list-style-type:decimal}table{width:100%}th,td{padding:4.5px;text-align:left}@media screen and (min-width: 480px){th,td{padding:9px}}[colspan]{text-align:center}[colspan="1"]{text-align:left}[rowspan]{vertical-align:middle}[rowspan="1"]{vertical-align:top}.numerical{text-align:right}.t5{width:5%}.t10{width:10%}.t12{width:12.5%}.t15{width:15%}.t20{width:20%}.t25{width:25%}.t30{width:30%}.t33{width:33.333%}.t35{width:35%}.t37{width:37.5%}.t40{width:40%}.t45{width:45%}.t50{width:50%}.t55{width:55%}.t60{width:60%}.t62{width:62.5%}.t65{width:65%}.t66{width:66.666%}.t70{width:70%}.t75{width:75%}.t80{width:80%}.t85{width:85%}.t87{width:87.5%}.t90{width:90%}.t95{width:95%}.table--bordered th,.table--bordered td{border:1px solid #ccc}.table--bordered th:empty,.table--bordered td:empty{border:none}.table--bordered thead tr:last-child th{border-bottom-width:2px}.table--bordered tbody tr th:last-of-type{border-right-width:2px}.table--striped tbody tr:nth-of-type(odd){background-color:#ffc}.table--data{font:12px/1.5 sans-serif}fieldset{padding:18px}.form-fields{list-style:none;margin:0}.form-fields>li:last-child{margin-bottom:0}label,.label{display:block}.additional{display:block;font-weight:normal}.check-list{list-style:none;margin:0}.check-label,.check-list label,.check-list .label{display:inline-block}.spoken-form label{display:inline-block;font:inherit}.extra-help{display:inline-block;visibility:hidden}.text-input:active+.extra-help,.text-input:focus+.extra-help{visibility:visible}.gw,.grid-wrapper{margin-left:-18px;list-style:none;margin-bottom:0}.gw--rev>.g,.grid-wrapper--rev>.grid{float:right}.gw>.gw,.grid-wrapper>.grid-wrapper{margin-left:0}.g,.grid{float:left;padding-left:18px}.flexbox{display:table;width:100%}html.flexbox{display:block;width:auto}.flexbox__item{display:table-cell;vertical-align:middle}.text-cols--2,.text-cols--3,.text-cols--4,.text-cols--5{-webkit-column-gap:18px;-moz-column-gap:18px;-ms-column-gap:18px;-o-column-gap:18px;column-gap:18px}.text-cols--2{-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}.text-cols--3{-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}.text-cols--4{-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}.text-cols--5{-webkit-column-count:5;-moz-column-count:5;-ms-column-count:5;-o-column-count:5;column-count:5}.nav{list-style:none;margin-left:0}.nav>li,.nav>li>a{display:inline-block;*display:inline;zoom:1}.nav--stacked>li{display:list-item}.nav--stacked>li>a{display:block}.nav--banner{text-align:center}.nav--block,.options{line-height:1}.nav--block>li>a,.options>li>a{padding:9px}.nav--fit{display:table;width:100%}.nav--fit>li{display:table-cell}.nav--fit>li>a{display:block}.nav--keywords>li:after{content:", "}.nav--keywords>li:last-child:after{display:none}.options>li>a{border:0 solid #ccc;border-width:1px;border-left-width:0}.options>li:first-child>a{border-left-width:1px;border-radius:4px 0 0 4px}.options>li:last-child>a{border-radius:0 4px 4px 0}.pagination{text-align:center}.pagination>li{padding:9px}.pagination>li>a{padding:9px;margin:-9px}.pagination__first a:before{content:"« "}.pagination__last a:after{content:" »"}.breadcrumb>li+li:before{content:"» "}.breadcrumb--path>li+li:before{content:"/ "}.breadcrumb>li+li[data-breadcrumb]:before{content:attr(data-breadcrumb) " "}.breadcrumb__root{font-weight:bold}.media{display:block}.media__img{float:left;margin-right:18px}.media__img--rev{float:right;margin-left:18px}.media__img img,.media__img--rev img{display:block}.media__body{overflow:hidden}.media__body,.media__body>:last-child{margin-bottom:0}.islet .media__img{margin-right:9px}.islet .media__img--rev{margin-left:9px}.marginalia{font-size:12px;font-size:1rem;line-height:1.5}@media (min-width: 1024px){.marginalia{position:relative}.marginalia__body,.marginalia__body--right{position:absolute}.marginalia__body{right:100%;padding-right:18px;text-align:right}.marginalia__body--right{left:100%;padding-left:18px;text-align:left}}.island,.islet{display:block}.island{padding:18px}.island>:last-child,.islet>:last-child{margin-bottom:0}.islet{padding:9px}.block-list,.block-list>li{border:0 solid #ccc}.block-list{list-style:none;margin-left:0;border-top-width:1px}.block-list>li{border-bottom-width:1px;padding:9px}.block-list__link{display:block;padding:9px;margin:-9px}.matrix,.matrix>li{border:0 solid #ccc}.matrix{list-style:none;margin-left:0;border-top-width:1px;border-left-width:1px}.matrix>li{padding:9px;float:left;border-right-width:1px;border-bottom-width:1px}.matrix__link{display:block;padding:9px;margin:-9px}.multi-list{list-style:none;margin-left:0}.multi-list>li{float:left}.two-cols>li{width:50%}.three-cols>li{width:33.333%}.four-cols>li{width:25%}.five-cols>li{width:20%}.matrix>.all-cols,.multi-list>.all-cols{width:100%}.split{text-align:right;list-style:none;margin-left:0}.split__title{text-align:left;float:left;clear:left}.this-or-this{display:table;width:100%;text-align:center}.this-or-this__this,.this-or-this__or{display:table-cell;vertical-align:middle}.link-complex,.link-complex:hover,.link-complex:active,.link-complex:focus{text-decoration:none}.link-complex:hover .link-complex__target,.link-complex:active .link-complex__target,.link-complex:focus .link-complex__target{text-decoration:underline}.flyout,.flyout--alt{position:relative;overflow:hidden}.flyout__content{position:absolute;top:100%;left:-99999px}.flyout:hover,.flyout--alt:hover{overflow:visible}.flyout:hover>.flyout__content{left:0}.flyout--alt:hover>.flyout__content{top:0;left:100%}.s,.i{display:inline-block;line-height:1;position:relative;vertical-align:middle;zoom:1;font-style:normal;font-weight:normal;text-align:center}.s{background-image:url(/path/to/your/sprite.png);width:16px;height:16px;top:-1px;overflow:hidden;*text-indent:-9999px}.s:before{content:"";display:block;width:0;height:100%}.i{font-size:16px;width:1em;height:1em}.i:before{content:attr(data-icon)}.i--large{font-size:32px}.i--huge{font-size:64px}.i--natural{font-size:inherit}.icon-text>.icon-text__icon{margin-right:4.5px}.icon-text--rev>.icon-text__icon{margin-left:4.5px}.pill,.loz{display:inline-block;min-width:1.0em;padding-right:0.25em;padding-left:0.25em;text-align:center;background-color:#ccc;color:#fff;border-radius:100px}.loz{border-radius:4px}.rule{color:#ccc;border:none;border-bottom-width:1px;border-bottom-style:solid;margin-bottom:17px;margin-bottom:1.41667rem}.rule--dotted{border-bottom-style:dotted}.rule--dashed{border-bottom-style:dashed}.rule--ornament{position:relative}.rule--ornament:after{content:"§";position:absolute;top:0;right:0;left:0;line-height:0;text-align:center}.rule--ornament[data-ornament]:after{content:attr(data-ornament)}.stat-group{margin-left:-18px}.stat{float:left;margin-left:18px;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column}.stat__title{-webkit-order:2;-moz-order:2;-ms-order:2;-o-order:2;order:2;-ms-flex-order:2}.stat__value{margin-left:0;-webkit-order:1;-moz-order:1;-ms-order:1;-o-order:1;order:1;-ms-flex-order:1}.greybox,.graybox{font-size:12px;font-size:1rem;line-height:1.5;font-family:sans-serif;text-align:center;background-color:rgba(0,0,0,0.2);color:#fff}.greybox a,.graybox a{color:#fff;text-decoration:underline}.greybox--small,.graybox--small{line-height:36px}.greybox--medium,.graybox--medium{line-height:72px}.greybox--large,.graybox--large{line-height:144px}.greybox--huge,.graybox--huge{line-height:288px}.greybox--gigantic,.graybox--gigantic{line-height:576px}.one-whole{width:100%}.one-half,.two-quarters,.three-sixths,.four-eighths,.five-tenths,.six-twelfths{width:50%}.one-third,.two-sixths,.four-twelfths{width:33.333%}.two-thirds,.four-sixths,.eight-twelfths{width:66.666%}.one-quarter,.two-eighths,.three-twelfths{width:25%}.three-quarters,.six-eighths,.nine-twelfths{width:75%}.one-fifth,.two-tenths{width:20%}.two-fifths,.four-tenths{width:40%}.three-fifths,.six-tenths{width:60%}.four-fifths,.eight-tenths{width:80%}.one-sixth,.two-twelfths{width:16.666%}.five-sixths,.ten-twelfths{width:83.333%}.one-eighth{width:12.5%}.three-eighths{width:37.5%}.five-eighths{width:62.5%}.seven-eighths{width:87.5%}.one-tenth{width:10%}.three-tenths{width:30%}.seven-tenths{width:70%}.nine-tenths{width:90%}.one-twelfth{width:8.333%}.five-twelfths{width:41.666%}.seven-twelfths{width:58.333%}.eleven-twelfths{width:91.666%}@media only screen and (max-width: 480px){.palm-one-whole{width:100%}.palm-one-half,.palm-two-quarters,.palm-three-sixths,.palm-four-eighths,.palm-five-tenths,.palm-six-twelfths{width:50%}.palm-one-third,.palm-two-sixths,.palm-four-twelfths{width:33.333%}.palm-two-thirds,.palm-four-sixths,.palm-eight-twelfths{width:66.666%}.palm-one-quarter,.palm-two-eighths,.palm-three-twelfths{width:25%}.palm-three-quarters,.palm-six-eighths,.palm-nine-twelfths{width:75%}.palm-one-fifth,.palm-two-tenths{width:20%}.palm-two-fifths,.palm-four-tenths{width:40%}.palm-three-fifths,.palm-six-tenths{width:60%}.palm-four-fifths,.palm-eight-tenths{width:80%}.palm-one-sixth,.palm-two-twelfths{width:16.666%}.palm-five-sixths,.palm-ten-twelfths{width:83.333%}.palm-one-eighth{width:12.5%}.palm-three-eighths{width:37.5%}.palm-five-eighths{width:62.5%}.palm-seven-eighths{width:87.5%}.palm-one-tenth{width:10%}.palm-three-tenths{width:30%}.palm-seven-tenths{width:70%}.palm-nine-tenths{width:90%}.palm-one-twelfth{width:8.333%}.palm-five-twelfths{width:41.666%}.palm-seven-twelfths{width:58.333%}.palm-eleven-twelfths{width:91.666%}}@media only screen and (min-width: 481px) and (max-width: 1023px){.lap-one-whole{width:100%}.lap-one-half,.lap-two-quarters,.lap-three-sixths,.lap-four-eighths,.lap-five-tenths,.lap-six-twelfths{width:50%}.lap-one-third,.lap-two-sixths,.lap-four-twelfths{width:33.333%}.lap-two-thirds,.lap-four-sixths,.lap-eight-twelfths{width:66.666%}.lap-one-quarter,.lap-two-eighths,.lap-three-twelfths{width:25%}.lap-three-quarters,.lap-six-eighths,.lap-nine-twelfths{width:75%}.lap-one-fifth,.lap-two-tenths{width:20%}.lap-two-fifths,.lap-four-tenths{width:40%}.lap-three-fifths,.lap-six-tenths{width:60%}.lap-four-fifths,.lap-eight-tenths{width:80%}.lap-one-sixth,.lap-two-twelfths{width:16.666%}.lap-five-sixths,.lap-ten-twelfths{width:83.333%}.lap-one-eighth{width:12.5%}.lap-three-eighths{width:37.5%}.lap-five-eighths{width:62.5%}.lap-seven-eighths{width:87.5%}.lap-one-tenth{width:10%}.lap-three-tenths{width:30%}.lap-seven-tenths{width:70%}.lap-nine-tenths{width:90%}.lap-one-twelfth{width:8.333%}.lap-five-twelfths{width:41.666%}.lap-seven-twelfths{width:58.333%}.lap-eleven-twelfths{width:91.666%}}@media only screen and (max-width: 1023px){.portable-one-whole{width:100%}.portable-one-half,.portable-two-quarters,.portable-three-sixths,.portable-four-eighths,.portable-five-tenths,.portable-six-twelfths{width:50%}.portable-one-third,.portable-two-sixths,.portable-four-twelfths{width:33.333%}.portable-two-thirds,.portable-four-sixths,.portable-eight-twelfths{width:66.666%}.portable-one-quarter,.portable-two-eighths,.portable-three-twelfths{width:25%}.portable-three-quarters,.portable-six-eighths,.portable-nine-twelfths{width:75%}.portable-one-fifth,.portable-two-tenths{width:20%}.portable-two-fifths,.portable-four-tenths{width:40%}.portable-three-fifths,.portable-six-tenths{width:60%}.portable-four-fifths,.portable-eight-tenths{width:80%}.portable-one-sixth,.portable-two-twelfths{width:16.666%}.portable-five-sixths,.portable-ten-twelfths{width:83.333%}.portable-one-eighth{width:12.5%}.portable-three-eighths{width:37.5%}.portable-five-eighths{width:62.5%}.portable-seven-eighths{width:87.5%}.portable-one-tenth{width:10%}.portable-three-tenths{width:30%}.portable-seven-tenths{width:70%}.portable-nine-tenths{width:90%}.portable-one-twelfth{width:8.333%}.portable-five-twelfths{width:41.666%}.portable-seven-twelfths{width:58.333%}.portable-eleven-twelfths{width:91.666%}}@media only screen and (min-width: 1024px){.desk-one-whole{width:100%}.desk-one-half,.desk-two-quarters,.desk-three-sixths,.desk-four-eighths,.desk-five-tenths,.desk-six-twelfths{width:50%}.desk-one-third,.desk-two-sixths,.desk-four-twelfths{width:33.333%}.desk-two-thirds,.desk-four-sixths,.desk-eight-twelfths{width:66.666%}.desk-one-quarter,.desk-two-eighths,.desk-three-twelfths{width:25%}.desk-three-quarters,.desk-six-eighths,.desk-nine-twelfths{width:75%}.desk-one-fifth,.desk-two-tenths{width:20%}.desk-two-fifths,.desk-four-tenths{width:40%}.desk-three-fifths,.desk-six-tenths{width:60%}.desk-four-fifths,.desk-eight-tenths{width:80%}.desk-one-sixth,.desk-two-twelfths{width:16.666%}.desk-five-sixths,.desk-ten-twelfths{width:83.333%}.desk-one-eighth{width:12.5%}.desk-three-eighths{width:37.5%}.desk-five-eighths{width:62.5%}.desk-seven-eighths{width:87.5%}.desk-one-tenth{width:10%}.desk-three-tenths{width:30%}.desk-seven-tenths{width:70%}.desk-nine-tenths{width:90%}.desk-one-twelfth{width:8.333%}.desk-five-twelfths{width:41.666%}.desk-seven-twelfths{width:58.333%}.desk-eleven-twelfths{width:91.666%}}[class*="push--"]{position:relative}.push--one-whole{left:100%}.push--one-half,.push--two-quarters,.push--three-sixths,.push--four-eighths,.push--five-tenths,.push--six-twelfths{left:50%}.push--one-third,.push--two-sixths,.push--four-twelfths{left:33.333%}.push--two-thirds,.push--four-sixths,.push--eight-twelfths{left:66.666%}.push--one-quarter,.push--two-eighths,.push--three-twelfths{left:25%}.push--three-quarters,.push--six-eighths,.push--nine-twelfths{left:75%}.push--one-fifth,.push--two-tenths{left:20%}.push--two-fifths,.push--four-tenths{left:40%}.push--three-fifths,.push--six-tenths{left:60%}.push--four-fifths,.push--eight-tenths{left:80%}.push--one-sixth,.push--two-twelfths{left:16.666%}.push--five-sixths,.push--ten-twelfths{left:83.333%}.push--one-eighth{left:12.5%}.push--three-eighths{left:37.5%}.push--five-eighths{left:62.5%}.push--seven-eighths{left:87.5%}.push--one-tenth{left:10%}.push--three-tenths{left:30%}.push--seven-tenths{left:70%}.push--nine-tenths{left:90%}.push--one-twelfth{left:8.333%}.push--five-twelfths{left:41.666%}.push--seven-twelfths{left:58.333%}.push--eleven-twelfths{left:91.666%}[class*="pull--"]{position:relative}.pull--one-whole{right:100%}.pull--one-half,.pull--two-quarters,.pull--three-sixths,.pull--four-eighths,.pull--five-tenths,.pull--six-twelfths{right:50%}.pull--one-third,.pull--two-sixths,.pull--four-twelfths{right:33.333%}.pull--two-thirds,.pull--four-sixths,.pull--eight-twelfths{right:66.666%}.pull--one-quarter,.pull--two-eighths,.pull--three-twelfths{right:25%}.pull--three-quarters,.pull--six-eighths,.pull--nine-twelfths{right:75%}.pull--one-fifth,.pull--two-tenths{right:20%}.pull--two-fifths,.pull--four-tenths{right:40%}.pull--three-fifths,.pull--six-tenths{right:60%}.pull--four-fifths,.pull--eight-tenths{right:80%}.pull--one-sixth,.pull--two-twelfths{right:16.666%}.pull--five-sixths,.pull--ten-twelfths{right:83.333%}.pull--one-eighth{right:12.5%}.pull--three-eighths{right:37.5%}.pull--five-eighths{right:62.5%}.pull--seven-eighths{right:87.5%}.pull--one-tenth{right:10%}.pull--three-tenths{right:30%}.pull--seven-tenths{right:70%}.pull--nine-tenths{right:90%}.pull--one-twelfth{right:8.333%}.pull--five-twelfths{right:41.666%}.pull--seven-twelfths{right:58.333%}.pull--eleven-twelfths{right:91.666%}.brand{font-family:"Helvetica Neue",sans-serif!important;color:#4a8ec2!important}.brand-face{font-family:"Helvetica Neue",sans-serif!important}.brand-color,.brand-colour{color:#4a8ec2!important}.fr{float:right}.fl{float:left}.text-center,.text-centre{text-align:center}.full-bleed{margin-right:-18px;margin-left:-18px}.islet .full-bleed{margin-right:-9px;margin-left:-9px}.informative{cursor:help}.muted{opacity:0.5;filter:alpha(opacity=50)}.proceed{text-align:right}.go:after{content:" »"}.caps{text-transform:uppercase}.accessibility{position:absolute;left:-99999px}[dir=rtl] .accessibility{left:auto;right:-99999px}.hide{position:absolute;left:-9999px}@media only screen and (max-width: 480px){.hide--palm{position:absolute;left:-9999px}}@media only screen and (min-width: 481px) and (max-width: 1023px){.hide--lap{position:absolute;left:-9999px}}@media only screen and (max-width: 1023px){.hide--portable{position:absolute;left:-9999px}}@media only screen and (min-width: 1024px){.hide--desk{position:absolute;left:-9999px}} From 565039c7f710881d25d7699254dfd938a263cc42 Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Wed, 16 Jan 2013 22:37:55 +0000 Subject: [PATCH 03/12] Adjust prompt sizes --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9852a26..98743af 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,11 @@

beautons – a beautifully simple button toolkit

-

Download or View on GitHub +

+ Download + or + View on GitHub +

From 170031c741dcd917542422de0717042f25d84dcf Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Wed, 16 Jan 2013 22:40:54 +0000 Subject: [PATCH 04/12] Update beautons --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index b1ba8f0..9a1a8e5 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;white-space:nowrap;cursor:pointer;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}.btn,.btn:hover{text-decoration:none}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}.btn,.btn:hover{text-decoration:none}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file From bdb94ee274a3cfaa2fa3fc3ad62ba00d3ccd850b Mon Sep 17 00:00:00 2001 From: WillsB3 Date: Thu, 17 Jan 2013 10:07:05 +0000 Subject: [PATCH 05/12] Correct "positive actions" to "destructive actions" I assume the double use of "Positive" was a typo. Traditionally destructive actions are coloured red. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 98743af..b6cf404 100644 --- a/index.html +++ b/index.html @@ -174,7 +174,7 @@

beautons – a beautifully simple button toolkit

.btn .btn--negative From cf14576ece38dbc77577a80d9182e295868c350b Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Tue, 26 Feb 2013 21:46:56 +0000 Subject: [PATCH 06/12] Update version --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index 9a1a8e5..fe9ea8c 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}.btn,.btn:hover{text-decoration:none}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}input.btn{outline:10px solid red}.btn,.btn:hover{text-decoration:none}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file From 681cf7dd63ea875874770c2dc29387fe28a09373 Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Tue, 26 Feb 2013 21:54:38 +0000 Subject: [PATCH 07/12] Update version --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index fe9ea8c..93c1c25 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}input.btn{outline:10px solid red}.btn,.btn:hover{text-decoration:none}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}input.btn{outline:10px solid red}.btn,.btn:hover{text-decoration:none}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text;box-shadow:none}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file From 44fccf9b29ba9ddb2b2a74adeebc1d4dd9fdd22d Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Tue, 26 Feb 2013 22:07:10 +0000 Subject: [PATCH 08/12] Update version --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index 93c1c25..13bd87b 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}input.btn{outline:10px solid red}.btn,.btn:hover{text-decoration:none}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text;box-shadow:none}.btn--soft{border-radius:200px}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}input.btn{outline:10px solid red}.btn,.btn:hover{text-decoration:none}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file From 8a6a602fd097f650d2e168ba51429633ff2d525f Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Thu, 28 Feb 2013 19:32:41 +0000 Subject: [PATCH 09/12] Update version --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index 13bd87b..85b3cb8 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;padding-right:1em;padding-left:1em;color:#fff;background-color:#2c77ba;border-radius:4px}input.btn{outline:10px solid red}.btn,.btn:hover{text-decoration:none}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4}.btn--huge{padding-right:2em;padding-left:2em;line-height:5}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file From 9e3e8b0aa7b350f870176ae66bbafb406ca27e02 Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Thu, 28 Feb 2013 21:50:34 +0000 Subject: [PATCH 10/12] Update version --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index 85b3cb8..52763bd 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:text;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file From 2900540988c53af013d8277e3375eb85b61d1995 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 28 Apr 2014 14:34:44 +0100 Subject: [PATCH 11/12] Use
- Positive actions, like ‘delete’ or ‘unfriend’. + Destructive actions, like ‘delete’ or ‘unfriend’.
- Button + .btn @@ -72,7 +72,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--small @@ -83,7 +83,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--large @@ -94,7 +94,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--huge @@ -105,7 +105,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--full @@ -120,7 +120,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--alpha @@ -131,7 +131,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--beta @@ -142,7 +142,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--gamma @@ -157,7 +157,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--positive @@ -168,7 +168,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--negative @@ -179,7 +179,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--inactive @@ -194,7 +194,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--soft @@ -205,7 +205,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--hard @@ -220,7 +220,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--large .btn--positive @@ -231,7 +231,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--negative .btn--full .btn--soft @@ -242,7 +242,7 @@

beautons – a beautifully simple button toolkit

- Button + .btn .btn--positive .btn--alpha .btn--small @@ -253,7 +253,7 @@

beautons – a beautifully simple button toolkit

-

A button in a paragraph.

+

A in a paragraph.

 .btn .btn--natural From f969605e56046945c7cddb3fef36319adba9fcfe Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 28 Apr 2014 14:40:31 +0100 Subject: [PATCH 12/12] Don't kill keyboard focus indication --- beautons.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beautons.min.css b/beautons.min.css index 52763bd..ee636a8 100644 --- a/beautons.min.css +++ b/beautons.min.css @@ -2,4 +2,4 @@ * * @csswizardry -- csswizardry.com/beautons * - */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file + */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover,.btn:focus{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0} \ No newline at end of file