getting-started.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Getting started - Puppertino Framework</title>
  6. <link
  7. href="https://rsms.me/inter/inter.css"
  8. rel="stylesheet"
  9. />
  10. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
  11. <meta
  12. name="viewport"
  13. content="width=device-width, initial-scale=1, shrink-to-fit=no"
  14. />
  15. <meta http-equiv="x-ua-compatible" content="ie=edge" />
  16. <link rel="stylesheet" type="text/css" href="doc.css" />
  17. <meta
  18. name="description"
  19. content="Wondering how to use Puppertino? Wonder no more, click here to get a getting started guide."
  20. />
  21. <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
  22. <!-- Global site tag (gtag.js) - Google Analytics -->
  23. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
  24. <script>
  25. window.dataLayer = window.dataLayer || [];
  26. function gtag(){dataLayer.push(arguments);}
  27. gtag('js', new Date());
  28. gtag('config', 'UA-176821843-1');
  29. </script>
  30. </head>
  31. <body class="p-layout">
  32. <div class="route">
  33. <a
  34. href="https://codedgar.github.io/Puppertino/"
  35. class="p-btn p-btn-scope p-btn-scope-unactive"
  36. >Puppertino</a
  37. >
  38. <p>/</p>
  39. <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
  40. >Examples</a
  41. >
  42. <p>/</p>
  43. <a href="getting-started.html" class="p-btn p-btn-scope">Introduction</a>
  44. </div>
  45. <div class="p-docs-alert">
  46. <div>
  47. <svg viewBox="0 0 24 24" width="50" height="50" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
  48. </div>
  49. <div>
  50. <h3>Alert</h3>
  51. <p>
  52. The way in which Puppertino is installed or works will drastically change in new versions. <br>
  53. To keep yourself updated, and understand how to migrate to newer versions, follow <a href="https://codedgar.com" target="_blank">@codedgar_dev</a></p>
  54. </div>
  55. </div>
  56. <h1>Getting started</h1>
  57. <div class="master">
  58. <p>
  59. Puppertino is a straightforward framework to use as you would expect. You can use Puppertino in two ways:
  60. </p>
  61. <div class="talk-about-it">
  62. <h2>Download the full CSS.</h2>
  63. <p>
  64. <a href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css">Downloading the full CSS </a> is recommended if you are going to use several components of Puppertino or you are planning on using them. However, if you are going to use if some of them we recommend you to go to the next way of using Puppertino.
  65. </p>
  66. <a href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css" target="_blank" class="p-btn p-prim-col p-btn-md">Download Puppertino</a>
  67. </div>
  68. <div class="talk-about-it">
  69. <h2>Using CSS based on components.</h2>
  70. <p>
  71. You can also browse the <a href="https://github.com/codedgar/Puppertino/tree/master/dist/css" target="_blank">Puppertino Repo</a> to find whatever components you want to use.
  72. </p>
  73. <a href="https://github.com/codedgar/Puppertino/tree/master/dist/css" target="_blank" class="p-btn p-prim-col p-btn-md">Browse repo</a>
  74. </div>
  75. <div class="talk-about-it">
  76. <h2>What about JS?</h2>
  77. <p>
  78. There's a section for that in our repo. Sadly there's no full.js, so you'll have to manually download and import every one of them you want to use.
  79. </p>
  80. <a href="https://github.com/codedgar/Puppertino/tree/master/src/js" target="_blank" class="p-btn p-prim-col p-btn-md">Check JS files</a>
  81. </div>
  82. </div>
  83. </body>
  84. <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
  85. <script
  86. type="text/javascript"
  87. src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
  88. ></script>
  89. <script defer>
  90. hljs.initHighlightingOnLoad();
  91. </script>
  92. </html>