Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcoGargano
MarcoGargano committed Apr 1, 2024
1 parent ddad951 commit dddd71e
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 77 deletions.
160 changes: 89 additions & 71 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,25 @@ <h5>Ora semplice ed elegante... </h5>
<div class="row">
<div class="col-sm-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>
<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>

<h4>🤌 Perché un'altra fork di Bootstrap??</h4>
<p class="mb-5">Secondo me e secondo i recenti sviluppi che hanno interessato lo sviluppo CSS, è possibile
<p>Ritengo che Bootstrap sia un <strong>framework CSS completo</strong> e sopratutto <strong>pronto all'uso</strong>. Viene utilizzato in svariati modi; talvolta compilato e spesso tramite una CDN. Le regole CSS basilari (per esempio font e colori) talvolta vengono sovrascritte tramite un nuovo file css.</p>

<h4 class="mt-5">🤌 Perché un'altra fork di Bootstrap??</h4>
<p class="mb-5">Secondo i recenti sviluppi che hanno interessato la compatibilità CSS, è possibile
utilizzare Bootstrap senza dover compilare il codice; pur mantenendo la possibilità di personalizzare
facilmente alcuni parametri. Raggiungendo risultati semplici ed eleganti. <strong>Le varibili native CSS
facilmente alcuni parametri. <strong>Le varibili native CSS
hanno rivoluzionato anche il mio approccio.</strong></p>

<h4>☝️ Il mio approccio!</h4>
<p class="mb-1">Per uniformare e centralizzare l'utilizzo del colore primario, per esempio, questo potrà esser
dichiarato e tutte le sue applicazioni ne verrano interessate. </p>
<p class="mb-5">Tutto ciò ce ti servirà impostare per un rapida personalizzazione lo trovi subito all'interno
del file CSS. Senza dover compilare nulla e pronto all'anteprima. <strong>Poche e chiare variabili per tanti
utilizzi.</strong> </p>
<p class="mb-2">
<pre class="bg-warning bg-opacity-10 p-3 rounded-5"><code>@import url("font/font.css");
<p class="mb-1">Utilizzando alcune e semplici varibili native CSS è possibile personalizzare velocemente Bootstrap. </p>
<ul>
<li><strong>Non richiede compilazione</strong></li>
<li><strong>Variabili CSS native</strong></li>
<li><strong>Approccio moderno</strong></li>
</ul>

<p class="mb-2">Tutto ciò che ti servirà impostare per un rapida personalizzazione lo trovi subito all'interno
del file CSS. Senza dover compilare nulla e pronto all'anteprima. <strong>Poche e chiare variabili declinate per diversi utilizzi.</strong> </p>
<pre class="bg-secondary bg-opacity-10 p-3 rounded-5 mb-5"><code>@import url("font/font.css");

:root {
/* --- Set your font family --- */
Expand All @@ -57,13 +56,15 @@ <h4>☝️ Il mio approccio!</h4>
/* --- Set your primary and secondary color --- */
--bs-primary: #9d33e7;
--bs-primary-rgb: 157, 51, 231;
--bs-secondary: #91abc1;
--bs-secondary-rgb: 145, 171, 193;
--bs-secondary: #5592eb;
--bs-secondary-rgb: 85, 146, 235;

/* --- Set your border-radius --- */
--bs-border-radius: 0.25rem;
}</code></pre>
</p>

<p class="mb-2">Scarica e inserisci nella head del tuo progetto il file CSS di seguito.</p>
<p class="mb-2"><input class="form-control bg-secondary bg-opacity-10 p-3 rounded-5 border-0" type="text" readonly disabled value='<link rel="stylesheet" href="style.css" />'></p>

<div class="mt-3 mb-5">
<div class="float-end mb-3">
Expand All @@ -76,35 +77,66 @@ <h4>☝️ Il mio approccio!</h4>
</div>

