tabs documentation work in progress

Pascal Alferink · Pascal Alferink · commit 80bd93fd553a · 2017-02-16T10:57:51.000+01:00
diff --git a/dist/about.html b/dist/about.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/breadcrumbs.html b/dist/breadcrumbs.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/buttons.html b/dist/buttons.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/css/styles.min.css.map b/dist/css/styles.min.css.map
diff --git a/dist/grid.html b/dist/grid.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/icons.html b/dist/icons.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/index.html b/dist/index.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/installation.html b/dist/installation.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/js/scripts.min.js b/dist/js/scripts.min.js
diff --git a/dist/mixins.html b/dist/mixins.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/notifications.html b/dist/notifications.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/tabs.html b/dist/tabs.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
@@ -117,28 +118,28 @@ <h1>Tabs</h1>
 			<div class="block pt tb">
 				<h2>Example</h2>
 
-				<div class="tabs">
+				<div class="tabs" data-castlecss-tab-container>
 					<ul class="tabs-header">
-						<li class="tabs-title">
-							<a href="#example1tab1">Tab title 1</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab1">
+							<a href="#">Tab title 1</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#example1tab2">Tab title 2</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab2">
+							<a href="#" >Tab title 2</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#example1tab3">Tab title 3</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab3">
+							<a href="#" >Tab title 3</a>
 						</li>
 					</ul>
 					<div class="tabs-content">
-						<div class="tab-panel" id="example1tab1">
+						<div class="tab-panel is-active" data-castlecss-tab-panel="tab1">
 							<h2>Tab 1</h2>
 							<p>This is the first tab</p>
 						</div>
-						<div class="tab-panel" id="example1tab2">
+						<div class="tab-panel" data-castlecss-tab-panel="tab2">
 							<h2>Tab 2</h2>
 							<p>This is the second tab</p>
 						</div>
-						<div class="tab-panel" id="example1tab3">
+						<div class="tab-panel" data-castlecss-tab-panel="tab3">
 							<h2>Tab 3</h2>
 							<p>This is the third tab</p>
 						</div>
@@ -151,21 +152,71 @@ <h2>Tab 3</h2>
 				<h2>Options</h2>
 				<h3>Full width tabs</h3>
 				<p>
-					On screens wider than 768px the tabs are shown inline. With CastleCSS Tabs it is also possible to make the tabs 100% width. To do so change the <code>tabs-header</code> to <code>tabs-header tabs-header-full</code>
+					tabs are default shown inline. With CastleCSS Tabs it is also possible to make the tabs 100% width. To do so change the <code>tabs-header</code> to <code>tabs-header tabs-header-full</code>
 				</p>
 				<h4>Example full width tabs</h4>
-				<div class="tabs">
+				<div class="tabs" data-castlecss-tab-container>
 					<ul class="tabs-header tabs-header-full">
-						<li class="tabs-title">
-							<a href="#tab1">Tab title 1</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab1">
+							<a href="#">Tab title 1</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#tab2">Tab title 2</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab2">
+							<a href="#">Tab title 2</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#tab3">Tab title 3</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab3">
+							<a href="#">Tab title 3</a>
 						</li>
 					</ul>
+					<div class="tabs-content">
+						<div class="tab-panel is-active" data-castlecss-tab-panel="tab1">
+							<h2>Tab 1</h2>
+							<p>This is the first tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab2">
+							<h2>Tab 2</h2>
+							<p>This is the second tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab3">
+							<h2>Tab 3</h2>
+							<p>This is the third tab</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="block mt-2x">
+				<h3>Mobile accordions</h3>
+				<p>
+					It is possible to show the tabs as accordions on screens to 1024px wide. To do so change the <code>tabs</code> to <code>tabs tabs-accordion</code>
+				</p>
+				<h4>Example accordions</h4>
+				<div class="alert-warning mb hide show-b4">make your screen less wide</div>
+				<div class="tabs tabs-accordion" data-castlecss-tab-container>
+					<ul class="tabs-header tabs-header-full">
+
+						<li class="tabs-title" data-castlecss-tab-header="tab1">
+							<a href="#">Tab title 1</a>
+						</li>
+						<li class="tabs-title" data-castlecss-tab-header="tab2">
+							<a href="#">Tab title 2</a>
+						</li>
+						<li class="tabs-title" data-castlecss-tab-header="tab3">
+							<a href="#">Tab title 3</a>
+						</li>
+					</ul>
+					<div class="tabs-content">
+						<div class="tab-panel is-active" data-castlecss-tab-panel="tab1">
+							<h2>Tab 1</h2>
+							<p>This is the first tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab2">
+							<h2>Tab 2</h2>
+							<p>This is the second tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab3">
+							<h2>Tab 3</h2>
+							<p>This is the third tab</p>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/dist/utility.html b/dist/utility.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/utility_spacers.html b/dist/utility_spacers.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/variables.html b/dist/variables.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/dist/variables_1x.html b/dist/variables_1x.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,9 @@
+'use strict';
+
+// Require jQuery for document ready event
+var $ = require('jquery');
+
+// Include your modules
+var Tabs = require('castlecss-tabs').Tabs;
+
+$(Tabs);
diff --git a/package.json b/package.json
@@ -27,7 +27,8 @@
     "castlecss-buttons": "^0.5.0",
     "castlecss-core": "^2.1.0",
     "castlecss-icons": "^1.0.2",
