├── images ├── favicon.gif └── launchbot-logo.png ├── README.md ├── LICENSE.txt ├── stylesheets ├── layout.css ├── base.css └── skeleton.css └── index.html /images/favicon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/Launchbot/master/images/favicon.gif -------------------------------------------------------------------------------- /images/launchbot-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/Launchbot/master/images/launchbot-logo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Launchbot 2 | 3 | ## Description 4 | 5 | Launchbot enables you to easily open sets of all your favorite websites with just one click. 6 | 7 | It's like restoring tabs, but on any computer and browser. You can also search Google or just quick-launch one of your favorite websites. 8 | 9 | * **Install Instruction:** http://launchbot.michaelxander.com/about.html 10 | * **Changelog:** http://launchbot.michaelxander.com/changelog.html 11 | 12 | 13 | ## Author 14 | 15 | Launchbot was built by Michael Xander. 16 | 17 | * http://michaelxander.com 18 | * http://twitter.com/michael_xander 19 | 20 | 21 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Michael Xander 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /stylesheets/layout.css: -------------------------------------------------------------------------------- 1 | /* #Site Styles 2 | ================================================== */ 3 | h1 { white-space: nowrap; } 4 | img.middle { vertical-align: text-bottom; } 5 | 6 | input[type="text"], 7 | input[type="password"], 8 | input[type="email"], 9 | textarea, 10 | select { 11 | border: 1px solid #ccc; 12 | padding: 6px 4px; 13 | outline: none; 14 | -moz-border-radius: 2px; 15 | -webkit-border-radius: 2px; 16 | border-radius: 2px; 17 | font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 18 | color: #777; 19 | margin: 0; 20 | width: 210px; 21 | max-width: 100%; 22 | display: inline; 23 | margin-bottom: 20px; 24 | background: #fff; } 25 | 26 | #siteSets a { 27 | font-weight: bold; 28 | text-decoration: none; } 29 | #siteSets a:hover { color: #54aed4; } 30 | #siteSets img { opacity: 0.3; } 31 | #siteSets img:hover { opacity: 1; } 32 | 33 | #favoriteSites img { opacity: 0.3; } 34 | #favoriteSites img:hover { opacity: 1; } 35 | 36 | .footer { 37 | margin-top: 20px; 38 | font-size: 12px; 39 | color: #ccc; 40 | } 41 | .footer a { color: #ccc; } 42 | .footer a:hover { color: #54aed4; } 43 | 44 | .lowercase { text-transform: lowercase; } 45 | .uppercase { text-transform: uppercase; } 46 | 47 | 48 | /* #Page Styles 49 | ================================================== */ 50 | 51 | /* #Media Queries 52 | ================================================== */ 53 | 54 | /* Smaller than standard 960 (devices and browsers) */ 55 | @media only screen and (max-width: 959px) {} 56 | 57 | /* Tablet Portrait size to standard 960 (devices and browsers) */ 58 | @media only screen and (min-width: 768px) and (max-width: 959px) {} 59 | 60 | /* All Mobile Sizes (devices and browser) */ 61 | @media only screen and (max-width: 767px) {} 62 | 63 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 64 | @media only screen and (min-width: 480px) and (max-width: 767px) {} 65 | 66 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 67 | @media only screen and (max-width: 479px) { 68 | img.middle { display: block; margin: 0 auto; } 69 | } 70 | 71 | 72 | /* #Font-Face 73 | ================================================== */ 74 | /* This is the proper syntax for an @font-face file 75 | Just create a "fonts" folder at the root, 76 | copy your FontName into code below and remove 77 | comment brackets */ 78 | 79 | /* @font-face { 80 | font-family: 'FontName'; 81 | src: url('../fonts/FontName.eot'); 82 | src: url('../fonts/FontName.eot?iefix') format('eot'), 83 | url('../fonts/FontName.woff') format('woff'), 84 | url('../fonts/FontName.ttf') format('truetype'), 85 | url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); 86 | font-weight: normal; 87 | font-style: normal; } 88 | */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Launchbot – Your Personal Startpage Script 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 |

Launchbot Logo < Launchbot >

32 |
33 |
34 |
35 |

Search The Web

36 |

My oil is fresh, we could search something!