<div class="row">
<div class="col">
<div class="col mt-5">
<h3>Crea direttamente il tuo file personalizzato:</h3>
</div>
</div>
<div class="row sticky-bottom sticky-top z-3">
<div class="col">
<div class="my-3 p-3 bg-light border border-primary border-2 rounded-5 shadow-lg">
<form class="" method="post" action="">
<div class="d-sm-flex flex-sm-row align-items-center justify-content-between gap-4">
<h5 class="d-flex align-items-center mb-sm-0 ms-2">🙌 </h5>
<label class="d-flex align-items-center form-label mb-sm-0" for="primary-color">Primary:
<input type="color" class="float-start form-control form-control-color form-control-sm ms-1 bg-opacity-25"
id="primary-color" name="primary-color" value="#9d33e7" />
</label>
<label class="d-flex align-items-center form-label mb-sm-0" for="secondary-color">Secondary:
<input type="color" class="float-start form-control form-control-color form-control-sm ms-1"
id="secondary-color" name="secondary-color" value="#91abc1" />
</label>
<label class="d-flex align-items-center form-label mb-sm-0" for="border-radius">Border radius:
<input type="text" class="float-start form-control form-control-color form-control-sm ms-1"
id="border-radius" name="border-radius" value="0.25rem" placeholder="0.25rem" style="width: 80px;" />
</label>
<label class="d-flex align-items-center form-label mb-sm-0" for="font-size">Font size:
<input type="text" class="float-start form-control form-control-color form-control-sm ms-1"
id="font-size" name="font-size" value="0.875rem" placeholder="0.875rem" style="width: 80px;" />
</label>
<button id="download-btn" class="btn btn-primary text-nowrap">Scarica .css</button>
</div>
<form id="custom" class="" method="post" action="">
<div class="row">
<div class="col">
<p class="mb-1"><small>Prova in tempo reale</small></p>
<h5 class="">Imposta qui 👉</h5>
</div>
<div class="col-2">
<p class="mb-1 fw-bold text-secondary"><small>Primary</small></p>
<label class="d-flex align-items-center input-group form-label mb-sm-0" for="primary-color">
<input type="color" class="float-start form-control form-control-color form-control-sm ms-1 bg-opacity-25"
id="primary-color" name="primary-color" value="#9d33e7" style="max-width: 30px;" />
<input class="form-control form-control-sm" type="text" value="#9d33e7" id="primary-color-code">
</label>
</div>
<div class="col-2">
<p class="mb-1 fw-bold text-secondary"><small>Secondary</small></p>
<label class="d-flex align-items-center input-group form-label mb-sm-0" for="secondary-color">
<input type="color" class="float-start form-control form-control-color form-control-sm ms-1"
id="secondary-color" name="secondary-color" value="#5592eb" style="max-width: 30px;" />
<input class="form-control form-control-sm" type="text" value="#5592eb" id="secondary-color-code" disabled readonly>
</label>
</div>
<div class="col-auto">
<p class="mb-1 fw-bold text-secondary"><small>Font size</small></p>
<label class="d-flex align-items-center form-label mb-sm-0" for="font-size">
<input type="text" class="float-start form-control form-control-color form-control-sm ms-1"
id="font-size" name="font-size" value="0.875rem" placeholder="0.875rem" style="width: 80px;" />
</label>
</div>
<div class="col-auto">
<p class="mb-1 fw-bold text-secondary"><small>Border radius</small></p>
<label class="d-flex align-items-center form-label mb-sm-0" for="border-radius">
<input type="text" class="float-start form-control form-control-color form-control-sm ms-1"
id="border-radius" name="border-radius" value="0.25rem" placeholder="0.25rem" style="width: 80px;" />
</label>
</div>
<div class="col-auto">
<p class="mb-1 fw-bold text-secondary"><small>Click & use</small></p>
<button id="download-btn" class="btn btn-primary text-nowrap">Scarica .css</button>
</div>
</div>
</form>
<div id="custom-style">
<style>
:root {
--bs-primary: #9d33e7;
--bs-primary-rgb: 157, 51, 231;
--bs-secondary: #5592eb;
--bs-secondary-rgb: 85, 146, 235;
}
</style>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -156,28 +188,6 @@ <h5 class="d-flex align-items-center mb-sm-0 ms-2">🙌 </h5>
</li>
</ul>

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

