docs update, add line height and adjust breakpoints

frankpagan · frankpagan · commit b725a1c15af2 · 2021-04-26T22:58:23.000Z
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # CoCreate-conditional-logic
 
-A simple conditional-logic component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/conditional-logic)
+Simple JS component show & hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc. Easy Configuration using HTML5 data attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/conditional-logic)
 
 ![GitHub file size in bytes](https://img.shields.io/github/size/CoCreate-app/CoCreate-conditional-logic/dist/CoCreate-conditional-logic.min.js?label=minified%20size&style=for-the-badge)
 ![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-conditional-logic?style=for-the-badge)
diff --git a/docs/index.html b/docs/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>CoCreate-conditional-logic Documentation | CoCreateJS </title>
         <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
-        <meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
+        <meta name="description" content="Simple JS component show & hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc" />
         <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
         <meta name="robots" content="index,follow" />
        	<meta property="og:image" content="https://cdn.cocreate.app/docs/conditional-logic.png">
@@ -17,13 +17,13 @@
     </head>
 
     <body>
-		<navbar class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" data-collection="components" data-document_id="60395ef42b3ac232657040fd" name="html">
-		</navbar>
+		<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" data-collection="components" data-document_id="60395ef42b3ac232657040fd" name="html">
+		</nav>
 		<sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
 			<menu data-collection="components" data-document_id="603717b07de7fb350ae9fec8" name="html"></menu>
 			<div class="resizeHandler"></div>
 	    </sidenav>
-        <main class="padding:15px_15px_0px_15px" data-main_content_id="content" id="cocreate-conditional-logic">
+        <main class="padding-top:15px padding:15px@lg@xl" data-main_content_id="content" id="cocreate-conditional-logic">
             <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
                 <div class="display:flex align-items:center">
                     <h2>CoCreate-conditional-logic</h2>
@@ -40,9 +40,9 @@ <h2>CoCreate-conditional-logic</h2>
                     <a href="https://github.com/CoCreate-app/CoCreate-conditional-logic" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
                 </div>
             </div>
-            <p class="max-width:500px margin:20px_10px">Show or Hide html elements triggered by a click or change action.</p>
+            <p class="max-width:500px margin:20px_10px line-height:1.5">Simple JS component show & hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc. Easy Configuration using HTML5 data attributes and/or JavaScript API</p>
             <div id="conditional-logic-section" class="display:flex flex-wrap:wrap">
-                <div class="flex-grow:1 width:400px padding:0px_10px margin-top:60px">
+                <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
 
                     <div id="conditional-logic-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-install-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#conditional-logic-install"]'>
@@ -51,7 +51,7 @@ <h2 class="padding:5px_0px">Install</h2>
                         </span>
                     </div>
                     <pre><code class="language-bash">npm i @cocreate/conditional-logic</code></pre>
-                    <p class="padding:10px_0px">Or you can use cdn link:</p>
+                    <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
                     <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/conditional-logic/latest/CoCreate-conditional-logic.min.js&lt;/script&gt;</code></pre>
     
                     <div id="conditional-logic-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-usage-section">
@@ -61,7 +61,7 @@ <h2 class="padding:5px_0px">Usage</h2>
                         </span>
                     </div>
                     <div class="">
-                        <p class="padding:10px_0px">This is conditional-logic usage</p>
+                        <p class="padding:10px_0px line-height:1.5">This is conditional-logic usage</p>
                 
                         <div class="flex-grow:1 min-width:300px width:100%">
                             <pre>
@@ -75,7 +75,7 @@ <h2 class="padding:5px_0px">Usage</h2>
                                 </code>
                             </pre>
                         </div>
-                        <p class="padding:10px_0px">This is conditional-logic usage</p>
+                        <p class="padding:10px_0px line-height:1.5">This is conditional-logic usage</p>
                     </div>
                     
                     <div id="conditional-logic-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-attributes-section">
@@ -96,7 +96,7 @@ <h4><span>data-hide</span> <span class="cocreate-badge success">string</span> <s
                     </ul>
                 </div>
                 
-                <div class="flex-grow:1 width:350px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
+                <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
                     
                     <!-- SandBox -->
                     <div id="conditional-logic-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-demo-section">
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@cocreate/conditional-logic",
   "version": "1.0.4",
-  "description": "A simple conditional-logic component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
+  "description": "Simple JS component show & hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc. Easy Configuration using HTML5 data attributes and/or JavaScript API.",
   "keywords": [
     "conditional-logic",
     "cocreate",

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@cocreate/conditional-logic",`
`3`	`3`	`"version": "1.0.4",`
`4`		`- "description": "A simple conditional-logic component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",`
	`4`	`+ "description": "Simple JS component show & hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc. Easy Configuration using HTML5 data attributes and/or JavaScript API.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"conditional-logic",`
`7`	`7`	`"cocreate",`