-    "castlecss-notifications": "^1.0.0"
+    "castlecss-notifications": "^1.0.0",
+    "jquery": "^3.1.1"
   },
   "repository": {
     "type": "git",
@@ -43,7 +44,8 @@
     "grunt-sass": "^2.0.0",
     "jit-grunt": "^0.10.0",
     "nunjucks": "^3.0.0",
-    "pixrem": "^3.0.0"
+    "pixrem": "^3.0.0",
+    "webpack": "^2.2.1"
   },
   "bugs": {
     "url": "https://github.com/CastleCSS/castlecss-docs/issues"
diff --git a/views/inc/header.html b/views/inc/header.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="css/styles.min.css" />
 		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
+		<script src="js/scripts.min.js" type="text/javascript"></script>
 	</head>
 
 	<body>
diff --git a/views/tabs.html b/views/tabs.html
@@ -10,28 +10,28 @@ <h1>Tabs</h1>
 			<div class="block pt tb">
 				<h2>Example</h2>
 
-				<div class="tabs">
+				<div class="tabs" data-castlecss-tab-container>
 					<ul class="tabs-header">
-						<li class="tabs-title">
-							<a href="#example1tab1">Tab title 1</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab1">
+							<a href="#">Tab title 1</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#example1tab2">Tab title 2</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab2">
+							<a href="#" >Tab title 2</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#example1tab3">Tab title 3</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab3">
+							<a href="#" >Tab title 3</a>
 						</li>
 					</ul>
 					<div class="tabs-content">
-						<div class="tab-panel" id="example1tab1">
+						<div class="tab-panel is-active" data-castlecss-tab-panel="tab1">
 							<h2>Tab 1</h2>
 							<p>This is the first tab</p>
 						</div>
-						<div class="tab-panel" id="example1tab2">
+						<div class="tab-panel" data-castlecss-tab-panel="tab2">
 							<h2>Tab 2</h2>
 							<p>This is the second tab</p>
 						</div>
-						<div class="tab-panel" id="example1tab3">
+						<div class="tab-panel" data-castlecss-tab-panel="tab3">
 							<h2>Tab 3</h2>
 							<p>This is the third tab</p>
 						</div>
@@ -44,21 +44,71 @@ <h2>Tab 3</h2>
 				<h2>Options</h2>
 				<h3>Full width tabs</h3>
 				<p>
-					On screens wider than 768px the tabs are shown inline. With CastleCSS Tabs it is also possible to make the tabs 100% width. To do so change the <code>tabs-header</code> to <code>tabs-header tabs-header-full</code>
+					tabs are default shown inline. With CastleCSS Tabs it is also possible to make the tabs 100% width. To do so change the <code>tabs-header</code> to <code>tabs-header tabs-header-full</code>
 				</p>
 				<h4>Example full width tabs</h4>
-				<div class="tabs">
+				<div class="tabs" data-castlecss-tab-container>
 					<ul class="tabs-header tabs-header-full">
-						<li class="tabs-title">
-							<a href="#tab1">Tab title 1</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab1">
+							<a href="#">Tab title 1</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#tab2">Tab title 2</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab2">
+							<a href="#">Tab title 2</a>
 						</li>
-						<li class="tabs-title">
-							<a href="#tab3">Tab title 3</a>
+						<li class="tabs-title" data-castlecss-tab-header="tab3">
+							<a href="#">Tab title 3</a>
 						</li>
 					</ul>
+					<div class="tabs-content">
+						<div class="tab-panel is-active" data-castlecss-tab-panel="tab1">
+							<h2>Tab 1</h2>
+							<p>This is the first tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab2">
+							<h2>Tab 2</h2>
+							<p>This is the second tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab3">
+							<h2>Tab 3</h2>
+							<p>This is the third tab</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="block mt-2x">
+				<h3>Mobile accordions</h3>
+				<p>
+					It is possible to show the tabs as accordions on screens to 1024px wide. To do so change the <code>tabs</code> to <code>tabs tabs-accordion</code>
+				</p>
+				<h4>Example accordions</h4>
+				<div class="alert-warning mb hide show-b4">make your screen less wide</div>
+				<div class="tabs tabs-accordion" data-castlecss-tab-container>
+					<ul class="tabs-header tabs-header-full">
+
+						<li class="tabs-title" data-castlecss-tab-header="tab1">
+							<a href="#">Tab title 1</a>
+						</li>
+						<li class="tabs-title" data-castlecss-tab-header="tab2">
+							<a href="#">Tab title 2</a>
+						</li>
+						<li class="tabs-title" data-castlecss-tab-header="tab3">
+							<a href="#">Tab title 3</a>
+						</li>
+					</ul>
+					<div class="tabs-content">
+						<div class="tab-panel is-active" data-castlecss-tab-panel="tab1">
+							<h2>Tab 1</h2>
+							<p>This is the first tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab2">
+							<h2>Tab 2</h2>
+							<p>This is the second tab</p>
+						</div>
+						<div class="tab-panel" data-castlecss-tab-panel="tab3">
+							<h2>Tab 3</h2>
+							<p>This is the third tab</p>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/webpack.config.js b/webpack.config.js
