Created
January 25, 2013 10:46
-
-
Save Narven/4633450 to your computer and use it in GitHub Desktop.
nrvhelper is a css helper that i use for fast prototyping
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */ | |
| /** | |
| * CSS HELPERS | |
| * | |
| * Copyright (c) <2010> narvenblog.com | |
| * | |
| * | |
| * @author Pedro Luz <narvenblog@gmail.com> | |
| * @copyright 2007-2012 http://narvenblog.com | |
| * @link http://narvenblog.com | |
| */ | |
| .float-left { float : left !important; } | |
| .float-right { float : right !important; } | |
| .align-left { text-align : left !important; } | |
| .align-justify { text-align : justify !important; } | |
| .align-right { text-align : right !important; } | |
| .align-center { text-align : center !important; } | |
| .align-middle { vertical-align : middle !important; } | |
| .align-top { vertical-align : top !important; } | |
| .align-bottom { vertical-align : bottom !important; } | |
| .width-auto { width : auto !important; } | |
| .width-center { margin : 0 auto !important; } | |
| .font-bold { font-weight : bold !important; } | |
| .font-italic { font-style : italic !important; } | |
| .width-10 { width : 10% !important; } | |
| .width-20 { width : 20% !important; } | |
| .width-40 { width : 40% !important; } | |
| .width-60 { width : 60%; } | |
| .width-80 {width : 80%; } | |
| .width-100 {width : 100%; } | |
| .bg-yellow { background : #aba000; } | |
| .bg-blue { background : #006699; } | |
| .bg-badass { background : #bada55; } | |
| /* =MARGINS / PADDINGS | |
| ======================================================================================= */ | |
| .margin { margin : 0 !important; } | |
| .margin-5 { margin : 5px !important; } | |
| .margin-10 { margin : 10px !important; } | |
| .padding { padding : 0 !important; } | |
| .padding-2 { padding : 2px !important; } | |
| .padding-5 { padding : 5px !important; } | |
| .padding-10 { padding : 10px !important; } | |
| .padding-t2 { padding-top : 2px !important; } | |
| .padding-t5 { padding-top : 5px !important; } | |
| .padding-t10 { padding-top : 10px !important; } | |
| .padding-t20 { padding-top : 20px !important; } | |
| .padding-r2 { padding-right : 2px !important; } | |
| .padding-r5 { padding-right : 5px !important; } | |
| .padding-b2 { padding-bottom : 2px !important; } | |
| .padding-b5 { padding-bottom : 5px !important; } | |
| .padding-l2 { padding-left : 2px !important; } | |
| .padding-l5 { padding-left : 5px !important; } | |
| .padding-l10 { padding-left : 10px !important; } | |
| /* =VISIBILITY | |
| ======================================================================================= */ | |
| .hide { visibility : hidden; } | |
| .hideit { position: absolute; top: -9999px; left: -9999px; } | |
| .clear | |
| { | |
| overflow : hidden; | |
| width : 100%; | |
| } | |
| .horizontal li | |
| { | |
| float : left; | |
| list-style-type : none; | |
| vertical-align : middle; | |
| } | |
| .vertical li | |
| { | |
| display : block; | |
| list-style-type : none; | |
| } | |
| .font-small | |
| { | |
| font-size : 10px !important; | |
| } | |
| .font-large | |
| { | |
| font-size : large; | |
| } | |
| .font-bold | |
| { | |
| font-weight : bold; | |
| } | |
| .line-height-24 { line-height:24px; } | |
| .col-20 { width: 20px !important; max-width: 20px !important; } | |
| .col-40 { width : 40px !important; max-width: 40px !important; } | |
| .col-60 { width: 60px !important; max-width: 60px !important; } | |
| .col-80 { width: 80px !important; max-width: 80px !important; } | |
| .col-100 { width: 100px !important; max-width: 100px !important; } | |
| .col-120 { width: 120px !important; max-width: 120px !important; } | |
| .col-140 { width: 140px !important; max-width: 140px !important; } | |
| .col-160 { width: 160px !important; max-width: 160px !important; } | |
| .col-180 { width: 180px !important; max-width: 180px !important; } | |
| .col-200 { width: 200px !important; max-width: 200px !important; } | |
| .col-220 { width: 220px !important; max-width: 220px !important; } | |
| .col-240 { width: 240px !important; max-width: 240px !important; } | |
| .col-260 { width: 260px !important; max-width: 260px !important; } | |
| .col-280 { width: 280px !important; max-width: 280px !important; } | |
| .col-300 { width: 300px !important; max-width : 300px !important; } | |
| .col-320 { width: 320px !important; max-width : 320px !important; } | |
| .col-340 { width: 340px !important; max-width : 340px !important; } | |
| .col-360 { width: 360px !important; max-width : 360px !important; } | |
| .col-380 { width: 380px !important; max-width : 380px !important; } | |
| .col-400 { width: 400px !important; max-width : 400px !important; } | |
| .col-420 { width: 420px !important; max-width : 420px !important; } | |
| .col-440 { width: 440px !important; max-width : 440px !important; } | |
| .col-460 { width: 460px !important; max-width : 460px !important; } | |
| .col-480 { width: 480px !important; max-width : 480px !important; } | |
| .col-500 { width: 500px !important; max-width : 500px !important; } | |
| .no-style { list-style: none;} | |
| .border-collapse { border-collapse: collapse; } | |
| tr.border-bottom td { border-bottom: 1px solid #636363; } | |
| .justified | |
| { | |
| text-align: justify; | |
| line-height: 23px; | |
| } | |
| .cool-text p | |
| { | |
| margin-bottom: 10px; | |
| } | |
| table.soft-table | |
| { | |
| border-collapse: collapse; | |
| width: 100%; | |
| border-bottom: 2px solid #636363; | |
| margin: 20px 0; | |
| } | |
| table.soft-table caption | |
| { | |
| font-weight: bold; | |
| text-align: left; | |
| padding: 5px 0; | |
| } | |
| table.soft-table thead | |
| { | |
| border-bottom: 2px solid #636363; | |
| padding: 5px 0; | |
| color: #fff; | |
| } | |
| table.soft-table thead tr th, | |
| table.soft-table thead tr td | |
| { | |
| padding: 5px 0; | |
| background-color: none; | |
| } | |
| table.soft-table tbody | |
| { | |
| } | |
| table.soft-table tbody tr td | |
| { | |
| border-bottom: 1px solid #636363; | |
| padding: 5px 2px; | |
| } | |
| table.soft-table tbody tr:hover | |
| { | |
| background: #262626; | |
| } | |
| table.soft-table col.odd { background: #262626; } | |
| table.soft-table col.even { } | |
| .form-table | |
| { | |
| border-collapse: collapse; | |
| border-bottom: 2px solid #636363; | |
| margin: 20px 0; | |
| width: 100%; | |
| } | |
| .form-table tfoot tr td | |
| { | |
| text-align: right; | |
| } | |
| /* =ALIGN | |
| ======================================================================================= */ | |
| .float-left { float : left !important; } | |
| .float-right { float : right !important; } | |
| .align-left { text-align : left !important; } | |
| .align-right { text-align : right !important; } | |
| .align-center { text-align : center !important; } | |
| .align-middle { vertical-align : middle !important; } | |
| .align-top { vertical-align : top !important; } | |
| .align-bottom { vertical-align : bottom !important; } | |
| .width-auto { width : auto !important; } | |
| .width-center { margin : 0 auto !important; } | |
| .font-bold | |
| { | |
| font-weight : bold !important; | |
| } | |
| .font-italic | |
| { | |
| font-style : italic !important; | |
| } | |
| .width-20 | |
| { | |
| width : 20%; | |
| } | |
| .width-40 | |
| { | |
| width : 40%; | |
| } | |
| .width-60 | |
| { | |
| width : 60%; | |
| } | |
| .width-80 | |
| { | |
| width : 80%; | |
| } | |
| .width-100 | |
| { | |
| width : 100%; | |
| } | |
| .bg-yellow | |
| { | |
| background : #aba000; | |
| } | |
| .bg-blue | |
| { | |
| background : #006699; | |
| } | |
| .bg-badass | |
| { | |
| background : #bada55; | |
| } | |
| .margin | |
| { | |
| margin : 0 !important; | |
| } | |
| .margin-5 | |
| { | |
| margin : 5px !important; | |
| } | |
| .margin-10 | |
| { | |
| margin : 10px !important; | |
| } | |
| .padding | |
| { | |
| padding : 0 !important; | |
| } | |
| .padding-2 | |
| { | |
| padding : 2px !important; | |
| } | |
| .padding-5 | |
| { | |
| padding : 5px !important; | |
| } | |
| .padding-10 | |
| { | |
| padding : 10px !important; | |
| } | |
| .padding-t2 | |
| { | |
| padding-top : 2px !important; | |
| } | |
| .padding-r2 | |
| { | |
| padding-right : 2px !important; | |
| } | |
| .padding-b2 | |
| { | |
| padding-bottom : 2px !important; | |
| } | |
| .padding-l2 | |
| { | |
| padding-left : 2px !important; | |
| } | |
| .padding-t5 | |
| { | |
| padding-top : 5px !important; | |
| } | |
| .padding-t10 | |
| { | |
| padding-top : 5px !important; | |
| } | |
| .padding-r5 | |
| { | |
| padding-right : 5px !important; | |
| } | |
| .padding-b5 | |
| { | |
| padding-bottom : 5px !important; | |
| } | |
| .padding-l5 | |
| { | |
| padding-left : 5px !important; | |
| } | |
| .padding-tb5 | |
| { | |
| padding-top : 5px !important; | |
| } | |
| .padding-lr5 | |
| { | |
| padding-right : 5px !important; | |
| } | |
| .padding-tb2 | |
| { | |
| padding-top : 2px !important; | |
| } | |
| .padding-lr2 | |
| { | |
| padding-right : 2px !important; | |
| } | |
| .margin-t5 { margin-top: 5px !important; } | |
| .margin-b5 { margin-bottom: 5px !important; } | |
| .margin-l5 { margin-left: 5px !important; } | |
| .margin-r5 { margin-right: 5px !important; } | |
| .margin-t10 { margin-top: 10px !important; } | |
| .margin-b10 { margin-bottom: 10px !important; } | |
| .margin-l10 { margin-left: 10px !important; } | |
| .margin-r10 { margin-right: 10px !important; } | |
| .client-text-color | |
| { | |
| color: #FF2150; | |
| } | |
| .hide | |
| { | |
| display: none; | |
| } | |
| /* Generic Utility */ | |
| .hideit { position: absolute; top: -9999px; left: -9999px; } | |
| .clear | |
| { | |
| overflow : hidden; | |
| width : 100%; | |
| } | |
| .horizontal li | |
| { | |
| float : left; | |
| list-style-type : none; | |
| vertical-align : middle; | |
| } | |
| .vertical li | |
| { | |
| display : block; | |
| list-style-type : none; | |
| } | |
| .font-small | |
| { | |
| font-size : 10px !important; | |
| } | |
| .font-large | |
| { | |
| font-size : large; | |
| } | |
| .font-bold | |
| { | |
| font-weight : bold; | |
| } | |
| .no-style | |
| { | |
| list-style: none; | |
| } | |
| .border-collapse | |
| { | |
| border-collapse: collapse; | |
| } | |
| .cool-text, | |
| .cool-text p | |
| { | |
| line-height: 22px; | |
| margin: 2px 0 8px 0; | |
| } | |
| .cool-text p | |
| { | |
| text-align: justify; | |
| } | |
| .cool-text ul, | |
| .cool-text ol | |
| { | |
| line-height: 22px; | |
| margin: 2px 0 8px 0; | |
| padding: 0 0 0 40px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment