├── README.md ├── css ├── component.css └── demo.css ├── fonts ├── bpicons │ ├── bpicons.eot │ ├── bpicons.svg │ ├── bpicons.ttf │ ├── bpicons.woff │ └── license.txt └── icomoon │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── img ├── 01.png ├── 02.png ├── 03.png ├── 04.png ├── 05.png └── 06.png ├── index.html ├── js └── cbpFWTabs.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | Blueprint: Responsive Full Width Tabs 2 | ========= 3 | 4 | 100% width tabbed content with some example media queries for smaller screens. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=18521) 7 | 8 | [demo](http://tympanus.net/Blueprints/FullWidthTabs/) 9 | 10 | The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. 11 | Check out all of our Blueprints [here](http://tympanus.net/codrops/category/blueprints/) 12 | 13 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 14 | 15 | Read more here: [License](http://tympanus.net/codrops/licensing/) 16 | 17 | [© Codrops 2013](http://www.codrops.com) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('../fonts/icomoon/icomoon.eot?pvm5gj'); 4 | src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'), 5 | url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'), 6 | url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'), 7 | url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } /* Icons created with icomoon.io/app */ 11 | 12 | .tabs { 13 | position: relative; 14 | width: 100%; 15 | overflow: hidden; 16 | margin: 1em 0 2em; 17 | font-weight: 300; 18 | } 19 | 20 | /* Nav */ 21 | .tabs nav { 22 | text-align: center; 23 | } 24 | 25 | .tabs nav ul { 26 | padding: 0; 27 | margin: 0; 28 | list-style: none; 29 | display: inline-block; 30 | } 31 | 32 | .tabs nav ul li { 33 | border: 1px solid #becbd2; 34 | border-bottom: none; 35 | margin: 0 0.25em; 36 | display: block; 37 | float: left; 38 | position: relative; 39 | } 40 | 41 | .tabs nav li.tab-current { 42 | border: 1px solid #47a3da; 43 | box-shadow: inset 0 2px #47a3da; 44 | border-bottom: none; 45 | z-index: 100; 46 | } 47 | 48 | .tabs nav li.tab-current:before, 49 | .tabs nav li.tab-current:after { 50 | content: ''; 51 | position: absolute; 52 | height: 1px; 53 | right: 100%; 54 | bottom: 0; 55 | width: 1000px; 56 | background: #47a3da; 57 | } 58 | 59 | .tabs nav li.tab-current:after { 60 | right: auto; 61 | left: 100%; 62 | width: 4000px; 63 | } 64 | 65 | .tabs nav a { 66 | color: #becbd2; 67 | display: block; 68 | font-size: 1.45em; 69 | line-height: 2.5; 70 | padding: 0 1.25em; 71 | white-space: nowrap; 72 | } 73 | 74 | .tabs nav a:hover { 75 | color: #768e9d; 76 | } 77 | 78 | .tabs nav li.tab-current a { 79 | color: #47a3da; 80 | } 81 | 82 | /* Icons */ 83 | .tabs nav a:before { 84 | display: inline-block; 85 | vertical-align: middle; 86 | text-transform: none; 87 | font-weight: normal; 88 | font-variant: normal; 89 | font-family: 'icomoon'; 90 | line-height: 1; 91 | speak: none; 92 | -webkit-font-smoothing: antialiased; 93 | margin: -0.25em 0.4em 0 0; 94 | } 95 | 96 | .icon-food:before { 97 | content: "\e600"; 98 | } 99 | 100 | .icon-lab:before { 101 | content: "\e601"; 102 | } 103 | 104 | .icon-cup:before { 105 | content: "\e602"; 106 | } 107 | 108 | .icon-truck:before { 109 | content: "\e603"; 110 | } 111 | 112 | .icon-shop:before { 113 | content: "\e604"; 114 | } 115 | 116 | /* Content */ 117 | .content section { 118 | font-size: 1.25em; 119 | padding: 3em 1em; 120 | display: none; 121 | max-width: 1230px; 122 | margin: 0 auto; 123 | } 124 | 125 | .content section:before, 126 | .content section:after { 127 | content: ''; 128 | display: table; 129 | } 130 | 131 | .content section:after { 132 | clear: both; 133 | } 134 | 135 | /* Fallback example */ 136 | .no-js .content section { 137 | display: block; 138 | padding-bottom: 2em; 139 | border-bottom: 1px solid #47a3da; 140 | } 141 | 142 | .content section.content-current { 143 | display: block; 144 | } 145 | 146 | .mediabox { 147 | float: left; 148 | width: 33%; 149 | padding: 0 25px; 150 | } 151 | 152 | .mediabox img { 153 | max-width: 100%; 154 | display: block; 155 | margin: 0 auto; 156 | } 157 | 158 | .mediabox h3 { 159 | margin: 0.75em 0 0.5em; 160 | } 161 | 162 | .mediabox p { 163 | padding: 0 0 1em 0; 164 | margin: 0; 165 | line-height: 1.3; 166 | } 167 | 168 | /* Example media queries */ 169 | 170 | @media screen and (max-width: 52.375em) { 171 | .tabs nav a span { 172 | display: none; 173 | } 174 | 175 | .tabs nav a:before { 176 | margin-right: 0; 177 | } 178 | 179 | .mediabox { 180 | float: none; 181 | width: auto; 182 | padding: 0 0 35px 0; 183 | font-size: 90%; 184 | } 185 | 186 | .mediabox img { 187 | float: left; 188 | margin: 0 25px 10px 0; 189 | max-width: 40%; 190 | } 191 | 192 | .mediabox h3 { 193 | margin-top: 0; 194 | } 195 | 196 | .mediabox p { 197 | margin-left: 40%; 198 | margin-left: calc(40% + 25px); 199 | } 200 | 201 | .mediabox:before, 202 | .mediabox:after { 203 | content: ''; 204 | display: table; 205 | } 206 | 207 | .mediabox:after { 208 | clear: both; 209 | } 210 | } 211 | 212 | @media screen and (max-width: 32em) { 213 | .tabs nav ul, 214 | .tabs nav ul li a { 215 | width: 100%; 216 | padding: 0; 217 | } 218 | 219 | .tabs nav ul li { 220 | width: 20%; 221 | width: calc(20% + 1px); 222 | margin: 0 0 0 -1px; 223 | } 224 | 225 | .tabs nav ul li:last-child { 226 | border-right: none; 227 | } 228 | 229 | .mediabox { 230 | text-align: center; 231 | } 232 | 233 | .mediabox img { 234 | float: none; 235 | margin: 0 auto; 236 | max-width: 100%; 237 | } 238 | 239 | .mediabox h3 { 240 | margin: 1.25em 0 1em; 241 | } 242 | 243 | .mediabox p { 244 | margin: 0; 245 | } 246 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Blueprint Style */ 2 | /*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);*/ 3 | 4 | @font-face { 5 | font-family: 'bpicons'; 6 | src:url('../fonts/bpicons/bpicons.eot'); 7 | src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/bpicons/bpicons.woff') format('woff'), 9 | url('../fonts/bpicons/bpicons.ttf') format('truetype'), 10 | url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } /* Made with http://icomoon.io/ */ 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Lato', Calibri, Arial, sans-serif; 24 | color: #47a3da; 25 | } 26 | 27 | a { 28 | color: #ccc; 29 | text-decoration: none; 30 | outline: none; 31 | } 32 | 33 | a:hover { 34 | color: #000; 35 | } 36 | 37 | .container > header { 38 | width: 90%; 39 | max-width: 69em; 40 | margin: 0 auto; 41 | padding: 2.875em 1.875em 1.875em; 42 | } 43 | 44 | .container > header h1 { 45 | font-size: 2.125em; 46 | line-height: 1.3; 47 | margin: 0 0 0.6em 0; 48 | float: left; 49 | font-weight: 400; 50 | } 51 | 52 | .container > header > span { 53 | display: block; 54 | position: relative; 55 | z-index: 9999; 56 | font-weight: 700; 57 | text-transform: uppercase; 58 | letter-spacing: 0.5em; 59 | padding: 0 0 0.6em 0.1em; 60 | } 61 | 62 | .container > header > span span:after { 63 | width: 30px; 64 | height: 30px; 65 | left: -12px; 66 | font-size: 50%; 67 | top: -8px; 68 | font-size: 75%; 69 | position: relative; 70 | } 71 | 72 | .container > header > span span:hover:before { 73 | content: attr(data-content); 74 | text-transform: none; 75 | text-indent: 0; 76 | letter-spacing: 0; 77 | font-weight: 300; 78 | font-size: 110%; 79 | padding: 0.8em 1em; 80 | line-height: 1.2; 81 | text-align: left; 82 | left: auto; 83 | margin-left: 4px; 84 | position: absolute; 85 | color: #fff; 86 | background: #47a3da; 87 | } 88 | 89 | .container > header nav { 90 | float: right; 91 | text-align: center; 92 | } 93 | 94 | .container > header nav a { 95 | display: inline-block; 96 | position: relative; 97 | text-align: left; 98 | width: 2.5em; 99 | height: 2.5em; 100 | background: #fff; 101 | border-radius: 50%; 102 | margin: 0 0.1em; 103 | border: 4px solid #47a3da; 104 | } 105 | 106 | .container > header nav a > span { 107 | display: none; 108 | } 109 | 110 | .container > header nav a:hover:before { 111 | content: attr(data-info); 112 | color: #47a3da; 113 | position: absolute; 114 | width: 600%; 115 | top: 120%; 116 | text-align: right; 117 | right: 0; 118 | pointer-events: none; 119 | } 120 | 121 | .container > header nav a:hover { 122 | background: #47a3da; 123 | } 124 | 125 | .bp-icon:after { 126 | font-family: 'bpicons'; 127 | speak: none; 128 | font-style: normal; 129 | font-weight: normal; 130 | font-variant: normal; 131 | text-transform: none; 132 | text-align: center; 133 | color: #47a3da; 134 | -webkit-font-smoothing: antialiased; 135 | } 136 | 137 | .container > header nav .bp-icon:after { 138 | position: absolute; 139 | top: 0; 140 | left: 0; 141 | width: 100%; 142 | height: 100%; 143 | line-height: 2; 144 | text-indent: 0; 145 | } 146 | 147 | .container > header nav a:hover:after { 148 | color: #fff; 149 | } 150 | 151 | .bp-icon-next:after { 152 | content: "\e000"; 153 | } 154 | .bp-icon-drop:after { 155 | content: "\e001"; 156 | } 157 | .bp-icon-archive:after { 158 | content: "\e002"; 159 | } 160 | .bp-icon-about:after { 161 | content: "\e003"; 162 | } 163 | .bp-icon-prev:after { 164 | content: "\e004"; 165 | } 166 | 167 | p.info { 168 | text-align: center; 169 | padding: 20px; 170 | } 171 | 172 | @media screen and (max-width: 55em) { 173 | 174 | .container > header h1, 175 | .container > header nav { 176 | float: none; 177 | } 178 | 179 | .container > header > span, 180 | .container > header h1 { 181 | text-align: center; 182 | } 183 | 184 | .container > header nav { 185 | margin: 0 auto; 186 | } 187 | 188 | .container > header > span { 189 | text-indent: 30px; 190 | } 191 | } -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/fonts/bpicons/bpicons.eot -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/fonts/bpicons/bpicons.ttf -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/fonts/bpicons/bpicons.woff -------------------------------------------------------------------------------- /fonts/bpicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/fonts/icomoon/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/fonts/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/fonts/icomoon/icomoon.woff -------------------------------------------------------------------------------- /img/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/img/01.png -------------------------------------------------------------------------------- /img/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/img/02.png -------------------------------------------------------------------------------- /img/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/img/03.png -------------------------------------------------------------------------------- /img/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/img/04.png -------------------------------------------------------------------------------- /img/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/img/05.png -------------------------------------------------------------------------------- /img/06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/FullWidthTabs/b2f18f4efafcb503903061ab25e97eb1e8b65a51/img/06.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: Responsive Full Width Tabs 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 |
20 |
21 | Blueprint 22 |

Responsive Full Width Tabs

23 | 29 |
30 |
31 | 40 |
41 |
42 |
43 | img01 44 |

Sushi Gumbo Beetroot

45 |

Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

46 |
47 |
48 | img02 49 |

Pea Sprouts Fava Soup

50 |

Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

51 |
52 |
53 | img03 54 |

Turnip Broccoli Sashimi

55 |

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.

56 |
57 |
58 |
59 |
60 | img04 61 |

Asparagus Cucumber Cake

62 |

Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.

63 |
64 |
65 | img05 66 |

Magis Kohlrabi Gourd

67 |

Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

68 |
69 |
70 | img06 71 |

Ricebean Rutabaga

72 |

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.

73 |
74 |
75 |
76 |
77 | img02 78 |

Noodle Curry

79 |

Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.

80 |
81 |
82 | img06 83 |

Leek Wasabi

84 |

Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

85 |
86 |
87 | img01 88 |

Green Tofu Wrap

89 |

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.

90 |
91 |
92 |
93 |
94 | img03 95 |

Tomato Cucumber Curd

96 |

Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.

97 |
98 |
99 | img01 100 |

Mushroom Green

101 |

Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

102 |
103 |
104 | img04 105 |

Swiss Celery Chard

106 |

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.

107 |
108 |
109 |
110 |
111 | img02 112 |

Radish Tomato

113 |

Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.

114 |
115 |
116 | img06 117 |

Fennel Wasabi

118 |

Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.

119 |
120 |
121 | img01 122 |

Red Tofu Wrap

123 |

Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.

124 |
125 |
126 |
127 |
128 |

Food Shapes/Icons by PsdBlast

129 |
130 | 131 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /js/cbpFWTabs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpFWTabs.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2014, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | function extend( a, b ) { 16 | for( var key in b ) { 17 | if( b.hasOwnProperty( key ) ) { 18 | a[key] = b[key]; 19 | } 20 | } 21 | return a; 22 | } 23 | 24 | function CBPFWTabs( el, options ) { 25 | this.el = el; 26 | this.options = extend( {}, this.options ); 27 | extend( this.options, options ); 28 | this._init(); 29 | } 30 | 31 | CBPFWTabs.prototype.options = { 32 | nav : 'nav', 33 | start : 0, 34 | skip : [] 35 | }; 36 | 37 | CBPFWTabs.prototype._init = function() { 38 | // tabs elemes 39 | this.tabs = [].slice.call( this.el.querySelectorAll( this.options.nav + ' > ul > li' ) ); 40 | // content items 41 | this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) ); 42 | // current index 43 | this.current = -1; 44 | // show current content item 45 | this._show(); 46 | // init events 47 | this._initEvents(); 48 | }; 49 | 50 | CBPFWTabs.prototype._initEvents = function() { 51 | var self = this; 52 | var skip = this.options.skip; 53 | this.tabs.forEach( function( tab, idx ) { 54 | if (skip.indexOf(idx) == -1) { 55 | tab.addEventListener( 'click', function( ev ) { 56 | ev.preventDefault(); 57 | self._show( idx ); 58 | } ); 59 | } 60 | } ); 61 | }; 62 | 63 | CBPFWTabs.prototype._show = function( idx ) { 64 | if( this.current >= 0 ) { 65 | // remove and add class thanks to Apollo.js (github.com/toddmotto/apollo) 66 | this.tabs[ this.current ].className = this.tabs[ this.current ].className.replace(new RegExp('(^|\\s)*' + 'tab-current' + '(\\s|$)*', 'g'), ''); 67 | this.items[ this.current ].className = this.items[ this.current ].className.replace(new RegExp('(^|\\s)*' + 'content-current' + '(\\s|$)*', 'g'), ''); 68 | } 69 | // change current 70 | this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; 71 | this.tabs[ this.current ].className += (this.tabs[ this.current ].className ? ' ' : '') + 'tab-current'; 72 | this.items[ this.current ].className += (this.items[ this.current ].className ? ' ' : '') + 'content-current'; 73 | }; 74 | 75 | // add to global namespace 76 | window.CBPFWTabs = CBPFWTabs; 77 | 78 | })( window ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "full-width-tabs", 3 | "version": "0.0.1", 4 | "description": "100% width tabbed content with some example media queries for smaller screens.", 5 | "homepage": "https://github.com/codrops/FullWidthTabs", 6 | "author": "codrops", 7 | "keywords": [ 8 | "full-width", 9 | "tabs" 10 | ], 11 | "license": "MIT", 12 | "main": "js/cbpFWTabs.js", 13 | "files": [ 14 | "css/component.css", 15 | "js/cbpFWTabs.js" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git://github.com/codrops/FullWidthTabs.git" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/codrops/FullWidthTabs/issues", 23 | "email": "info@codrops.com" 24 | }, 25 | "scripts": { 26 | "test": "make test" 27 | } 28 | } 29 | --------------------------------------------------------------------------------