This.. is... Bōōtstrāp!
Ora semplice ed elegante
Personalizza Bootstrap
con un approccio moderno.
Genera il tuo file CSS personalizzato.
Variabili CSS No compilazione Classi Bootstrap
« Mi chiamo Marco e anche io uso Bootstrap... »
Sono appassionato di front-end e utilizzo Bootstrap da tanti anni.
...ma mancava qualcosa e ho aggiunto il mio approccio.
Visita il mio sito oppure
☝️ Perché un'altra fork di Bootstrap??
Ritengo che Bootstrap sia un framework CSS completo e sopratutto pronto all'uso. 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.
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.
Le varibili native CSS hanno rivoluzionato anche il mio approccio.
👌 Semplifica e personalizza
Il codice utilizzato per questo progetto è preso da Bootstrap, versione v. 5.3 con l'aggiunta di un approccio moderno.
Quindi possono essere utilizzate tutte le classi del framework; per tutte le informazioni riguardanti l'utilizzo dei componenti fare riferimento al sito di Bootstrap.
🤍 Questo sito è realizzato con le sole classi di Bootstrap.
Per ogni segnalazione, apri una issue su Github.
Per proporre nuove idee, usa la label POP.
Collaborator
Stefano Valente
Link
Github repository Support dev🖖 Il mio approccio!
Utilizzando alcune e semplici varibili native CSS è possibile personalizzare velocemente Bootstrap.
- Non richiede compilazione
- Variabili CSS native
- BS Naming convention
Semplice e sostenibile
Tutto ciò che ti servirà impostare per un rapida personalizzazione lo trovi subito all'interno del file CSS. Poche e chiare variabili declinate per diversi utilizzi. Senza dover compilare nulla e pronto all'anteprima.
Primary color Secondary color Font color Link color Font family Font size Border radius
@import url("font/font.css");
:root {
/* --- Set your font family --- */
--bs-font-sans-serif: "Georama", Arial, sans-serif;
--bs-body-font-size: 0.875rem;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-btn-color: var(--bs-white);
--bs-btn-color-rgb: var(--bs-white-rgb);
/* --- Set your primary and secondary color --- */
--bs-primary: #ff0095;
--bs-primary-rgb: 255, 0, 149;
--bs-secondary: #103875;
--bs-secondary-rgb: 16, 56, 117;
/* --- Set your border-radius --- */
--bs-border-radius: 0.25rem;
}Facile da mantenere o modificare in seguito, semplicemnte modificando le variabili native presenti in cima al file CSS.
Come usarlo
Scarica e inserisci nella head del tuo progetto il file CSS di seguito.
Includi il file JS di Bootstrap per le funzionalità javascript (accordion, modal...).