Foundation 6 er næsten klar til at afslutte beta, og det er bedre end dets forgængere på næsten alle tænkelige måder: det er mere strømlinet, det er enklere, og alligevel mere sofistikeret. Zurb har overgået sig selv.
Som du vil se for dig selv, når du endelig får det installeret - simpelt nok på OSX eller Linux, men i Windows kan Node være finicky - Foundation 6 kan kun installeres via pakkeleder i disse dage. Jeg har lyst til, at jeg bliver gammel og drømmer om de gode gamle dage, da CSS-rammer kom i .zip-filer og ikke fra en terminalkommando.
Alligevel lykkede jeg ikke, da jeg sagde, at Foundation 6 er fantastisk. Nå skal jeg sige "Foundation for Sites", fordi Foundation ikke kun er en ramme mere. Udover Foundation for Apps har Zurb også været travlt med at lave et par værktøjer til at fremskynde udviklingen.
Denne udgivelse har handlet om ydeevne ... du kan opbygge websteder hurtigere, disse websteder downloades hurtigere, og JavaScript kører hurtigere.
For det første er der Foundation CLI , som kan installere enhver version af Foundation til dig, komplet med startprojekter. Den forhåndskompilerede CSS i Foundation for Sites vil være tilgængelig for at downloade separat ved den endelige udgivelse. For nu er CLI imidlertid den måde at få det på, og holde sig ajour med eventuelle ændringer før den endelige udgivelse.
Så er der panini , en statisk side-kompilator med Templering af håndtag og flere andre funktioner, der hjælper dig med at opbygge statiske prototyper og / eller websteder hurtigt. Den kompilerer Sass, sætter alle JavaScript i en fil, den kan komprimere al din kode og meget mere.
Nu får du ikke den idé, at denne version af Foundation er noget mindre funktionfyldt - det har stadig alt hvad du behøver og mere - men det skal bemærkes, at nogle elementer, der var bedre egnet til apps end websteder, er blevet fjernet. Disse elementer er nu en del af Foundation for Apps .
Resten af arbejdet i denne version drejede sig om at slippe af med overflødig kode og strømline alt, hvad der var tilbage.
For eksempel, i stedet for at oprette tre forskellige menukomponenter til tre forskellige menustrukturer, er der kun en menukomponent med flere variationer. For den person, der skriver HTML, er der ringe forskel: Tilføj en klasse, og du har en menu; skift et par klasser, og du har en menu, der ser helt anderledes ut.
Faktisk vil mange af klasserne og markeringen for alle forskellene se meget velkendte ud, om ikke det samme. Det er alle bygget på Sass, så du kan tilpasse det som altid.
Denne udgivelse har handlet om ydeevne. Når du har lært, hvordan du kan opbygge websteder hurtigere, vil disse websteder hente hurtigere, og JavaScript kører hurtigere. Foundation i nu omkring halvt så tungt som det var med hensyn til filstørrelse. Halvdelen .
Ældre versioner understøttede RTL (højre til venstre) sprog som arabisk i et omfang; men de havde brug for nogle tweaking. Stiftelsen 6 har støtte bygget rigtigt ind.
Flex-nettet er præcis det du synes er det: det er Grid-komponenten, der er færdiggjort med Flexbox. På den ene side giver dette det en række funktioner og muligheder, som et almindeligt floatbaseret net ikke kan håndtere. På den anden side er det nok ikke så godt støttet, især af IE. Det er en afvejning.
Et par af kølige forbedringer blev inkluderet for websteds typografi. Specifikt er der hjælperklasser designet til at gøre typografiske layouter bare lidt lettere at håndtere:
Som nævnt ovenfor blev alle tidligere navigations komponenter fusioneret til en stor fleksibel komponent. Det betyder, at alle navigationstyper vil spille pænt med hinanden. Det betyder også, at du kan vælge forskellige former for navigation til forskellige skærmstørrelser.
Ønsker du at downloade navigation på en smart telefon og en vandret stang på et skrivebord? Nemt gjort med de skærmstørrelsesspecifikke klasser. Vil du have din "Top bar" tilbage? Tilføj kun en wrapper div omkring standardmenukomponenterne.
Men selv om det er enklere at bruge generelt, er det stadig fyldt med funktioner. Sørg for at tjekke dokumentationen om menuer og navigation .
Du kender de små cirkler eller kvadrater - normalt placeret på eller nær ikoner af en slags - med små tal i dem? Ligesom når du har Facebook-underretninger? Disse kaldes badges.
Du lærer noget nyt hver dag. Stiftelsen har også dem nu.
Har du brug for at lave noget på skærmen, mens brugeren ruller? Vil du stoppe det på et bestemt tidspunkt? Sticky er dit plugin! Dette er også den ting, du skal bruge, hvis du vil gøre Magellan-menuen til at fungere som i Foundation 5.
I tilfælde af at dropdowns, accordeoner, drilldowns, værktøjstips og modaler ikke er nok for dig, er det en generisk måde at få ting til at virke eller forsvinde. Det er en simpel JavaScript-baseret skiftehændelse, der kan anvendes til stort set noget.
Jeg forestiller mig det er for de tidspunkter, hvor ingen af de andre komponenter passer til formålet eller ville være overkill. Det integrerer Motion UI-biblioteket, så du kan animere den forsvindende handling næsten hver eneste måde du kan lide.
Nå lyder navnet som det er et element, hvor du kan indlejre en video eller Flash-objekt (yuck), og det kan du godt nok gætte. Hvad det egentlig er meningen med, er at vise et hvilket som helst medieobjekt, som et billede sammen med tekstinformation.
For eksempel kan du sætte en brugers avatar ud for deres brugernavn og deres kommentar i en kommentar sektion. Eller du kan bruge den til at placere en filmens udgivelsesdato, hovedaktører og andre metadata ved siden af en gennemgang af filmen. Se dokumentationen til eksempler.
Hver funktion er blevet opdateret eller omskrevet. Men mange er funktionelt uændrede. Dobbeltkryd dokumentationen for at sikre dig, at du har de rigtige klasser, tjek nogle af opgraderingerne og gå. Her er disse mere eller mindre de samme funktioner i alfabetisk rækkefølge:
Jep. Det fornyede fokus på byggepladser (i modsætning til en ramme, der forsøger at imødekomme behovene hos både websteder og apps) er forfriskende, og reduceret størrelse er altid et plus.
Ser frem til at det går meget snart.