1. Puoi usarlo al top solamente se conosci il linguaggio CSS, se sei un cuggino lascia perdere, non l'ho pensato per te.
2. Se usi abitualmente CSS pre compilati sappi che il principio è esattamente lo stesso, non abbiamo scoperto l'acqua calda.
3. Quello che Raven ti propone è un metodo che vuole essere il più semplice possibile, le tue competenze fanno la differenza.
4. La pagina home, i fogli di stile e i file js sono già collegati e pronti all'uso.
5. Ricordati di inserire la libreria aggiornata jQuery via file o CDN altrimenti il Nav button non funzionerà mai.
6. Raven utilizza classi WordPress quindi puoi usarlo per creare temi custom.
7. Devi leggere con attenzione il contenuto di questa pagina prima di iniziare.
Tutto chiaro? Allora sei pronto a cominciare, buon divertimento e #goinpussy!!
Raven utilizza diverse classi predefinite per le operazioni di routine.
In questo primo blocco puoi vedere contenitori, float, spaziature, ombre, arrotondamenti e transizioni.
width: 1170px;
width: 96%;
width: 100%;
padding: 20px 0;
padding: 20px;
padding: 70px 0;
padding: 0;
margin: 0;
margin-bottom: 30px;
margin-bottom: 60px;
margin-bottom: 90px;
margin-top: 30px;
margin-top: 60px;
margin-top: 90px;
margin-bottom: 120px;
margin-top: 120px;
float: left;
float: right;
float: none;
Fluent Design
Material Design
Only Text
border-radius: 3px;
0.3s
Raven utilizza di base 4 breakpoints che puoi vedere nello style custom ma naturalmente puoi aggiungerne altri se ritieni ti siano necessari.
Il breakpoints da 1200px vale solo fino ai 1024px (min-width max-width) mentre per tutti gli altri le regole valgono da 1024px in giù.
1200px;
1024px;
768px;
320px;
Raven utilizza la classica griglia da 12 di quasi tutti i framework. Tutti gli elementi rimarranno in colonna fino al breakpoints da 768px
Per staccare a 1200px aggiungi la classe .col-lg, per staccare a 1024px aggiungi la classe .col-md
Se nel tablet vuoi che le colonne da 4 diventino da 2 aggiungi la classe .col-sm
border-box
8.33333%
16.66666%
25%
33.33333%
50%
66.66666%
83.33333%
100% (1200px)
100% (1024px)
50% (1024px)
Raven ha 6 colori predefiniti che puoi richiamare con la classe apposita.
Attenzione!! Quelli con prefisso bg- sono colori di background, quelli senza di testo.
#3399FF
#45DE27
#F70100
#EFEFEF
#FFFFFF
#222222
#3399FF
#45DE27
#F70100
#EFEFEF
#FFFFFF
#222222
Raven ha una preformattazione di tutti i marcatori di testo (fatta esclusione per quelli in linea come span o strong) più una serie di display sul modello di Bootstrap.
In questo blocco inoltre puoi vedere le classi utili per applicare le formattazioni standard al testo.
Anche i link hanno una preformattazione che puoi modificare dal tuo CSS custom.
36px
32px
28px
24px
20px
16px
14px
14px
96px
88px
72px
56px
700
400
300
cursive
uppercase
lowercase
capitalize
text-align: left;
text-align: center;
text-align: right;
#3399FF
#222222
Raven gestisce le immagini responsive applicando una classe ad hoc.
Puoi assegnare questa classe sia ai div (o ai marcatori semantici) che contengono le immagini oppure singolarmente direttamente al marcatore img.
All img elements
img class
Raven ti permette di modificare il display di default di tutti i marcatori semplicemente applicando una classe.
Per la gestione del display table ti rimando al modulo specifico che trovi scrollando la pagina.
display: block;
display: inline;
display: inline-block;
display: none;
display: none; (1200)
display: block; (1200)
display: none; (1024)
display: block; (1024)
display: none; (768)
display: block; (768)
display: none; (320)
display: block; (320)
Raven ha 2 opzioni per il burger button: bianco o nero. Non cambiare il nome del pulsante o non funzionerà lo script di apertura.
Per creare il pulsante mobile bianco inserisci un div.navbar + 3 span.icon-bar mentre per creare il pulsante mobile nero inserisci un div.navbar.dark + 3 span.icon-bar
Di default entrambi i pulsanti sono in display none e compaiono a 768px
Raven ha un menù di navigazione responsive pre formattato. Per crearlo utilizza una ul (lista non ordinata) con classe nav
Per evidenziare la pagina in cui ti trovi assegna alla voce della lista corrispondente la classe current-menu-item
Il menù di navigazione è visibile solo al di sopra dei 768px dopodiché potrai aprirlo cliccando il burger button.
#222222
#3399FF
Raven può gestire fino a 2 menù a comparsa full responsive.
Per creare il primo utilizza una ul con classe nav-dropdown mentre per il secondo una ul con classe nav-dropdown dropdown-menu
position: absolute;
position: absolute;
Raven propone una hero section di default impostata a 100vh ideale per le homepage fullsize.
Per le pagine interne (o se semplicemente vuoi la hero section in pixel) aggiungi la classe .page-section
Sostituisci l'immagine di background di esempio nella sezione apposita nel file raven.css con la tua.
height: 100vh;
height: 400px;
Raven propone 3 pulsanti di default: default-button, inverse e dark-button.
I primi 2 lavorano sulle pseudoclassi link e visited e presentano lo stesso hover mentre il terzo propone un hover differente rispetto al default-button.
Puoi applicare queste classi anche ai pulsanti (input e button) dei tuoi form.
Raven ti permette di creare delle card da sfruttare dentro le colonne per gestire lo spazio.
Le immagini che inserisci dentro le card sono full responsive di default.
Dentro la card crea un div text per gestire gli spazi laterali del testo.
margin: 0 20px;
padding: 20px;
Raven sa benissimo che le tabelle sono deprecate ma se le vuoi usare lo stesso le supporta e sono completamente responsive.
Crea un div class table e inserisci la tua tabella con tr, th e td. Le celle avranno un colore alternato per migliorare l'accessibilità.
| List item | List item | List item | List item | List item | List item |
|---|---|---|---|---|---|
| List item | List item | List item | List item | List item | List item |
| List item | List item | List item | List item | List item | List item |
| List item | List item | List item | List item | List item | List item |
| List item | List item | List item | List item | List item | List item |
Raven ti permette di creare delle section con effetto fixed background (si, Raven lo sa che il parallax è un'altra cosa).
Tutto quello che devi fare è inserire un div class parallax e ricordarti di modificare il nome dell'immagine nell'apposita sezione del file raven.css.
attachment: fixed;
attachment: scroll;
Raven ti permette di gestire delle grandi sezioni al 50% con la modalità table display.
Per farlo crea un div class d-table, al suo interno crea 2 div class column.
Alla prima column aggiungi la classe bg-column mentre nella seconda inserisci un div class text e tutto il testo che ti serve.
Non dimenticare di sostituire il nome dell'immagine di default nella sezione apposita del file raven.css
Per avere invece il testo allineato verticalmente inserisci un div class inner dentro un div class d-table-text
display: table;
vertical-align: middle;
width: 50%;
padding: 10%;
Raven è felice che tu utilizzi i form perchè sa benissimo che sono alla base del web dinamico.
Quando crei un form utilizza il div class form per contenere tutto il modulo e il div class form-content per separare i vari input.
Ricordati che le label sono in display: inline-block cosi che tu possa gestirle meglio
A Raven non piacciono i pulsanti di default quindi ricorda di aggiungere ai submit, button e reset (che siano input o button) le classi per i button che abbiamo visto sopra.
padding: 30px 0;
padding: 10px 0;
inline-block
type=text
type=email
type=password
type=tel
type=url
type=search
type=number
type=file
select
textarea
type=submit
type=button
type=reset
type=submit
type=button
type=reset
Raven ti permette di caricare i tuoi video in maniera ottimale a prescindere dalla risoluzione del monitor o del dispositivo.
Per farlo inserisci iframe, embed, object, video o un div .embed-responsive-item dentro un div .embed-responsive
relative
absolute
absolute
absolute
absolute
absolute