├── assets ├── css │ ├── styles.min.css.gz │ ├── styles.min.css │ └── styles.css └── images │ └── favicons │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── mstile-70x70.png │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── apple-touch-icon.png │ ├── android-chrome-36x36.png │ ├── android-chrome-48x48.png │ ├── android-chrome-72x72.png │ ├── android-chrome-96x96.png │ ├── android-chrome-144x144.png │ ├── android-chrome-192x192.png │ ├── apple-touch-icon-57x57.png │ ├── apple-touch-icon-60x60.png │ ├── apple-touch-icon-72x72.png │ ├── apple-touch-icon-76x76.png │ ├── apple-touch-icon-114x114.png │ ├── apple-touch-icon-120x120.png │ ├── apple-touch-icon-144x144.png │ ├── apple-touch-icon-152x152.png │ ├── apple-touch-icon-180x180.png │ ├── apple-touch-icon-precomposed.png │ ├── browserconfig.xml │ ├── manifest.json │ └── safari-pinned-tab.svg ├── LICENSE ├── README.md └── index.html /assets/css/styles.min.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/css/styles.min.css.gz -------------------------------------------------------------------------------- /assets/images/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/favicon.ico -------------------------------------------------------------------------------- /assets/images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /assets/images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /assets/images/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /assets/images/favicons/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/mstile-70x70.png -------------------------------------------------------------------------------- /assets/images/favicons/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/mstile-144x144.png -------------------------------------------------------------------------------- /assets/images/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /assets/images/favicons/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/mstile-310x150.png -------------------------------------------------------------------------------- /assets/images/favicons/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/mstile-310x310.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/images/favicons/android-chrome-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/android-chrome-36x36.png -------------------------------------------------------------------------------- /assets/images/favicons/android-chrome-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/android-chrome-48x48.png -------------------------------------------------------------------------------- /assets/images/favicons/android-chrome-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/android-chrome-72x72.png -------------------------------------------------------------------------------- /assets/images/favicons/android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/android-chrome-96x96.png -------------------------------------------------------------------------------- /assets/images/favicons/android-chrome-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/android-chrome-144x144.png -------------------------------------------------------------------------------- /assets/images/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /assets/images/favicons/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niklausgerber/rapid-bootstrap-v4/HEAD/assets/images/favicons/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /assets/images/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #da532c 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/images/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Niklaus Gerber", 3 | "icons": [ 4 | { 5 | "src": "\/assets\/favicons\/android-chrome-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": 0.75 9 | }, 10 | { 11 | "src": "\/assets\/favicons\/android-chrome-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": 1 15 | }, 16 | { 17 | "src": "\/assets\/favicons\/android-chrome-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": 1.5 21 | }, 22 | { 23 | "src": "\/assets\/favicons\/android-chrome-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": 2 27 | }, 28 | { 29 | "src": "\/assets\/favicons\/android-chrome-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": 3 33 | }, 34 | { 35 | "src": "\/assets\/favicons\/android-chrome-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": 4 39 | } 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Niklaus Gerber 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rapid Bootstrap V4 2 | «Rapid Bootstrap V4» is a toolkit for kickstarting web-projects, apps, and more. It includes the essential set of CSS elements optimized for perfect typography, a super simple fluid grid system and everything else necessary to develop mobile friendly content. It is optimized for speed and efficiency, only 2kb gzipped, and will support all major desktop and mobile browsers. One of the cleanest and simplest bootstraps you will ever get you hands on. 3 | 4 | You can see a live preview here: Rapid Bootstrap V4 Live Preview 5 | 6 | ## Credits 7 | Please support humans.txt (http://humanstxt.org/). It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website. 8 | 9 | Rapid Bootstrap: https://github.com/niklausgerber/rapid-bootstrap-v4 10 | Niklaus Gerber 11 | Twitter: @niklausgerber 12 | URL: https://www.niklausgerber.com 13 | Location: Zürich, Switzerland 14 | 15 | ## Download, Fork, Commit. 16 | If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas. 17 | 18 | ## Donation 19 | I love to create and I won't ask for repayment. If you appreciate my work and would like to support me I am sure you will earn some extra Karma points. Please donate. -------------------------------------------------------------------------------- /assets/images/favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /assets/css/styles.min.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);@import url(https://fonts.googleapis.com/css?family=Inconsolata);html,body{height: 100%;margin: 0;}body{font-family: 'Roboto', sans-serif;font-style: normal;font-weight: 500;line-height: 1.5em;margin: 0 auto;color: #1d1d1d;background: #fcfcfc;text-rendering: optimizelegibility;}h1,h2,h3,h4,h5{font-style: normal;font-weight: 700;}h1{font-size: 2em;line-height: 1.25em;margin-top: 0.625em;margin-bottom: 0.625em;}h2{font-size: 1.625em;line-height: 1.15384615em;margin-top: 0.576923075em;margin-bottom: 0.576923075em;}h3{font-size: 1.375em;line-height: 1.13636364em;margin-top: 0.56818182em;margin-bottom: 0.56818182em;}h4{font-size: 1.125em;line-height: 1.11111111em;margin-top: 0.555555555em;margin-bottom: 0.555555555em;}h5,h6{font-size: 1em;line-height: 1.5em;margin-top: 0em;margin-bottom: 0em;}p,ul,ol,pre,table,blockquote{margin-top: 0em;margin-bottom: 1.5em;font-family: 'Roboto Slab', serif;}ul ul,ol ol,ul ol,ol ul{margin-top: 0;margin-bottom: 0;}hr{display: block;height: 1px;border: 0;border-top: 1px solid #d4d4d4;margin: 1em 0;padding: 0;}b,strong,em,small,code{line-height: 1;}sup{line-height: 0;position: relative;vertical-align: baseline;top: -0.5em;}sub{bottom: -0.25em;}a{color: #808080;text-decoration: underline;border: none;}a:visited{color: #808080;}a:hover{color: #1d1d1d;text-decoration: none;}a:focus{outline: thin dotted;}p a{margin: -.5em;padding: .5em;position: relative;}ul,ol{padding: 0;margin: 0;margin-top: 1.5em;margin-bottom: 1.5em;margin-left: 1.25em;}li ul,li ol{margin: 0;padding: 0;}blockquote,q{quotes: none;color: #333;font-style: italic;}blockquote p:before{content: ' ';}blockquote p:after{content: ' ';}blockquote > p{padding: 0;}table{width: 100%;text-align: left;}th{font-family: 'Roboto', sans-serif;}pre{white-space: pre;white-space: pre-wrap;word-wrap: break-word;border-style: none;border-color: #E5E5E5;border-width: 0px;border-radius: 5px;padding: 1em;}pre,code,kbd,samp{margin-bottom: 2em;margin-top: 2em;background-color: #E5E5E5;color: #1d1d1d;font-family: "inconsolata", sans-serif;font-style: normal;font-weight: 500;font-size: 0.875em;line-height: 1.25em;}form{margin: 0;}fieldset{border: 0;padding: 0;}textarea{overflow: auto;vertical-align: top;width: 97%;}legend{margin-left: -.75em;}button,input,select,textarea{vertical-align: baseline;vertical-align: middle;}label,button,input,optgroup,select,textarea{color: inherit;font: inherit;margin: 0;}input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="date"]{height: 1em;padding: 0.5em;margin-bottom: 0.5em;background-color: #fff;border: 1px solid #ccc;-webkit-appearance: none;-moz-appearance: textfield;-webkit-border-radius: 0;border-radius: 0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;}input[type="date"]::-webkit-inner-spin-button{display: none;-webkit-appearance: none;}input[type="checkbox"],input[type="radio"]{box-sizing: border-box;padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height: auto;}input[type="search"]{-webkit-appearance: textfield;-moz-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;}textarea{background-color: #fff;border: 1px solid #ccc;padding: 0.5em;overflow: auto;}select{text-transform: none;height: 36px;padding: 0 .4em;background-color: #fff;border: 1px solid #ccc;}optgroup{font-weight: 700;}button{height: 2em;overflow: visible;text-transform: none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance: button;cursor: pointer;}button[disabled],html input[disabled]{cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner{border: 0;padding: 0;}::-webkit-input-placeholder{color: #999;}:-moz-placeholder{color: #999;}::-moz-placeholder{color: #999;}:-ms-input-placeholder{color: #999;}button,input{line-height: normal;overflow: visible;}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor: pointer;-webkit-appearance: button;}input[type="checkbox"],input[type="radio"]{box-sizing: border-box;}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-decoration{-webkit-appearance: none;}button::-moz-focus-inner,input::-moz-focus-inner{border: 0;padding: 0;}a.button,a.button:visited{font-size: 0.75em;-moz-border-radius: 7px;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;display: inline-block;margin: auto;padding: 0.5em 3em;transition: all 0.5s ease;text-decoration: none;text-transform: uppercase;font-weight: 700;margin-top: 0.5em;margin-bottom: 0.5em;color: #fff;background-color: #1d1d1d;border: 2px solid #1d1d1d;}a.button:hover,.button:focus{text-decoration: none;color: #fff;background-color: #808080;border-color: #808080;}a.button.outline,a.button.outline:visited{background-color: transparent;border: 2px solid #1d1d1d;color: #1d1d1d;}a.button.outline:hover,a.button.outline:focus{text-decoration: none;color: #fff;background-color: #1d1d1d;border-color: #1d1d1d;}a.button.clear,a.button.clear:visited{background-color: transparent;border: 2px solid transparent;color: #1d1d1d;}a.button.clear:hover,a.button.clear:focus{color: #808080;}img,video,canvas,object,embed{max-width: 100%;_width: 100%;}img{vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;display: block;margin-bottom: 1.5em;margin-left: auto;margin-right: auto;}.Flexible-container{position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;margin-bottom: 30px;}.Flexible-container iframe,.Flexible-container object,.Flexible-container embed{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.container{width: 90%;max-width: 780px;margin: auto;}.grid{display: block;position: relative;width: 100%;}@media (min-width: 320px) {body { font-size: 1.125em;}}@media (min-width: 600px) {body { font-size: 1.25em;}}@media (min-width: 768px) {body { font-size: 1.25em;} .grid{display: inline;float: left;} .half{width: 48%;margin-left: 1%;margin-right: 1%;} .third{width: 31.33333%;margin-left: 1%;margin-right: 1%;} .fourth{width: 23%;margin-left: 1%;margin-right: 1%;}}@media (min-width: 1024px) {body { font-size: 1.375em;}}@media (min-width: 1360px) {body { font-size: 1.375em;} blockquote, q{quotes: none;padding-right: 0.5em;padding-left: 0.5em;margin-left: -100px;margin-right: -100px;}}.cf:before,.cf:after{content: "";display: table;}.cf:after{clear: both;}.cf{zoom: 1;} -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Rapid Bootstrap V4 3 | * https://github.com/niklausgerber/rapid-bootstrap-v4 4 | * 5 | * Copyright (c) 2016 Niklaus Gerber, niklausgerber.com 6 | * Licensed under the MIT license 7 | */ 8 | 9 | /* Google Fonts */ 10 | 11 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,700); 12 | @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700); 13 | @import url(https://fonts.googleapis.com/css?family=Inconsolata); 14 | /* Setup */ 15 | 16 | html, 17 | body { 18 | height: 100%; 19 | margin: 0; 20 | } 21 | body { 22 | font-family: 'Roboto', sans-serif; 23 | font-style: normal; 24 | font-weight: 500; 25 | line-height: 1.5em; 26 | margin: 0 auto; 27 | color: #1d1d1d; 28 | background: #fcfcfc; 29 | text-rendering: optimizelegibility; 30 | } 31 | /* Typography */ 32 | 33 | h1, 34 | h2, 35 | h3, 36 | h4, 37 | h5 { 38 | font-style: normal; 39 | font-weight: 700; 40 | } 41 | h1 { 42 | font-size: 2em; 43 | line-height: 1.25em; 44 | margin-top: 0.625em; 45 | margin-bottom: 0.625em; 46 | } 47 | h2 { 48 | font-size: 1.625em; 49 | line-height: 1.15384615em; 50 | margin-top: 0.576923075em; 51 | margin-bottom: 0.576923075em; 52 | } 53 | h3 { 54 | font-size: 1.375em; 55 | line-height: 1.13636364em; 56 | margin-top: 0.56818182em; 57 | margin-bottom: 0.56818182em; 58 | } 59 | h4 { 60 | font-size: 1.125em; 61 | line-height: 1.11111111em; 62 | margin-top: 0.555555555em; 63 | margin-bottom: 0.555555555em; 64 | } 65 | h5, 66 | h6 { 67 | font-size: 1em; 68 | line-height: 1.5em; 69 | margin-top: 0em; 70 | margin-bottom: 0em; 71 | } 72 | p, 73 | ul, 74 | ol, 75 | pre, 76 | table, 77 | blockquote { 78 | margin-top: 0em; 79 | margin-bottom: 1.5em; 80 | font-family: 'Roboto Slab', serif; 81 | } 82 | ul ul, 83 | ol ol, 84 | ul ol, 85 | ol ul { 86 | margin-top: 0; 87 | margin-bottom: 0; 88 | } 89 | hr { 90 | display: block; 91 | height: 1px; 92 | border: 0; 93 | border-top: 1px solid #d4d4d4; 94 | margin: 1em 0; 95 | padding: 0; 96 | } 97 | b, 98 | strong, 99 | em, 100 | small, 101 | code { 102 | line-height: 1; 103 | } 104 | sup { 105 | line-height: 0; 106 | position: relative; 107 | vertical-align: baseline; 108 | top: -0.5em; 109 | } 110 | sub { 111 | bottom: -0.25em; 112 | } 113 | /* Hyperlinks */ 114 | 115 | a { 116 | color: #808080; 117 | text-decoration: underline; 118 | border: none; 119 | } 120 | a:visited { 121 | color: #808080; 122 | } 123 | a:hover { 124 | color: #1d1d1d; 125 | text-decoration: none; 126 | } 127 | a:focus { 128 | outline: thin dotted; 129 | } 130 | p a { 131 | /* Optimized for touch devices */ 132 | 133 | margin: -.5em; 134 | padding: .5em; 135 | position: relative; 136 | } 137 | /* Lists */ 138 | 139 | ul, 140 | ol { 141 | padding: 0; 142 | margin: 0; 143 | margin-top: 1.5em; 144 | margin-bottom: 1.5em; 145 | margin-left: 1.25em; 146 | } 147 | li ul, 148 | li ol { 149 | margin: 0; 150 | padding: 0; 151 | } 152 | /* Quotes */ 153 | 154 | blockquote, 155 | q { 156 | quotes: none; 157 | color: #333; 158 | font-style: italic; 159 | } 160 | blockquote p:before { 161 | content: '«'; 162 | } 163 | blockquote p:after { 164 | content: '»'; 165 | } 166 | blockquote > p { 167 | padding: 0; 168 | } 169 | /* Table */ 170 | 171 | table { 172 | width: 100%; 173 | text-align: left; 174 | } 175 | th { 176 | font-family: 'Roboto', sans-serif; 177 | } 178 | /* Code */ 179 | 180 | pre { 181 | white-space: pre; 182 | white-space: pre-wrap; 183 | word-wrap: break-word; 184 | border-style: none; 185 | border-color: #E5E5E5; 186 | border-width: 0px; 187 | border-radius: 5px; 188 | padding: 1em; 189 | } 190 | /* Allow line wrapping of 'pre' */ 191 | 192 | pre, 193 | code, 194 | kbd, 195 | samp { 196 | margin-bottom: 2em; 197 | margin-top: 2em; 198 | background-color: #E5E5E5; 199 | color: #1d1d1d; 200 | font-family: "inconsolata", sans-serif; 201 | font-style: normal; 202 | font-weight: 500; 203 | font-size: 0.875em; 204 | line-height: 1.25em; 205 | } 206 | /* Forms */ 207 | 208 | form { 209 | margin: 0; 210 | } 211 | fieldset { 212 | border: 0; 213 | padding: 0; 214 | } 215 | textarea { 216 | overflow: auto; 217 | vertical-align: top; 218 | width: 97%; 219 | } 220 | legend { 221 | margin-left: -.75em; 222 | } 223 | button, 224 | input, 225 | select, 226 | textarea { 227 | vertical-align: baseline; 228 | vertical-align: middle; 229 | } 230 | label, 231 | button, 232 | input, 233 | optgroup, 234 | select, 235 | textarea { 236 | color: inherit; 237 | font: inherit; 238 | margin: 0; 239 | } 240 | input[type="text"], 241 | input[type="email"], 242 | input[type="password"], 243 | input[type="tel"], 244 | input[type="number"], 245 | input[type="date"] { 246 | height: 1em; 247 | padding: 0.5em; 248 | margin-bottom: 0.5em; 249 | background-color: #fff; 250 | border: 1px solid #ccc; 251 | -webkit-appearance: none; 252 | -moz-appearance: textfield; 253 | -webkit-border-radius: 0; 254 | border-radius: 0; 255 | } 256 | input[type=number]::-webkit-inner-spin-button, 257 | input[type=number]::-webkit-outer-spin-button { 258 | -webkit-appearance: none; 259 | margin: 0; 260 | } 261 | input[type="date"]::-webkit-inner-spin-button { 262 | display: none; 263 | -webkit-appearance: none; 264 | } 265 | input[type="checkbox"], 266 | input[type="radio"] { 267 | box-sizing: border-box; 268 | padding: 0; 269 | } 270 | input[type="number"]::-webkit-inner-spin-button, 271 | input[type="number"]::-webkit-outer-spin-button { 272 | height: auto; 273 | } 274 | input[type="search"] { 275 | -webkit-appearance: textfield; 276 | -moz-appearance: textfield; 277 | -moz-box-sizing: content-box; 278 | -webkit-box-sizing: content-box; 279 | box-sizing: content-box; 280 | } 281 | input[type="search"]::-webkit-search-cancel-button, 282 | input[type="search"]::-webkit-search-decoration { 283 | -webkit-appearance: none; 284 | } 285 | textarea { 286 | background-color: #fff; 287 | border: 1px solid #ccc; 288 | padding: 0.5em; 289 | overflow: auto; 290 | } 291 | select { 292 | text-transform: none; 293 | height: 36px; 294 | padding: 0 .4em; 295 | background-color: #fff; 296 | border: 1px solid #ccc; 297 | } 298 | optgroup { 299 | font-weight: 700; 300 | } 301 | button { 302 | height: 2em; 303 | overflow: visible; 304 | text-transform: none; 305 | } 306 | button, 307 | html input[type="button"], 308 | input[type="reset"], 309 | input[type="submit"] { 310 | -webkit-appearance: button; 311 | cursor: pointer; 312 | } 313 | button[disabled], 314 | html input[disabled] { 315 | cursor: default; 316 | } 317 | button::-moz-focus-inner, 318 | input::-moz-focus-inner { 319 | border: 0; 320 | padding: 0; 321 | } 322 | ::-webkit-input-placeholder { 323 | color: #999; 324 | } 325 | :-moz-placeholder { 326 | color: #999; 327 | } 328 | ::-moz-placeholder { 329 | color: #999; 330 | } 331 | :-ms-input-placeholder { 332 | color: #999; 333 | } 334 | /* IE7 and older */ 335 | 336 | button, 337 | input { 338 | line-height: normal; 339 | overflow: visible; 340 | } 341 | button, 342 | input[type="button"], 343 | input[type="reset"], 344 | input[type="submit"] { 345 | cursor: pointer; 346 | -webkit-appearance: button; 347 | } 348 | input[type="checkbox"], 349 | input[type="radio"] { 350 | box-sizing: border-box; 351 | } 352 | input[type="search"] { 353 | -webkit-appearance: textfield; 354 | -moz-box-sizing: content-box; 355 | -webkit-box-sizing: content-box; 356 | box-sizing: content-box; 357 | } 358 | input[type="search"]::-webkit-search-decoration { 359 | -webkit-appearance: none; 360 | } 361 | button::-moz-focus-inner, 362 | input::-moz-focus-inner { 363 | border: 0; 364 | padding: 0; 365 | } 366 | /* Buttons */ 367 | 368 | a.button, 369 | a.button:visited { 370 | font-size: 0.75em; 371 | -moz-border-radius: 7px; 372 | -moz-transition: all 0.5s ease; 373 | -ms-transition: all 0.5s ease; 374 | -o-transition: all 0.5s ease; 375 | -webkit-transition: all 0.5s ease; 376 | display: inline-block; 377 | margin: auto; 378 | padding: 0.5em 3em; 379 | transition: all 0.5s ease; 380 | text-decoration: none; 381 | text-transform: uppercase; 382 | font-weight: 700; 383 | margin-top: 0.5em; 384 | margin-bottom: 0.5em; 385 | color: #fff; 386 | background-color: #1d1d1d; 387 | border: 2px solid #1d1d1d; 388 | } 389 | a.button:hover, 390 | .button:focus { 391 | text-decoration: none; 392 | color: #fff; 393 | background-color: #808080; 394 | border-color: #808080; 395 | } 396 | a.button.outline, 397 | a.button.outline:visited { 398 | background-color: transparent; 399 | border: 2px solid #1d1d1d; 400 | color: #1d1d1d; 401 | } 402 | a.button.outline:hover, 403 | a.button.outline:focus { 404 | text-decoration: none; 405 | color: #fff; 406 | background-color: #1d1d1d; 407 | border-color: #1d1d1d; 408 | } 409 | a.button.clear, 410 | a.button.clear:visited { 411 | background-color: transparent; 412 | border: 2px solid transparent; 413 | color: #1d1d1d; 414 | } 415 | a.button.clear:hover, 416 | a.button.clear:focus { 417 | color: #808080; 418 | } 419 | /* Responsive Images */ 420 | 421 | img, 422 | video, 423 | canvas, 424 | object, 425 | embed { 426 | max-width: 100%; 427 | _width: 100%; 428 | } 429 | img { 430 | vertical-align: middle; 431 | border: 0; 432 | -ms-interpolation-mode: bicubic; 433 | /* Improve IE's resizing of images */ 434 | 435 | display: block; 436 | margin-bottom: 1.5em; 437 | margin-left: auto; 438 | margin-right: auto; 439 | } 440 | /* FitMyVideo | https://github.com/niklausgerber/FitMyVideo */ 441 | 442 | .Flexible-container { 443 | position: relative; 444 | padding-bottom: 56.25%; 445 | padding-top: 30px; 446 | height: 0; 447 | overflow: hidden; 448 | margin-bottom: 30px; 449 | } 450 | .Flexible-container iframe, 451 | .Flexible-container object, 452 | .Flexible-container embed { 453 | position: absolute; 454 | top: 0; 455 | left: 0; 456 | width: 100%; 457 | height: 100%; 458 | } 459 | /* Responsive Design */ 460 | 461 | .container { 462 | width: 90%; 463 | max-width: 780px; 464 | margin: auto; 465 | } 466 | /* Column Grid */ 467 | 468 | .grid { 469 | display: block; 470 | position: relative; 471 | width: 100%; 472 | } 473 | /* Media Queries 474 | Changes on the body font-size will have a direct effect on the whole typography of the CSS boostrap. 475 | */ 476 | 477 | @media (min-width: 320px) { 478 | body { 479 | font-size: 1.125em; 480 | /* Don't break the typographic rhythm. You can move either way in 0.125em or % steps. 1.375 —> 1.250 —> 1.125 —> 1.000 */ 481 | } 482 | } 483 | @media (min-width: 600px) { 484 | body { 485 | font-size: 1.25em; 486 | /* Don't break the typographic rhythm. You can move either way in 0.125em or % steps. 1.375 —> 1.250 —> 1.125 —> 1.000 */ 487 | } 488 | } 489 | @media (min-width: 768px) { 490 | body { 491 | font-size: 1.25em; 492 | /* Don't break the typographic rhythm. You can move either way in 0.125em or % steps. 1.375 —> 1.250 —> 1.125 —> 1.000 */ 493 | } 494 | /* Column Grid */ 495 | 496 | .grid { 497 | display: inline; 498 | float: left; 499 | } 500 | /* 2 Column Grid */ 501 | 502 | .half { 503 | width: 48%; 504 | margin-left: 1%; 505 | margin-right: 1%; 506 | } 507 | /* 3 Column Grid */ 508 | 509 | .third { 510 | width: 31.33333%; 511 | margin-left: 1%; 512 | margin-right: 1%; 513 | } 514 | /* 4 Column Grid */ 515 | 516 | .fourth { 517 | width: 23%; 518 | margin-left: 1%; 519 | margin-right: 1%; 520 | } 521 | } 522 | @media (min-width: 1024px) { 523 | body { 524 | font-size: 1.375em; 525 | /* Don't break the typographic rhythm. You can move either way in 0.125em or % steps. 1.375 —> 1.250 —> 1.125 —> 1.000 */ 526 | } 527 | } 528 | @media (min-width: 1360px) { 529 | body { 530 | font-size: 1.375em; 531 | /* Don't break the typographic rhythm. You can move either way in 0.125em or % steps. 1.375 —> 1.250 —> 1.125 —> 1.000 */ 532 | } 533 | blockquote, 534 | q { 535 | quotes: none; 536 | padding-right: 0.5em; 537 | padding-left: 0.5em; 538 | margin-left: -100px; 539 | margin-right: -100px; 540 | } 541 | } 542 | /* Micro Clearfix Hack */ 543 | 544 | .cf:before, 545 | .cf:after { 546 | content: ""; 547 | /* For modern browsers */ 548 | 549 | display: table; 550 | /* For modern browsers */ 551 | } 552 | .cf:after { 553 | clear: both; 554 | } 555 | .cf { 556 | zoom: 1; 557 | /* For IE 6/7 (trigger hasLayout) */ 558 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Rapid Bootstrap V4 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |

