-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
66006cf
commit 4b09e5f
Showing
3 changed files
with
139 additions
and
103 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,11 +45,27 @@ | |
|
|
||
| <div class="position-absolute top-0 start-50 translate-middle-x p-4"> | ||
| <div class="btn-group"> | ||
| <a href="/index.html" class="btn btn-outline-light">🇮🇹 ITA</a> | ||
| <a href="javascript:void(0)" class="btn btn-outline-light active" aria-current="page">🇬🇧 ENG</a> | ||
| <a href="/index.html" class="d-flex align-items-center btn btn-outline-light p-2 px-3"> | ||
| <svg class="me-2" height="16" xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480"> | ||
| <path fill="#012169" d="M0 0h640v480H0z" /> | ||
| <path fill="#FFF" | ||
| d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z" /> | ||
| <path fill="#C8102E" | ||
| d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z" /> | ||
| <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z" /> | ||
| <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z" /> | ||
| </svg> ENG</a> | ||
| <a href="javascript:void(0)" class="d-flex align-items-center btn btn-outline-light p-2 px-3 active" aria-current="page"> | ||
| <svg class="me-2" height="16" xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480"> | ||
| <g fill-rule="evenodd" stroke-width="1pt"> | ||
| <path fill="#fff" d="M0 0h640v480H0z" /> | ||
| <path fill="#009246" d="M0 0h213.3v480H0z" /> | ||
| <path fill="#ce2b37" d="M426.7 0H640v480H426.7z" /> | ||
| </g> | ||
| </svg> ITA</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="container p-4"> | ||
| <div class="row flex-row align-items-center justify-content-center g-5 py-5 min-vh-100"> | ||
| <div class="col-lg-7 text-white py-5"> | ||
|
|
@@ -69,12 +85,12 @@ <h4 class="mb-3 text-secondary">Genera il tuo file CSS personalizzato.</h4> | |
| src="data:image/jpeg;base64,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" | ||
| alt="Marco Gargano"> | ||
| </a> | ||
| <h5 class="mb-4">« My name is Marco, and I also use Bootstrap... »</h5> | ||
| <h6>I'm passionate about front-end, and I've been using Bootstrap for many years.</h6> | ||
| <h6>...but something was missing, so I added my own approach.</h6> | ||
| <h5 class="mb-4">« Mi chiamo Marco e anche io uso Bootstrap... »</h5> | ||
| <h6>Sono appassionato di front-end e utilizzo Bootstrap da tanti anni.</h6> | ||
| <h6>...ma mancava qualcosa e ho aggiunto il mio approccio.</h6> | ||
| <p><a class="btn-link text-white" href="https://www.marcogargano.com/?f=simplify-bootstrap" | ||
| target="_blank">Visit my website</a> or</p> | ||
| <p class="mt-3"><a class="btn btn-sm btn-outline-light" href="#skip">Learn more</a></p> | ||
| target="_blank">Visita il mio sito</a> oppure</p> | ||
| <p class="mt-3"><a class="btn btn-sm btn-outline-light" href="#skip">Scopri di più</a></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -85,14 +101,14 @@ <h6>...but something was missing, so I added my own approach.</h6> | |
| <button class="navbar-toggler d-md-none" type="button" data-bs-toggle="collapse" | ||
| data-bs-target="#customToggle" aria-controls="customToggle" aria-expanded="false" | ||
| aria-label="Toggle navigation"> | ||
| <strong class="h5"><span class="me-2">三</span> Real-time preview</strong> | ||
| <strong class="h5"><span class="me-2">三</span> Prova in tempo reale</strong> | ||
| </button> | ||
| <div class="collapse d-md-block" id="customToggle"> | ||
| <hr class="d-sm-block d-md-none my-4"> | ||
| <form id="custom" class="" method="post" action=""> | ||
| <div class="row d-flex"> | ||
| <div class="col-auto d-none d-sm-block"> | ||
| <p class="mb-1 fw-bold text-primary"><small>Try</small></p> | ||
| <p class="mb-1 fw-bold text-primary"><small>Prova</small></p> | ||
| <h5 class="text-secondary"> 👉</h5> | ||
| </div> | ||
| <div class="col-sm-auto col-6"> | ||
|
|
@@ -168,8 +184,8 @@ <h5 class="text-secondary"> 👉</h5> | |
| </div> | ||
| <div class="col"> | ||
| <div class="float-end"> | ||
| <p class="mb-1 fw-bold text-secondary"><small>Click & use</small></p> | ||
| <a href="#download" id="download-btn" class="btn btn-primary text-nowrap">Download .css</a> | ||
| <p class="mb-1 fw-bold text-secondary"><small>Click & usa</small></p> | ||
| <a href="#download" id="download-btn" class="btn btn-primary text-nowrap">Scarica .css</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -194,34 +210,37 @@ <h5 class="text-secondary"> 👉</h5> | |
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-3 offset-lg-1"> | ||
| <h4 class="mt-5">☝️ Why another fork of Bootstrap??</h4> | ||
| <p>I believe that <a class="btn-link" href="https://getbootstrap.com/" title="Bootstrap" | ||
| target="_blank">Bootstrap</a> is a <strong>comprehensive CSS framework</strong>, ready to use out of the | ||
| box. It's used in various | ||
| ways, sometimes compiled and often through a CDN. Basic CSS rules (like fonts and colors) are sometimes | ||
| overwritten via a new CSS file | ||
| <h4 class="mt-5">☝️ Perché un'altra fork di Bootstrap??</h4> | ||
| <p>Ritengo che <a class="btn-link" href="https://getbootstrap.com/" title="Bootstrap" | ||
| target="_blank">Bootstrap</a> 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> | ||
|
|
||
| <p>According to recent developments in <strong>CSS compatibility</strong>, it's possible to use Bootstrap | ||
| without having to compile the code, while still retaining the ability to easily customize certain | ||
| parameters.</p> | ||
| <p class="mb-5"><strong>The native CSS variables have also revolutionized my approach.</strong></p> | ||
| <p>Secondo i recenti sviluppi che hanno interessato la <strong>compatibilità CSS</strong>, è possibile | ||
| utilizzare Bootstrap senza dover compilare il codice; pur mantenendo la possibilità di personalizzare | ||
| facilmente alcuni parametri.</p> | ||
| <p class="mb-5"><strong>Le varibili native CSS | ||
| hanno rivoluzionato anche il mio approccio.</strong></p> | ||
|
|
||
| <hr class="border-primary border-2 opacity-100 col-4 my-5"> | ||
|
|
||
| <h4 class="mt-5">👌 Simplify and customize</h4> | ||
| <p>The code used for this project is taken from <a href="https://getbootstrap.com/" | ||
| target="_blank">Bootstrap</a>, version <a | ||
| href="https://getbootstrap.com/docs/5.3/getting-started/introduction/" target="_blank">v. 5.3</a>, with | ||
| the addition of a modern approach</p> | ||
| <p>So, all the classes of the framework can be used; for all information regarding the usage of the components, refer to the <a href="https://getbootstrap.com/" | ||
| target="_blank">Bootstrap website</a>.</p> | ||
| <h4 class="mt-5">👌 Semplifica e personalizza</h4> | ||
| <p>Il codice utilizzato per questo progetto è preso da <a href="https://getbootstrap.com/" | ||
| target="_blank">Bootstrap</a>, versione <a | ||
| href="https://getbootstrap.com/docs/5.3/getting-started/introduction/" target="_blank">v. 5.3</a> | ||
| con l'aggiunta di un <strong>approccio moderno</strong>. </p> | ||
| <p>Quindi possono essere utilizzate tutte le classi del framework; | ||
| per tutte le informazioni riguardanti l'utilizzo dei componenti fare riferimento al sito di <a | ||
| class="btn-link" href="https://getbootstrap.com/" title="Bootstrap" target="_blank">Bootstrap</a>.</p> | ||
|
|
||
| <div class="bg-primary rounded p-4 my-4 text-white fs-4"> | ||
| <p>🤍 This site is built using only Bootstrap classes.</p> | ||
| <p>🤍 Questo sito è realizzato con le sole classi di Bootstrap.</p> | ||
| </div> | ||
|
|
||
| <p>For any feedback, open an issue on <a href="https://github.com/GetApp-it/simplify-bootstrap/issues/new" target="_blank">Github</a>. To suggest new ideas, use the label POP</p> | ||
| <p>Per ogni segnalazione, apri una issue su <a | ||
| href="https://github.com/GetApp-it/simplify-bootstrap/issues/new" target="_blank">Github</a>. <br> | ||
| Per proporre nuove idee, usa la label POP.</p> | ||
|
|
||
| <h6 class="mt-4 mb-2">Collaborator</h6> | ||
| <a class="" href="https://github.com/stefanovalentegva" target="_blank"><img | ||
|
|
@@ -236,16 +255,19 @@ <h6 class="mt-4 mb-2">Link</h6> | |
|
|
||
| </div> | ||
| <div class="col-lg-5 offset-lg-2"> | ||
| <h4 class="mt-5">🖖 My approach!</h4> | ||
| <p class="mb-2">Using some simple native CSS variables, it's possible to quickly customize Bootstrap.</p> | ||
| <h4 class="mt-5">🖖 Il mio approccio!</h4> | ||
| <p class="mb-2">Utilizzando alcune e semplici varibili native CSS è possibile personalizzare velocemente | ||
| Bootstrap. </p> | ||
| <ul class="lh-lg"> | ||
| <li><strong>No compilation required</strong></li> | ||
| <li><strong>Native CSS variables</strong></li> | ||
| <li><strong>BS convention</strong></li> | ||
| <li><strong>Non richiede compilazione</strong></li> | ||
| <li><strong>Variabili CSS native</strong></li> | ||
| <li><strong>BS Naming convention</strong></li> | ||
| </ul> | ||
|
|
||
| <h5 class="mt-5">Simple and sustainable</h5> | ||
| <p class="mb-3">Everything you need to set up for quick customization is readily available within the CSS file. <strong>Few and clear variables tailored for various uses</strong>. No need for compilation and ready for preview.</p> | ||
| <h5 class="mt-5">Semplice e sostenibile</h5> | ||
| <p class="mb-3">Tutto ciò che ti servirà impostare per un rapida personalizzazione lo trovi subito all'interno | ||
| del file CSS. <strong>Poche e chiare variabili declinate | ||
| per diversi utilizzi</strong>. Senza dover compilare nulla e pronto all'anteprima. </p> | ||
|
|
||
| <p class="mb-5"> | ||
| <span class="badge rounded-pill text-bg-primary m-1">Primary color</span> | ||
|
|
@@ -277,10 +299,11 @@ <h5 class="mt-5">Simple and sustainable</h5> | |
| --bs-border-radius: 0.25rem; | ||
| }</code></pre> | ||
|
|
||
| <p class="mb-2">Easy to maintain or modify later, simply by editing the native variables at the top of the CSS file.</p> | ||
| <p class="mb-2">Facile da mantenere o modificare in seguito, semplicemnte modificando le variabili native | ||
| presenti in cima al file CSS.</p> | ||
|
|
||
| <h5 class="mt-5">How to use it</h5> | ||
| <p class="mb-2">Download and insert the following CSS file into the head of your project.</p> | ||
| <h5 class="mt-5">Come usarlo</h5> | ||
| <p class="mb-2">Scarica e inserisci nella head del tuo progetto il file CSS di seguito.</p> | ||
| <p class="mb-2"> | ||
| <pre | ||
| class="bg-secondary bg-opacity-10 text-black p-3 rounded-5"><code><textarea class="w-100 bg-transparent border-0 p-0 m-0" style="resize: none; outline: none;" rows="1"><link rel="stylesheet" href="style.css" /></textarea></code></pre> | ||
|
|
@@ -293,9 +316,9 @@ <h5 class="mt-5">How to use it</h5> | |
| <small>Basato su <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/" | ||
| title="Bootstrap v. 5.3" target="_blank">Bootstrap v. 5.3</a></small> | ||
| </div> | ||
| <a href="style.css" download="" class="btn btn-outline-primary">Download the starter CSS file</a> | ||
| <a href="style.css" download="" class="btn btn-outline-primary">Scarica il file CSS di partenza</a> | ||
| </div> | ||
| <p class="mb-2">Include the Bootstrap JS file for JavaScript functionalities (accordion, modal, etc.).</p> | ||
| <p class="mb-2">Includi il file JS di Bootstrap per le funzionalità javascript (accordion, modal...).</p> | ||
| <div class="mb-5"> | ||
| <pre | ||
| class="bg-secondary bg-opacity-10 text-black p-3 rounded-5"><code><textarea class="w-100 bg-transparent border-0 p-0 m-0 text-nowrap" style="resize: none; outline: none;" rows="1"><script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script></textarea></code></pre> | ||
|
|
@@ -360,8 +383,8 @@ <h5 class="mb-3"><a class="btn btn-light btn-sm align-bottom" href="#">↑</a> E | |
| <div class="col-lg-5 offset-lg-2"> | ||
| <hr class="col-1 my-5 py-5 opacity-0" /> | ||
|
|
||
| <h2>Examples of Components</h2> | ||
| <p>Below you can find some examples of Bootstrap components with the new style.</p> | ||
| <h2>Esempi di Component</h2> | ||
| <p>Di seguto puoi trovare alcuni esempi dei componenti Bootstrap con il nuovo stile.</p> | ||
|
|
||
| <div id="inc-typo"></div> | ||
| <div id="inc-button"></div> | ||
|
|
||
Oops, something went wrong.