37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 |

Open Sets

46 |

Oh yeah Sir, let's open -g some sites!

47 |
    48 |
    49 |
    50 |

    Favorite Sites

    51 |

    Ah, you wanna surf the orbit?

    52 |

    53 |

    54 |
    55 |
    56 |

    © 2013 Michael Xander. 57 | Download and about Launchbot. 58 | Follow me on Twitter for further projects. 59 |

    60 |
    61 | 62 |
    63 | 64 | 65 | 67 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /stylesheets/base.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V1.2 3 | * Copyright 2011, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 6/20/2012 8 | */ 9 | 10 | 11 | /* Table of Content 12 | ================================================== 13 | #Reset & Basics 14 | #Basic Styles 15 | #Site Styles 16 | #Typography 17 | #Links 18 | #Lists 19 | #Images 20 | #Buttons 21 | #Forms 22 | #Misc */ 23 | 24 | 25 | /* #Reset & Basics (Inspired by E. Meyers) 26 | ================================================== */ 27 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 28 | margin: 0; 29 | padding: 0; 30 | border: 0; 31 | font-size: 100%; 32 | font: inherit; 33 | vertical-align: baseline; } 34 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 35 | display: block; } 36 | body { 37 | line-height: 1; } 38 | ol, ul { 39 | list-style: none; } 40 | blockquote, q { 41 | quotes: none; } 42 | blockquote:before, blockquote:after, 43 | q:before, q:after { 44 | content: ''; 45 | content: none; } 46 | table { 47 | border-collapse: collapse; 48 | border-spacing: 0; } 49 | 50 | 51 | /* #Basic Styles 52 | ================================================== */ 53 | body { 54 | background: #fff; 55 | font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 56 | color: #444; 57 | -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ 58 | -webkit-text-size-adjust: 100%; 59 | } 60 | 61 | 62 | /* #Typography 63 | ================================================== */ 64 | h1, h2, h3, h4, h5, h6 { 65 | color: #181818; 66 | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 67 | font-weight: normal; } 68 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } 69 | h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} 70 | h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } 71 | h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } 72 | h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } 73 | h5 { font-size: 17px; line-height: 24px; } 74 | h6 { font-size: 14px; line-height: 21px; } 75 | .subheader { color: #777; } 76 | 77 | p { margin: 0 0 20px 0; } 78 | p img { margin: 0; } 79 | p.lead { font-size: 21px; line-height: 27px; color: #777; } 80 | 81 | em { font-style: italic; } 82 | strong { font-weight: bold; color: #333; } 83 | small { font-size: 80%; } 84 | 85 | /* Blockquotes */ 86 | blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } 87 | blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } 88 | blockquote cite { display: block; font-size: 12px; color: #555; } 89 | blockquote cite:before { content: "\2014 \0020"; } 90 | blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } 91 | 92 | hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } 93 | 94 | 95 | /* #Links 96 | ================================================== */ 97 | a, a:visited { color: #333; text-decoration: underline; outline: 0; } 98 | a:hover, a:focus { color: #000; } 99 | p a, p a:visited { line-height: inherit; } 100 | 101 | 102 | /* #Lists 103 | ================================================== */ 104 | ul, ol { margin-bottom: 20px; } 105 | ul { list-style: none outside; } 106 | ol { list-style: decimal; } 107 | ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } 108 | ul.square { list-style: square outside; } 109 | ul.circle { list-style: circle outside; } 110 | ul.disc { list-style: disc outside; } 111 | ul ul, ul ol, 112 | ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } 113 | ul ul li, ul ol li, 114 | ol ol li, ol ul li { margin-bottom: 6px; } 115 | li { line-height: 18px; margin-bottom: 12px; } 116 | ul.large li { line-height: 21px; } 117 | li p { line-height: 21px; } 118 | 119 | /* #Images 120 | ================================================== */ 121 | 122 | img.scale-with-grid { 123 | max-width: 100%; 124 | height: auto; } 125 | 126 | 127 | /* #Buttons 128 | ================================================== */ 129 | 130 | .button, 131 | button, 132 | input[type="submit"], 133 | input[type="reset"], 134 | input[type="button"] { 135 | background: #eee; /* Old browsers */ 136 | background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ 137 | background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ 138 | background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ 139 | background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ 140 | background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ 141 | background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ 142 | border: 1px solid #aaa; 143 | border-top: 1px solid #ccc; 144 | border-left: 1px solid #ccc; 145 | -moz-border-radius: 3px; 146 | -webkit-border-radius: 3px; 147 | border-radius: 3px; 148 | color: #444; 149 | display: inline-block; 150 | font-size: 11px; 151 | font-weight: bold; 152 | text-decoration: none; 153 | text-shadow: 0 1px rgba(255, 255, 255, .75); 154 | cursor: pointer; 155 | margin-bottom: 20px; 156 | line-height: normal; 157 | padding: 8px 10px; 158 | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } 159 | 160 | .button:hover, 161 | button:hover, 162 | input[type="submit"]:hover, 163 | input[type="reset"]:hover, 164 | input[type="button"]:hover { 165 | color: #222; 166 | background: #ddd; /* Old browsers */ 167 | background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ 168 | background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ 169 | background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ 170 | background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ 171 | background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ 172 | background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ 173 | border: 1px solid #888; 174 | border-top: 1px solid #aaa; 175 | border-left: 1px solid #aaa; } 176 | 177 | .button:active, 178 | button:active, 179 | input[type="submit"]:active, 180 | input[type="reset"]:active, 181 | input[type="button"]:active { 182 | border: 1px solid #666; 183 | background: #ccc; /* Old browsers */ 184 | background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ 185 | background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ 186 | background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ 187 | background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ 188 | background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ 189 | background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } 190 | 191 | .button.full-width, 192 | button.full-width, 193 | input[type="submit"].full-width, 194 | input[type="reset"].full-width, 195 | input[type="button"].full-width { 196 | width: 100%; 197 | padding-left: 0 !important; 198 | padding-right: 0 !important; 199 | text-align: center; } 200 | 201 | /* Fix for odd Mozilla border & padding issues */ 202 | button::-moz-focus-inner, 203 | input::-moz-focus-inner { 204 | border: 0; 205 | padding: 0; 206 | } 207 | 208 | 209 | /* #Forms 210 | ================================================== */ 211 | 212 | form { 213 | margin-bottom: 20px; } 214 | fieldset { 215 | margin-bottom: 20px; } 216 | input[type="text"], 217 | input[type="password"], 218 | input[type="email"], 219 | textarea, 220 | select { 221 | border: 1px solid #ccc; 222 | padding: 6px 4px; 223 | outline: none; 224 | -moz-border-radius: 2px; 225 | -webkit-border-radius: 2px; 226 | border-radius: 2px; 227 | font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 228 | color: #777; 229 | margin: 0; 230 | width: 210px; 231 | max-width: 100%; 232 | display: block; 233 | margin-bottom: 20px; 234 | background: #fff; } 235 | select { 236 | padding: 0; } 237 | input[type="text"]:focus, 238 | input[type="password"]:focus, 239 | input[type="email"]:focus, 240 | textarea:focus { 241 | border: 1px solid #aaa; 242 | color: #444; 243 | -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); 244 | -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); 245 | box-shadow: 0 0 3px rgba(0,0,0,.2); } 246 | textarea { 247 | min-height: 60px; } 248 | label, 249 | legend { 250 | display: block; 251 | font-weight: bold; 252 | font-size: 13px; } 253 | select { 254 | width: 220px; } 255 | input[type="checkbox"] { 256 | display: inline; } 257 | label span, 258 | legend span { 259 | font-weight: normal; 260 | font-size: 13px; 261 | color: #444; } 262 | 263 | /* #Misc 264 | ================================================== */ 265 | .remove-bottom { margin-bottom: 0 !important; } 266 | .half-bottom { margin-bottom: 10px !important; } 267 | .add-bottom { margin-bottom: 20px !important; } 268 | 269 | 270 | -------------------------------------------------------------------------------- /stylesheets/skeleton.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V1.2 3 | * Copyright 2011, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 6/20/2012 8 | */ 9 | 10 | 11 | /* Table of Contents 12 | ================================================== 13 | #Base 960 Grid 14 | #Tablet (Portrait) 15 | #Mobile (Portrait) 16 | #Mobile (Landscape) 17 | #Clearing */ 18 | 19 | 20 | 21 | /* #Base 960 Grid 22 | ================================================== */ 23 | 24 | .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } 25 | .container .column, 26 | .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } 27 | .row { margin-bottom: 20px; } 28 | 29 | /* Nested Column Classes */ 30 | .column.alpha, .columns.alpha { margin-left: 0; } 31 | .column.omega, .columns.omega { margin-right: 0; } 32 | 33 | /* Base Grid */ 34 | .container .one.column, 35 | .container .one.columns { width: 40px; } 36 | .container .two.columns { width: 100px; } 37 | .container .three.columns { width: 160px; } 38 | .container .four.columns { width: 220px; } 39 | .container .five.columns { width: 280px; } 40 | .container .six.columns { width: 340px; } 41 | .container .seven.columns { width: 400px; } 42 | .container .eight.columns { width: 460px; } 43 | .container .nine.columns { width: 520px; } 44 | .container .ten.columns { width: 580px; } 45 | .container .eleven.columns { width: 640px; } 46 | .container .twelve.columns { width: 700px; } 47 | .container .thirteen.columns { width: 760px; } 48 | .container .fourteen.columns { width: 820px; } 49 | .container .fifteen.columns { width: 880px; } 50 | .container .sixteen.columns { width: 940px; } 51 | 52 | .container .one-third.column { width: 300px; } 53 | .container .two-thirds.column { width: 620px; } 54 | 55 | /* Offsets */ 56 | .container .offset-by-one { padding-left: 60px; } 57 | .container .offset-by-two { padding-left: 120px; } 58 | .container .offset-by-three { padding-left: 180px; } 59 | .container .offset-by-four { padding-left: 240px; } 60 | .container .offset-by-five { padding-left: 300px; } 61 | .container .offset-by-six { padding-left: 360px; } 62 | .container .offset-by-seven { padding-left: 420px; } 63 | .container .offset-by-eight { padding-left: 480px; } 64 | .container .offset-by-nine { padding-left: 540px; } 65 | .container .offset-by-ten { padding-left: 600px; } 66 | .container .offset-by-eleven { padding-left: 660px; } 67 | .container .offset-by-twelve { padding-left: 720px; } 68 | .container .offset-by-thirteen { padding-left: 780px; } 69 | .container .offset-by-fourteen { padding-left: 840px; } 70 | .container .offset-by-fifteen { padding-left: 900px; } 71 | 72 | 73 | 74 | /* #Tablet (Portrait) 75 | ================================================== */ 76 | 77 | /* Note: Design for a width of 768px */ 78 | 79 | @media only screen and (min-width: 768px) and (max-width: 959px) { 80 | .container { width: 768px; } 81 | .container .column, 82 | .container .columns { margin-left: 10px; margin-right: 10px; } 83 | .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } 84 | .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } 85 | .alpha.omega { margin-left: 0; margin-right: 0; } 86 | 87 | .container .one.column, 88 | .container .one.columns { width: 28px; } 89 | .container .two.columns { width: 76px; } 90 | .container .three.columns { width: 124px; } 91 | .container .four.columns { width: 172px; } 92 | .container .five.columns { width: 220px; } 93 | .container .six.columns { width: 268px; } 94 | .container .seven.columns { width: 316px; } 95 | .container .eight.columns { width: 364px; } 96 | .container .nine.columns { width: 412px; } 97 | .container .ten.columns { width: 460px; } 98 | .container .eleven.columns { width: 508px; } 99 | .container .twelve.columns { width: 556px; } 100 | .container .thirteen.columns { width: 604px; } 101 | .container .fourteen.columns { width: 652px; } 102 | .container .fifteen.columns { width: 700px; } 103 | .container .sixteen.columns { width: 748px; } 104 | 105 | .container .one-third.column { width: 236px; } 106 | .container .two-thirds.column { width: 492px; } 107 | 108 | /* Offsets */ 109 | .container .offset-by-one { padding-left: 48px; } 110 | .container .offset-by-two { padding-left: 96px; } 111 | .container .offset-by-three { padding-left: 144px; } 112 | .container .offset-by-four { padding-left: 192px; } 113 | .container .offset-by-five { padding-left: 240px; } 114 | .container .offset-by-six { padding-left: 288px; } 115 | .container .offset-by-seven { padding-left: 336px; } 116 | .container .offset-by-eight { padding-left: 384px; } 117 | .container .offset-by-nine { padding-left: 432px; } 118 | .container .offset-by-ten { padding-left: 480px; } 119 | .container .offset-by-eleven { padding-left: 528px; } 120 | .container .offset-by-twelve { padding-left: 576px; } 121 | .container .offset-by-thirteen { padding-left: 624px; } 122 | .container .offset-by-fourteen { padding-left: 672px; } 123 | .container .offset-by-fifteen { padding-left: 720px; } 124 | } 125 | 126 | 127 | /* #Mobile (Portrait) 128 | ================================================== */ 129 | 130 | /* Note: Design for a width of 320px */ 131 | 132 | @media only screen and (max-width: 767px) { 133 | .container { width: 300px; } 134 | .container .columns, 135 | .container .column { margin: 0; } 136 | 137 | .container .one.column, 138 | .container .one.columns, 139 | .container .two.columns, 140 | .container .three.columns, 141 | .container .four.columns, 142 | .container .five.columns, 143 | .container .six.columns, 144 | .container .seven.columns, 145 | .container .eight.columns, 146 | .container .nine.columns, 147 | .container .ten.columns, 148 | .container .eleven.columns, 149 | .container .twelve.columns, 150 | .container .thirteen.columns, 151 | .container .fourteen.columns, 152 | .container .fifteen.columns, 153 | .container .sixteen.columns, 154 | .container .one-third.column, 155 | .container .two-thirds.column { width: 300px; } 156 | 157 | /* Offsets */ 158 | .container .offset-by-one, 159 | .container .offset-by-two, 160 | .container .offset-by-three, 161 | .container .offset-by-four, 162 | .container .offset-by-five, 163 | .container .offset-by-six, 164 | .container .offset-by-seven, 165 | .container .offset-by-eight, 166 | .container .offset-by-nine, 167 | .container .offset-by-ten, 168 | .container .offset-by-eleven, 169 | .container .offset-by-twelve, 170 | .container .offset-by-thirteen, 171 | .container .offset-by-fourteen, 172 | .container .offset-by-fifteen { padding-left: 0; } 173 | 174 | } 175 | 176 | 177 | /* #Mobile (Landscape) 178 | ================================================== */ 179 | 180 | /* Note: Design for a width of 480px */ 181 | 182 | @media only screen and (min-width: 480px) and (max-width: 767px) { 183 | .container { width: 420px; } 184 | .container .columns, 185 | .container .column { margin: 0; } 186 | 187 | .container .one.column, 188 | .container .one.columns, 189 | .container .two.columns, 190 | .container .three.columns, 191 | .container .four.columns, 192 | .container .five.columns, 193 | .container .six.columns, 194 | .container .seven.columns, 195 | .container .eight.columns, 196 | .container .nine.columns, 197 | .container .ten.columns, 198 | .container .eleven.columns, 199 | .container .twelve.columns, 200 | .container .thirteen.columns, 201 | .container .fourteen.columns, 202 | .container .fifteen.columns, 203 | .container .sixteen.columns, 204 | .container .one-third.column, 205 | .container .two-thirds.column { width: 420px; } 206 | } 207 | 208 | 209 | /* #Clearing 210 | ================================================== */ 211 | 212 | /* Self Clearing Goodness */ 213 | .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 214 | 215 | /* Use clearfix class on parent to clear nested columns, 216 | or wrap each row of columns in a
    */ 217 | .clearfix:before, 218 | .clearfix:after, 219 | .row:before, 220 | .row:after { 221 | content: '\0020'; 222 | display: block; 223 | overflow: hidden; 224 | visibility: hidden; 225 | width: 0; 226 | height: 0; } 227 | .row:after, 228 | .clearfix:after { 229 | clear: both; } 230 | .row, 231 | .clearfix { 232 | zoom: 1; } 233 | 234 | /* You can also use a
    to clear columns */ 235 | .clear { 236 | clear: both; 237 | display: block; 238 | overflow: hidden; 239 | visibility: hidden; 240 | width: 0; 241 | height: 0; 242 | } 243 | --------------------------------------------------------------------------------