Typography

53 |

Paragraph

54 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

55 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

56 | 57 |
58 | 59 |

Other elements to text markup

60 | Anchor 61 |
62 | Emphasis 63 |
64 | Small 65 |
66 | Strong 67 |
68 | Underline 69 |
70 | 71 |
72 | 73 |

Heading h1

74 |

Heading h2

75 |

Heading h3

76 |

Heading h4

77 |
Heading h5
78 |
Heading h6
79 | 80 |

Heading h1

81 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

82 |

Heading h2

83 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

84 |

Heading h3

85 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

86 |

Heading h4

87 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

88 |
Heading h5
89 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

90 |
Heading h6
91 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

92 |
93 | 94 |

Blockquote

95 |
96 |
97 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

98 |
99 | 100 |
101 | 102 |

Code

103 | 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
104 | 105 | 106 |
107 | 108 |

UI Elements

109 | 110 |

Unordered list

111 | 115 | 116 |
117 | 118 |

Ordered list

119 |
    120 |
  1. Ordered list item 1
    2. 121 |
  2. Ordered list item 2
    3. 122 |
123 | 124 |
125 | 126 |

Description list

127 |
128 |
Description list item 1
129 |
Description list item 1.1
130 |
131 | 132 |
133 | 134 |

Table

135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 |
Header 1Header 2Header 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
147 | 148 |
149 | 150 |

