0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update button classes to reduce file size & increase reusability

Browse source 
In an effort to cut down on file size & make the button classes more modular, I reduced the selectors of the buttons to no longer be attached to the <button> element.

now .btn-a, b, c, & small can be combined with a generic .btn class (which has the same styles as <button> and this class combo can be added to <a> elements, inputs with a type of submit or anything that one would like to look like a button.

I used terminal to run a gzip compression on the minified file and it also reduced the file size by 2 bytes
This commit is contained in:
Scott O'Hara 2014-01-18 10:53:44 -05:00
parent 205fdf9c6b
commit c118767b6a
2 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
entireframework.min.css vendored
View file

@ -1 +1 @@
body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}i,button{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}button.btn-a{background:#0ae}button.btn-a:hover{background:#09d}button.btn-a:active{background:#08b}button.btn-b{background:#3c5}button.btn-b:hover{background:#2b4}button.btn-b:active{background:#2a4}button.btn-c{background:#d33}button.btn-c:hover{background:#c22}button.btn-c:active{background:#b22}button.btn-small{padding:7px 19px;font-size:16px}.row{line-height:2em;margin-top:2%;height:2em}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}ico{font-size:2.04em}.ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}.navbar{width:100%;background:black;color:white;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:white;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:white}.navbar input,.navbar button{margin-top:-20px}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}
body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media (max-width: 870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media (max-width: 520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}i,button,.btn{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button,.btn{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active{background:#b22}.btn-small{padding:7px 19px;font-size:16px}.row{line-height:2em;margin-top:2%;height:2em}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}ico{font-size:2.04em}.ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}.navbar{width:100%;background:#000;color:#fff;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:#fff;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:#fff}.navbar input,.navbar button{margin-top:-20px}@media (max-width: 500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}

66
less/buttons.less
View file

@ -1,8 +1,8 @@
i, button {
i, button, .btn {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
button {
button, .btn {
background: #aaa;
box-shadow: 3px 3px #000; /* unshortenable */
color: #fff;
@ -12,35 +12,39 @@ button {
margin: .3em .7em;
cursor: pointer;
border: none;
&.btn-a {
background: #0ae;
&:hover {
background: #09d; /* darken(@btn-a-bg, 5%) */
}
&:active {
background: #08b; /* darken(@btn-a-bg, 10%) */
}
}
.btn-a {
background: #0ae;
&:hover {
background: #09d; /* darken(@btn-a-bg, 5%) */
}
&.btn-b {
background: #3c5;
&:hover {
background: #2b4; /* darken(@btn-b-bg, 5%) */
}
&:active {
background: #2a4; /* darken(@btn-b-bg, 10%) */
}
}
&.btn-c {
background: #d33;
&:hover {
background: #c22; /* darken(@btn-c-bg, 5%) */
}
&:active {
background: #b22; /* darken(@btn-c-bg, 10%) */
}
}
&.btn-small {
padding: 7px 19px;
font-size: 16px;
&:active {
background: #08b; /* darken(@btn-a-bg, 10%) */
}
}
.btn-b {
background: #3c5;
&:hover {
background: #2b4; /* darken(@btn-b-bg, 5%) */
}
&:active {
background: #2a4; /* darken(@btn-b-bg, 10%) */
}
}
.btn-c {
background: #d33;
&:hover {
background: #c22; /* darken(@btn-c-bg, 5%) */
}
&:active {
background: #b22; /* darken(@btn-c-bg, 10%) */
}
}
.btn-small {
padding: 7px 19px;
font-size: 16px;
}