Bulma Το Bulma είναι ένα σύγχρονο CSS framework ανοιχτού κώδικα που βασίζεται πλήρως στο Flexbox.
Responsive Breakpoints
768px 1024px 1216px 1408px
<---------^------------^------------------^-------------^------------->
Mobile Tablet Desktop Widescreen FullHD
- Κινητά: έως 768px
- Tablet: από 769px
- Επιφάνεια εργασίας: από 1024px
- Ευρεία οθόνη: από 1216px
- FullHD: από 1408px
Σύστημα πλέγματος στηλών (Columns Grid)
Περικλείστε τα στοιχεία .column μέσα σε ένα flex container με κλάση .columns:
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
Τροποποιητές πλάτους στηλών
<div class="column is-half">Μισό πλάτος</div>
<div class="column is-one-third">1/3 πλάτους</div>
<div class="column is-three-quarters">3/4 πλάτους</div>
<div class="column is-4">4 / 12 (1/3)</div>
Βασικοί τροποποιητές
Χρώματα
.is-primary: Τυρκουάζ.is-link: Μπλε.is-info: Κυανό.is-success: Πράσινο.is-warning: Κίτρινο.is-danger: Κόκκινο
Μεγέθη
.is-small.is-normal.is-medium.is-large
Καταστάσεις
.is-outlined: Διαφανές φόντο με έγχρωμο περίγραμμα.is-loading: Ενσωματωμένη κινούμενη ένδειξη φόρτωσης.is-disabled: Οπτικά ανενεργό
Βοηθήματα τυπογραφίας
Μεγέθη γραμματοσειράς
| Κλάση | Υπολογισμένο μέγεθος |
|---|---|
.is-size-1 |
3rem |
.is-size-2 |
2.5rem |
.is-size-3 |
2rem |
.is-size-4 |
1.5rem |
.is-size-5 |
1.25rem |
.is-size-6 |
1rem |
.is-size-7 |
0.75rem |
Στοίχιση & μετασχηματισμός κειμένου
.has-text-centered: Στοίχιση στο κέντρο.has-text-left: Στοίχιση αριστερά.has-text-right: Στοίχιση δεξιά.has-text-justified: Πλήρης στοίχιση.is-capitalized: Κεφαλαίο το πρώτο γράμμα κάθε λέξης.is-lowercase: Όλα πεζά.is-uppercase: Όλα κεφαλαία
Περιτύλιγμα περιεχομένου WYSIWYG
Χρησιμοποιήστε το .content για μορφοποίηση απλού markdown ή περιεχομένου CMS:
<div class="content">
<h1>Κύριος τίτλος</h1>
<p>Τυπική παράγραφος με τυπογραφική κλιμάκωση.</p>
<ul>
<li>Στοιχείο λίστας 1</li>
<li>Στοιχείο λίστας 2</li>
</ul>
</div>