Default Button

151 | Default Button 152 | 153 |
154 | 155 |

Outlined Button

156 | Outline Button 157 | 158 |
159 | 160 |

Clear Button

161 | Clear Button 162 | 163 | 164 |
165 | 166 |

Responsive Images

167 | 168 | 169 | 170 |
171 | 172 |

Responsive Video and iFrame Embeds

173 | 174 |
175 | 176 |
177 | 178 |
179 | 180 |

Responsive iFrame Embeds

181 | 182 |
183 | 184 |
185 | 186 |
187 | 188 |

Forms

189 | 190 |

Dropdown

191 |
192 | 198 | 199 |
200 |

Text Field

201 |
202 | 203 | 204 |
205 |

Form Field

206 |
207 | 208 |
209 | 210 |
211 |

Radio Buttons

212 |
213 | Option Number 1 214 |
215 | Option Number 2 216 |
217 | Option Number 3 218 |
219 | Option Number 4 220 | 221 | 222 |
223 | 224 |

Responsive Grid

225 | 226 |

Grid Half

227 |
228 |

1/2

229 |

230 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 231 |

232 |
233 |
234 |

1/2

235 |

236 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 237 |

238 |
239 |
240 |

Grid Third

241 |
242 |

1/3

243 |

244 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 245 |

246 |
247 |
248 |

1/3

249 |

250 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 251 |

252 |
253 |
254 |

1/3

255 |

256 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 257 |

258 |
259 |
260 |

Grid Fourth

261 |
262 |

1/4

263 |

264 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 265 |

266 |
267 |
268 |

1/4

269 |

270 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 271 |

272 |
273 |
274 |

1/4

275 |

276 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 277 |

278 |
279 |
280 |

1/4

281 |

282 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 283 |

284 |
285 |
286 | 287 |
288 | 289 | 290 | 291 | 292 | 293 | 294 | --------------------------------------------------------------------------------