<form class="" method="post" action="">
<label class="d-flex align-items-center form-label" for="picker">🤲 Prova un altro primary: </label>
<div class="input-group" style="max-width: 110px;">
<input type="color" class="form-control form-control-color form-control-sm" id="picker" style="max-width: 30px;"
value="#9d33e7" />
<input class="form-control form-control-sm" type="text" value="#9d33e7" id="picker-code" disabled readonly>
</div>
</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-sm-9">
Expand Down Expand Up @@ -210,15 +220,23 @@ <h2 class="text-body-emphasis pt-5 mt-4">Esempi di Component</h2>

<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)
$("#custom").on("change", function () {
var primaryColor = $("#primary-color").val();
$('#primary-color-code').val(primaryColor);
var primaryColorHex = [
parseInt(primaryColor.substr(-6, 2), 16),
parseInt(primaryColor.substr(-4, 2), 16),
parseInt(primaryColor.substr(-2), 16)
];
var secondaryColor = $("#secondary-color").val();
var secondaryColorHex = [
parseInt(secondaryColor.substr(-6, 2), 16),
parseInt(secondaryColor.substr(-4, 2), 16),
parseInt(secondaryColor.substr(-2), 16)
];
$("#picker-style").html("<style> :root { --bs-primary: " + color + "; --bs-primary-rgb: " + hex + "; } </style>");
$('#picker-code').val(color);
var fontSize = $("#font-size").val();
var borderRadius = $("#border-radius").val();
$("#custom-style").html("<style> :root { --bs-primary: " + primaryColor + "; --bs-primary-rgb: " + primaryColorHex + "; --bs-secondary: " + secondaryColor + "; --bs-secondary-rgb: " + secondaryColorHex + "; --bs-body-font-size: " + fontSize + ";--bs-border-radius: " + borderRadius + "; } </style>");
});

$("#inc-nav").load("inc/nav.html");
Expand Down
12 changes: 6 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
/* --- Set your primary and secondary color --- */
--bs-primary: #9d33e7;
--bs-primary-rgb: 157, 51, 231;
--bs-secondary: #91abc1;
--bs-secondary-rgb: 145, 171, 193;
--bs-secondary: #5592eb;
--bs-secondary-rgb: 85, 146, 235;
/* --- Set your border-radius --- */
--bs-border-radius: 0.25rem;
}
Expand Down Expand Up @@ -3429,7 +3429,7 @@ textarea.form-control.is-invalid {
--bs-btn-padding-x: 0.8rem;
--bs-btn-padding-y: 0.3rem;
--bs-btn-font-family: var(--bs-body-font-family);
--bs-btn-font-size: 0.875rem;
--bs-btn-font-size: var(--bs-body-font-size);
--bs-btn-font-weight: 500;
--bs-btn-line-height: 1.25rem;
--bs-btn-color: var(--bs-body-color);
Expand Down Expand Up @@ -3917,7 +3917,7 @@ fieldset:disabled .btn {
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: var(--bs-body-bg);
--bs-dropdown-border-color: var(--bs-border-color-translucent);
--bs-dropdown-border-radius: var(--bs-border-radius);
--bs-dropdown-border-radius: 0.25rem;
--bs-dropdown-border-width: var(--bs-border-width);
--bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
--bs-dropdown-divider-bg: var(--bs-border-color-translucent);
Expand Down Expand Up @@ -4375,7 +4375,7 @@ fieldset:disabled .btn {
color: var(--bs-nav-link-color);
text-decoration: none;
border-color: rgba(var(--bs-primary-rgb), 0.1);
border-radius: var(--bs-border-radius);
border-radius: 0.25rem;
border: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
Expand Down Expand Up @@ -4407,7 +4407,7 @@ fieldset:disabled .btn {
.nav-tabs {
--bs-nav-tabs-border-width: var(--bs-border-width);
--bs-nav-tabs-border-color: var(--bs-border-color);
--bs-nav-tabs-border-radius: var(--bs-border-radius);
--bs-nav-tabs-border-radius: 0.25rem;
--bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
--bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
--bs-nav-tabs-link-active-bg: var(--bs-body-bg);
Expand Down

0 comments on commit dddd71e

Please sign in to comment.