-
-
-
-
-
-
-
-
-
- Permalink
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Join GitHub today
-GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
- Sign up -
-
-
-
-
-
-
-
- GitHub is where the world builds software
-Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
-
- Sign up for free
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- | - | /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– | -
| - | Taken from https://codepen.io/chriddyp/pen/bWLwgP.css | -
| - | - Grid | -
| - | - Base Styles | -
| - | - Typography | -
| - | - Links | -
| - | - Buttons | -
| - | - Forms | -
| - | - Lists | -
| - | - Code | -
| - | - Tables | -
| - | - Spacing | -
| - | - Utilities | -
| - | - Clearing | -
| - | - Media Queries | -
| - | - Custom App CSS */ | -
| - | - | -
| - | - | -
| - | /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | .container { | -
| - | position: relative; | -
| - | width: 100%; | -
| - | max-width: 960px; | -
| - | margin: 0 auto; | -
| - | padding: 0 20px; | -
| - | box-sizing: border-box; | -
| - | } | -
| - | .column, .columns { | -
| - | width: 100%; | -
| - | float: left; | -
| - | box-sizing: border-box; | -
| - | } | -
| - | /* For devices larger than 400px */ | -
| - | @media (min-width: 400px) { | -
| - | .container { | -
| - | width: 85%; | -
| - | padding: 0; | -
| - | } | -
| - | } | -
| - | /* For devices larger than 550px */ | -
| - | @media (min-width: 550px) { | -
| - | .container { | -
| - | width: 80%; | -
| - | } | -
| - | .column, .columns { | -
| - | margin-left: 4%; | -
| - | } | -
| - | .column:first-child, .columns:first-child { | -
| - | margin-left: 0; | -
| - | } | -
| - | .one.column, .one.columns { | -
| - | width: 4.66666666667%; | -
| - | } | -
| - | .two.columns { | -
| - | width: 13.3333333333%; | -
| - | } | -
| - | .three.columns { | -
| - | width: 22%; | -
| - | } | -
| - | .four.columns { | -
| - | width: 30.6666666667%; | -
| - | } | -
| - | .five.columns { | -
| - | width: 39.3333333333%; | -
| - | } | -
| - | .six.columns { | -
| - | width: 48%; | -
| - | } | -
| - | .seven.columns { | -
| - | width: 56.6666666667%; | -
| - | } | -
| - | .eight.columns { | -
| - | width: 65.3333333333%; | -
| - | } | -
| - | .nine.columns { | -
| - | width: 74.0%; | -
| - | } | -
| - | .ten.columns { | -
| - | width: 82.6666666667%; | -
| - | } | -
| - | .eleven.columns { | -
| - | width: 91.3333333333%; | -
| - | } | -
| - | .twelve.columns { | -
| - | width: 100%; | -
| - | margin-left: 0; | -
| - | } | -
| - | .one-third.column { | -
| - | width: 30.6666666667%; | -
| - | } | -
| - | .two-thirds.column { | -
| - | width: 65.3333333333%; | -
| - | } | -
| - | .one-half.column { | -
| - | width: 48%; | -
| - | } | -
| - | /* Offsets */ | -
| - | .offset-by-one.column, .offset-by-one.columns { | -
| - | margin-left: 8.66666666667%; | -
| - | } | -
| - | .offset-by-two.column, .offset-by-two.columns { | -
| - | margin-left: 17.3333333333%; | -
| - | } | -
| - | .offset-by-three.column, .offset-by-three.columns { | -
| - | margin-left: 26%; | -
| - | } | -
| - | .offset-by-four.column, .offset-by-four.columns { | -
| - | margin-left: 34.6666666667%; | -
| - | } | -
| - | .offset-by-five.column, .offset-by-five.columns { | -
| - | margin-left: 43.3333333333%; | -
| - | } | -
| - | .offset-by-six.column, .offset-by-six.columns { | -
| - | margin-left: 52%; | -
| - | } | -
| - | .offset-by-seven.column, .offset-by-seven.columns { | -
| - | margin-left: 60.6666666667%; | -
| - | } | -
| - | .offset-by-eight.column, .offset-by-eight.columns { | -
| - | margin-left: 69.3333333333%; | -
| - | } | -
| - | .offset-by-nine.column, .offset-by-nine.columns { | -
| - | margin-left: 78.0%; | -
| - | } | -
| - | .offset-by-ten.column, .offset-by-ten.columns { | -
| - | margin-left: 86.6666666667%; | -
| - | } | -
| - | .offset-by-eleven.column, .offset-by-eleven.columns { | -
| - | margin-left: 95.3333333333%; | -
| - | } | -
| - | .offset-by-one-third.column, .offset-by-one-third.columns { | -
| - | margin-left: 34.6666666667%; | -
| - | } | -
| - | .offset-by-two-thirds.column, .offset-by-two-thirds.columns { | -
| - | margin-left: 69.3333333333%; | -
| - | } | -
| - | .offset-by-one-half.column, .offset-by-one-half.columns { | -
| - | margin-left: 52%; | -
| - | } | -
| - | } | -
| - | /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ | -
| - | html { | -
| - | font-size: 62.5%; | -
| - | } | -
| - | body { | -
| - | font-size: 1.5em; | -
| - | /* currently ems cause chrome bug misinterpreting rems on body element */ | -
| - | line-height: 1.6; | -
| - | font-weight: 400; | -
| - | font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | -
| - | color: rgb(50, 50, 50); | -
| - | } | -
| - | /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | h1, h2, h3, h4, h5, h6 { | -
| - | margin-top: 0; | -
| - | margin-bottom: 0; | -
| - | font-weight: 300; | -
| - | } | -
| - | h1 { | -
| - | font-size: 4.5rem; | -
| - | line-height: 1.2; | -
| - | letter-spacing: -.1rem; | -
| - | margin-bottom: 2rem; | -
| - | } | -
| - | h2 { | -
| - | font-size: 3.6rem; | -
| - | line-height: 1.25; | -
| - | letter-spacing: -.1rem; | -
| - | margin-bottom: 1.8rem; | -
| - | margin-top: 1.8rem; | -
| - | } | -
| - | h3 { | -
| - | font-size: 3.0rem; | -
| - | line-height: 1.3; | -
| - | letter-spacing: -.1rem; | -
| - | margin-bottom: 1.5rem; | -
| - | margin-top: 1.5rem; | -
| - | } | -
| - | h4 { | -
| - | font-size: 2.6rem; | -
| - | line-height: 1.35; | -
| - | letter-spacing: -.08rem; | -
| - | margin-bottom: 1.2rem; | -
| - | margin-top: 1.2rem; | -
| - | } | -
| - | h5 { | -
| - | font-size: 2.2rem; | -
| - | line-height: 1.5; | -
| - | letter-spacing: -.05rem; | -
| - | margin-bottom: 0.6rem; | -
| - | margin-top: 0.6rem; | -
| - | } | -
| - | h6 { | -
| - | font-size: 2.0rem; | -
| - | line-height: 1.6; | -
| - | letter-spacing: 0; | -
| - | margin-bottom: 0.75rem; | -
| - | margin-top: 0.75rem; | -
| - | } | -
| - | p { | -
| - | margin-top: 0; | -
| - | } | -
| - | /* Blockquotes –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | blockquote { | -
| - | border-left: 4px lightgrey solid; | -
| - | padding-left: 1rem; | -
| - | margin-top: 2rem; | -
| - | margin-bottom: 2rem; | -
| - | margin-left: 0rem; | -
| - | } | -
| - | /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | a { | -
| - | color: #1EAEDB; | -
| - | text-decoration: underline; | -
| - | cursor: pointer; | -
| - | } | -
| - | a:hover { | -
| - | color: #0FA0CE; | -
| - | } | -
| - | /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | .button, button, input[type="submit"], input[type="reset"], input[type="button"] { | -
| - | display: inline-block; | -
| - | height: 38px; | -
| - | padding: 0 30px; | -
| - | color: #555; | -
| - | text-align: center; | -
| - | font-size: 11px; | -
| - | font-weight: 600; | -
| - | line-height: 38px; | -
| - | letter-spacing: .1rem; | -
| - | text-transform: uppercase; | -
| - | text-decoration: none; | -
| - | white-space: nowrap; | -
| - | background-color: transparent; | -
| - | border-radius: 4px; | -
| - | border: 1px solid #bbb; | -
| - | cursor: pointer; | -
| - | box-sizing: border-box; | -
| - | } | -
| - | .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { | -
| - | color: #333; | -
| - | border-color: #888; | -
| - | outline: 0; | -
| - | } | -
| - | .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { | -
| - | color: #FFF; | -
| - | background-color: #33C3F0; | -
| - | border-color: #33C3F0; | -
| - | } | -
| - | .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { | -
| - | color: #FFF; | -
| - | background-color: #1EAEDB; | -
| - | border-color: #1EAEDB; | -
| - | } | -
| - | /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { | -
| - | height: 38px; | -
| - | padding: 6px 10px; | -
| - | /* The 6px vertically centers text on FF, ignored by Webkit */ | -
| - | background-color: #fff; | -
| - | border: 1px solid #D1D1D1; | -
| - | border-radius: 4px; | -
| - | box-shadow: none; | -
| - | box-sizing: border-box; | -
| - | font-family: inherit; | -
| - | font-size: inherit; | -
| - | /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/ | -
| - | } | -
| - | /* Removes awkward default styles on some inputs for iOS */ | -
| - | input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { | -
| - | -webkit-appearance: none; | -
| - | -moz-appearance: none; | -
| - | appearance: none; | -
| - | } | -
| - | textarea { | -
| - | min-height: 65px; | -
| - | padding-top: 6px; | -
| - | padding-bottom: 6px; | -
| - | } | -
| - | input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { | -
| - | border: 1px solid #33C3F0; | -
| - | outline: 0; | -
| - | } | -
| - | label, legend { | -
| - | display: block; | -
| - | margin-bottom: 0px; | -
| - | } | -
| - | fieldset { | -
| - | padding: 0; | -
| - | border-width: 0; | -
| - | } | -
| - | input[type="checkbox"], input[type="radio"] { | -
| - | display: inline; | -
| - | } | -
| - | label > .label-body { | -
| - | display: inline-block; | -
| - | margin-left: .5rem; | -
| - | font-weight: normal; | -
| - | } | -
| - | /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | ul { | -
| - | list-style: circle inside; | -
| - | } | -
| - | ol { | -
| - | list-style: decimal inside; | -
| - | } | -
| - | ol, ul { | -
| - | padding-left: 0; | -
| - | margin-top: 0; | -
| - | } | -
| - | ul ul, ul ol, ol ol, ol ul { | -
| - | margin: 1.5rem 0 1.5rem 3rem; | -
| - | font-size: 90%; | -
| - | } | -
| - | li { | -
| - | margin-bottom: 1rem; | -
| - | } | -
| - | /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | table { | -
| - | border-collapse: collapse; | -
| - | } | -
| - | th, td { | -
| - | padding: 12px 15px; | -
| - | text-align: left; | -
| - | border-bottom: 1px solid #E1E1E1; | -
| - | } | -
| - | th:first-child, td:first-child { | -
| - | padding-left: 0; | -
| - | } | -
| - | th:last-child, td:last-child { | -
| - | padding-right: 0; | -
| - | } | -
| - | /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | button, .button { | -
| - | margin-bottom: 0rem; | -
| - | } | -
| - | input, textarea, select, fieldset { | -
| - | margin-bottom: 0rem; | -
| - | } | -
| - | pre, dl, figure, table, form { | -
| - | margin-bottom: 0rem; | -
| - | } | -
| - | p, ul, ol { | -
| - | margin-bottom: 0.75rem; | -
| - | } | -
| - | /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | .u-full-width { | -
| - | width: 100%; | -
| - | box-sizing: border-box; | -
| - | } | -
| - | .u-max-full-width { | -
| - | max-width: 100%; | -
| - | box-sizing: border-box; | -
| - | } | -
| - | .u-pull-right { | -
| - | float: right; | -
| - | } | -
| - | .u-pull-left { | -
| - | float: left; | -
| - | } | -
| - | /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | hr { | -
| - | margin-top: 3rem; | -
| - | margin-bottom: 3.5rem; | -
| - | border-width: 0; | -
| - | border-top: 1px solid #E1E1E1; | -
| - | } | -
| - | /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | /* Self Clearing Goodness */ | -
| - | .container:after, .row:after, .u-cf { | -
| - | content: ""; | -
| - | display: table; | -
| - | clear: both; | -
| - | } | -
| - | /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ | -
| - | /* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there. */ | -
| - | /* Larger than mobile */ | -
| - | @media (min-width: 400px) { | -
| - | } | -
| - | /* Larger than phablet (also point when grid becomes active) */ | -
| - | @media (min-width: 550px) { | -
| - | } | -
| - | /* Larger than tablet */ | -
| - | @media (min-width: 750px) { | -
| - | } | -
| - | /* Larger than desktop */ | -
| - | @media (min-width: 1000px) { | -
| - | } | -
| - | /* Larger than Desktop HD */ | -
| - | @media (min-width: 1200px) { | -
| - | } | -
