fix: Update to readme, demo, added cdn scripts

Author: frankpagan

docs/index.html

@@ -44,7 +44,7 @@ <h2>CoCreate-utils</h2>
             <p class="max-width:500px margin:20px_10px line-height:1.5">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</p>
             <div id="utils-section" class="display:flex flex-wrap:wrap">
                 <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
-                    <div id="utils-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-install-section">
+                    <div id="utils-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#utils-install-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#utils-install"]'>
                             <h2 class="padding:5px_0px">Install</h2>
                             <a class="margin-left:10px display:none" href="#utils-install"><i class="fas fa-link"></i></a>
@@ -54,7 +54,7 @@ <h2 class="padding:5px_0px">Install</h2>
                     <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/utils/latest/CoCreate-utils.min.js&lt;/script&gt;</code></pre>
 
-                    <div id="utils-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-usage-section">
+                    <div id="utils-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#utils-usage-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#utils-usage"]'>
                             <h2 class="padding:5px_0px">Usage</h2>
                             <a class="margin-left:10px display:none" href="#utils-usage"><i class="fas fa-link"></i></a>
@@ -63,7 +63,7 @@ <h2 class="padding:5px_0px">Usage</h2>
                     <p class="padding:10px_0px line-height:1.5">utils usage content</p>
                     <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
 
-                    <div id="utils-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-usage-section">
+                    <div id="utils-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#utils-usage-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#utils-usage"]'>
                             <h2 class="padding:5px_0px">Usage</h2>
                             <a class="margin-left:10px display:none" href="#utils-usage"><i class="fas fa-link"></i></a>
@@ -73,7 +73,7 @@ <h2 class="padding:5px_0px">Usage</h2>
                     <pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
                     <p class="padding:10px_0px line-height:1.5">This is utils usage content</p>
 
-                    <div id="utils-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-attributes-section">
+                    <div id="utils-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#utils-attributes-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#utils-attributes"]'>
                             <h2 class="padding:5px_0px">Attributes</h2>
                             <a class="margin-left:10px display:none" href="#utils-attributes"><i class="fas fa-link"></i></a>
@@ -93,7 +93,7 @@ <h4><span>data-utils</span> <span class="cocreate-badge success">string</span> <
 
                 <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
                     <!-- SandBox -->
-                    <div id="utils-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-demo-section">
+                    <div id="utils-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#utils-demo-section">
                         <span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#utils-demo"]'>
                             <h2 class="padding:5px_0px">Demo</h2>
                             <a class="margin-left:10px display:none" href="#utils-demo"><i class="fas fa-link"></i></a>
@@ -148,7 +148,10 @@ <h2 class="padding:5px_0px">Demo</h2>
                 </div>
 
             </div>				
-        </main>
+        	<button href="https://github.com/CoCreate-app/CoCreate-utils/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%">
+		        <i class="fas fa-pencil-alt"></i>
+	        </button>
+		</main>
         <script>
             var config = {
                 apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',