Home Explore Help
Register Sign In
oleg
/
Puppertino
mirror of https://github.com/codedgar/Puppertino.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Changed homepage, making changes into docs

Edgar 3 years ago
parent
ef932c88bb
commit
573c2d36a4
4 changed files with 72 additions and 29 deletions
Unified View Show Diff Stats
  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
View File 

@@ -19,7 +19,7 @@
 
 }
 
 }
 
 .p-card:hover{
 
 .p-card:hover{
 
   color: var(--p-blueberry-500);
 
   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{
 
 .p-card.p-blueberry:hover{
 
   background: var(--p-bg-card);
 
   background: var(--p-bg-card);

+ 37 - 28
docs/examples/buttons.html
View File 

@@ -2,6 +2,8 @@
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <title>Buttons - Puppertino Framework</title>
 
     <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
 
     <link
 
       href="https://rsms.me/inter/inter.css"
 
       href="https://rsms.me/inter/inter.css"
 
       rel="stylesheet"
 
       rel="stylesheet"
 
@@ -57,42 +59,49 @@
 
         <p>
 
         <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.
 
           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>
 
         </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">Default&#60;/a>
 
-
 
+    
 &#60;a href="#" class="p-btn p-btn-disabled">Disabled&#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-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-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-round">Rounded&#60;/a>
 
-
 
+    
 &#60;a href="#" class="p-btn p-btn-more">Custom action&#60;/a>
 
 &#60;a href="#" class="p-btn p-btn-more">Custom action&#60;/a>
 
-				</code>
 
-			</pre>
 
+            </code>
 
+          </pre>
 
+            </div>
 
+          </div>
 
         </div>
 
         </div>
 
+
 
+
 
+
 
       </div>
 
       </div>
 
 
 
       <div class="talk-about-it">
 
       <div class="talk-about-it">

+ 1 - 0
docs/index.html
View File 

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

+ 33 - 0
src/js/Puppertino.js
View File 

@@ -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');
 
+