Kaynağa Gözat

Changed homepage, making changes into docs

Edgar 3 yıl önce
ebeveyn
işleme
573c2d36a4
4 değiştirilmiş dosya ile 72 ekleme ve 29 silme
  1. 1 1
      dist/css/cards.css
  2. 37 28
      docs/examples/buttons.html
  3. 1 0
      docs/index.html
  4. 33 0
      src/js/Puppertino.js

+ 1 - 1
dist/css/cards.css

@@ -19,7 +19,7 @@
 }
 .p-card:hover{
   color: var(--p-blueberry-500);
-  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
 }
 .p-card.p-blueberry:hover{
   background: var(--p-bg-card);

+ 37 - 28
docs/examples/buttons.html

@@ -2,6 +2,8 @@
 <html lang="en">
   <head>
     <title>Buttons - Puppertino Framework</title>
+    <link rel="stylesheet" href="../index-assets/bootstrap-utilities.css">
+    <link rel="stylesheet" href="../index-assets/bootstrap-grid.min.css">
     <link
       href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
@@ -57,42 +59,49 @@
         <p>
           Push buttons come in different variations according to your needings. It can be used as <code class="code">&#60;a></code> elements or <code class="code">&#60;button></code> elements. For buttons, is suggested that you use the attribute <code class="code">disabled</code> if you desire to disable them.
         </p>
+        <div class="row">
+          <div class="col-md-6 mt-lg-5">
+            <button class="p-btn">Default</button>
 
-        <button class="p-btn">Default</button>
-
-        <button class="p-btn" disabled="">Disabled</button>
-
-        <a href="#" class="p-btn p-prim-col">Primary</a>
-
-        <a href="#" class="p-btn p-btn-mob">Btn mob</a>
-
-        <a href="#" class="p-btn p-btn-round p-orange p-white-color p-white-color">Rounded</a>
-
-        
-        <a href="#" class="p-btn p-btn-outline">Outline</a>
-
-        <a href="#" class="p-btn p-btn-outline-dash">Outline dashed</a>
-
-        <a href="#" class="p-btn p-btn-more">Custom action</a>
-
-        <p>Usage:</p>
-        <div class="code">
-          <pre>
-				<code class="html">
+            <button class="p-btn" disabled="">Disabled</button>
+    
+            <a href="#" class="p-btn p-prim-col">Primary</a>
+    
+            <a href="#" class="p-btn p-btn-mob">Btn mob</a>
+    
+            <a href="#" class="p-btn p-btn-round p-orange p-white-color p-white-color">Rounded</a>
+    
+            
+            <a href="#" class="p-btn p-btn-outline">Outline</a>
+    
+            <a href="#" class="p-btn p-btn-outline-dash">Outline dashed</a>
+    
+            <a href="#" class="p-btn p-btn-more">Custom action</a>    
+          </div>
+          <div class="col-md-6">
+            <p>Usage:</p>
+            <div class="code">
+              <pre>
+            <code class="html">
 &#60;a href="#" class="p-btn">Default&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-disabled">Disabled&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-prim-col">Primary&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-mob">Btn mob&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-round">Rounded&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-more">Custom action&#60;/a>
-				</code>
-			</pre>
+            </code>
+          </pre>
+            </div>
+          </div>
         </div>
+
+
+
       </div>
 
       <div class="talk-about-it">

+ 1 - 0
docs/index.html

@@ -353,6 +353,7 @@
       </div>
     </div>
 </body>
+  <script src="../src/js/Puppertino.js"></script>
   <script defer>
     document.querySelector('.toggles_dark_mode input').addEventListener('change',function(){
       let theme = localStorage.getItem('puppertino_theme');

+ 33 - 0
src/js/Puppertino.js

@@ -0,0 +1,33 @@
+function Puppertino(options, selector){
+    return {
+        options: options,
+        selector: selector,
+        modal: function(selector){
+            console.log('AAAAAAAA');
+
+            this.init = function(){
+                console.log('huh');
+            }
+            this.show = function(selector){
+                console.log(document.querySelector(selector));
+            }
+            this.hide = function(selector){
+
+                console.log(document.querySelector(selector));
+            }
+            this.toggle = function(selector){
+                console.log(document.querySelector(selector));
+            }
+            return this
+        }
+    }
+}
+
+options = {
+    'modal': {
+        'selector': 'try'
+    }
+}
+
+const robo1 = Puppertino().modal().show('body');
+