Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcoGargano
MarcoGargano committed Mar 27, 2024
1 parent 38e843f commit 5a1679e
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 45 deletions.
4 changes: 2 additions & 2 deletions inc/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
Body modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save changes</button>
<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion inc/offcanvas.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
Expand Down
116 changes: 74 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="An alternative simple and elegant Bootstrap way!" />
<meta name="author" content="Marco Gargano" />
<meta name="generator" content="Hugo 0.122.0" />
<title>Simplify Bootstrap - v. 0.1</title>
<link rel="stylesheet" href="style.css" />
</head>
Expand All @@ -23,7 +22,8 @@ <h5>Semplice ed elegante abito sartoriale. </h5>
<div class="col-9">
<h4>👋 Ciao! Mi chiamo Marco, <br />sono appassionato di front-end e utilizzo Bootstrap da tanti anni.</h4>
<p class="mb-1">Ritengo che Bootstrap sia un <strong>framework CSS completo</strong> e sopratutto
<strong>pronto all'uso</strong>.</p>
<strong>pronto all'uso</strong>.
</p>
<p class="mb-5">Oltre che per progetti personali di piccole dimensioni, utilizzo Bootstrap anche in ambienti
lavorativi più strutturati; talvolta viene compilato e spesso viene utilizzata una CDN.</p>

Expand Down Expand Up @@ -71,44 +71,64 @@ <h4>☝️ Il mio approccio!</h4>

<div class="row g-5">
<div class="col-md-2">
<ul class="list ps-3 py-3 sticky-top">
<li>
<a class="icon-link mb-1" href="#s-button">Button</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-badge">Badge</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-dropdown">Dropdown</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-nav">Nav</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-navbar">Navbar</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-tab">Tab</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-modal">Modal</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-offcanvas">Offcanvas</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-accordion">Accordion</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-alert">Alert</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-table">Table</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-form">Form</a>
</li>
</ul>
<div class="py-3 sticky-top">
<ul class="list ps-3">
<li>
<a class="icon-link mb-1" href="#s-button">Button</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-badge">Badge</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-dropdown">Dropdown</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-nav">Nav</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-navbar">Navbar</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-tab">Tab</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-modal">Modal</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-offcanvas">Offcanvas</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-accordion">Accordion</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-alert">Alert</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-table">Table</a>
</li>
<li>
<a class="icon-link mb-1" href="#s-form">Form</a>
</li>
</ul>

<hr class="col-3 my-4" />

<form class="" method="post" action="">
<label class="d-flex align-items-center form-label" for="picker">Change <input type="color" class="float-start form-control form-control-color form-control-sm ms-1" id="picker" value="#9d33e7" /></label>
</form>

<div id="picker-style">
<style>
:root {
--bs-primary: #9d33e7;
--bs-primary-rgb: 157, 51, 231;
--bs-secondary: #91abc1;
--bs-secondary-rgb: 145, 171, 193;
}
</style>
</div>

</div>
</div>
<div class="col">
<h2 class="text-body-emphasis">Component example</h2>
Expand All @@ -125,8 +145,7 @@ <h2 class="text-body-emphasis">Component example</h2>
</div>
</div>
</main>
<footer class="pt-5 my-5 text-body-secondary border-top">Created by Marco Gargano with ☮️ & 💜 &middot; &copy; 2024
</footer>
<footer class="pt-5 my-5 text-body-secondary border-top">Created by Marco Gargano with ☮️ & 💜 &middot; &copy; 2024</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
Expand All @@ -135,6 +154,19 @@ <h2 class="text-body-emphasis">Component example</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {

$("#picker").on("change", function() {
var color = $("#picker").val();
var hex = [
parseInt(color.substr(-6,2),16),
parseInt(color.substr(-4,2),16),
parseInt(color.substr(-2),16)
];
$("#picker-style").html("<style> :root { --bs-primary: " + color + "; --bs-primary-rgb: "+hex+"; } </style>");
});



$("#inc-nav").load("inc/nav.html");
$("#inc-tab").load("inc/tab.html");
$("#inc-button").load("inc/button.html");
Expand Down

0 comments on commit 5a1679e

Please sign in to comment.