Foundation (ramverk)

ZURB Foundation
Utvecklare	ZURB
Initial release	september 2011 ; 11 år sedan
Stabil frisättning	6.7.5 / 12 juli 2022 ; för 7 månader sedan
Förvar	Foundation Repository
Skrivet i	HTML , CSS , Sass och JavaScript
Typ	webbutveckling
Licens	MIT-licens
Hemsida	få .grund

Foundation är ett gratis och öppen källkodsresponsivt front -end- ramverk, som tillhandahåller ett responsivt rutnät och HTML- och CSS -gränssnittskomponenter , mallar och kodavsnitt, inklusive typografi, formulär, knappar, navigering och andra gränssnittselement, såväl som valfri funktionalitet. av JavaScript -tillägg. Foundation är ett med öppen källkod och underhålls tidigare av ZURB. Sedan 2019 har Foundation underhållits av volontärer.

Ursprung

Foundation uppstod som ett ZURB-projekt för att utveckla front-end-kod snabbare och bättre. I oktober 2011 släppte ZURB Foundation 2.0 som öppen källkod under MIT-licensen . ZURB släppte Foundation 3.0 i juni 2012, 4.0 i februari 2013, 5.0 i november 2013 och 6.0 i november 2015. Teamet började arbeta med nästa version av Foundation for Sites 7 som med största sannolikhet kommer att ta bort stödet för äldre webbläsare och implementera nyare teknologier som flexbox eller kanske uträknat rutsystem.

Foundation for Emails, tidigare känt som ZURB Ink, släpptes i september 2013.

Foundation for Apps släpptes i december 2014.

Funktioner

Foundation designades för och testades på många webbläsare och enheter. Det är ett lyhört ramverk byggt med Sass/SCSS . Ramverket innehåller de vanligaste mönstren som behövs för att prototypa en responsiv webbplats. Genom att använda Sass mixins är Foundation-komponenterna lätta att styla och enkla att förlänga. ^{[ påfågelprosa ]}

Sedan version 2.0 stöder den också responsiv design . Detta innebär att webbsidornas grafiska design justeras dynamiskt, med hänsyn till egenskaperna hos den använda enheten (PC, surfplatta, mobiltelefon). Sedan 4.0 har det dessutom tagit en mobil-först-strategi, design och utveckling för mobila enheter först, och förbättrar webbsidor och applikationer för större skärmar.

Foundation är öppen källkod och tillgänglig på GitHub . Utvecklare uppmuntras att delta i projektet och ge sina egna bidrag till plattformen.

Struktur och funktion

Foundation är modulär och består huvudsakligen av en serie Sass-stilmallar som implementerar de olika komponenterna i verktygslådan. Komponentstilmallar kan inkluderas via Sass eller genom att anpassa den första Foundation-nedladdningen. Utvecklare kan anpassa själva Foundation-filen och välja de komponenter de vill använda i sitt projekt.

Justeringar är möjliga genom en central konfigurationsstilmall. Mer djupgående förändringar är möjliga genom att ändra Sass-variablerna.

Användningen av Sass stilmallsspråk tillåter användning av variabler, funktioner och operatorer, kapslade väljare, såväl som så kallade mixins.

Sedan version 3.0 har konfigurationen av Foundation också ett speciellt "Customize"-alternativ i dokumentationen. Dessutom använder utvecklare på ett formulär för att välja de önskade komponenterna och justera, om nödvändigt, värdena för olika alternativ till deras behov. Det efterföljande genererade paketet innehåller redan den förbyggda CSS-stilmallen.

Gridsystem och responsiv design

Foundation levereras som standard med en 940 pixlar bred, flexibel rutnätslayout. Verktygslådan är fullt lyhörd för att använda olika upplösningar och typer av enheter: mobiltelefoner, stående och liggande format, surfplattor och datorer med låg och hög upplösning (widescreen). Detta justerar bredden på kolumnerna automatiskt.

Förstå CSS-stilmall

Foundation tillhandahåller en uppsättning stilmallar som tillhandahåller grundläggande stildefinitioner för alla viktiga HTML-komponenter. Dessa ger en webbläsare och ett enhetligt, modernt utseende för hela systemet för formatering av text, tabeller och formulärelement.

Återanvändbara komponenter

Förutom de vanliga HTML-elementen innehåller Foundation andra vanliga gränssnittselement. Dessa inkluderar knappar med avancerade funktioner (till exempel gruppering av knappar eller knappar med rullgardinsmeny, märkes- och navigeringslistor, horisontella och vertikala flikar, navigering, brödsmulnavigering, paginering, etc.), etiketter, avancerade typografiska funktioner och formatering för meddelanden som varningar.

JavaScript-komponenter och plug-ins

JavaScript-komponenterna i Foundation 4 flyttades från jQuery JavaScript-biblioteket till Zepto, på ett antagande om att det fysiskt mindre, men API-kompatibla alternativet till JQuery skulle visa sig vara snabbare för användaren. Dock flyttade Foundation 5 tillbaka till den nyare versionen JQuery-2. "jQuery 2.x har samma API som jQuery 1.x, men stöder inte Internet Explorer 6, 7 eller 8." den officiella ZURB-bloggen förklarar, och den osignerade författaren hävdar att bytet tillbaka berodde på problem med kompatibilitet med anpassade ansträngningar; och att prestandan visade sig inte vara lika bra vid användningstestning med den nyare jQuery-2.

Foundation jQuery-komponenter tillhandahåller allmänna användargränssnittselement och varumärkestillägg. Listan innehåller: dialogrutor, verktygstips, karuseller, varningar, rensning, cookies, rullgardinsmeny, formulär, joyride, magellan, orbit, platshållare, avslöjande, sektion, toppfält, flexvideo och många andra. Ytterligare jQuery-plugin-program kan installeras i Foundation-ramverket för att tillhandahålla avancerad funktionalitet i alla gränssnittsområden, inklusive animering och "off-canvas"-element som slide-in-menyer.

Använda sig av

Det finns tre integrationsnivåer för Foundation: CSS, SASS och Ruby on Rails med Foundation Rails Gem.

CSS

För att använda Foundation CSS kan standard- eller anpassade CSS-paket laddas ner från nedladdningssidan och installeras i lämpliga webbservermappar. Foundation integreras sedan i HTML-sidamarkering.

SASS

Foundation SASS -installationen använder Ruby, Node.js och Git för att installera Foundation-källor. Foundation tillhandahåller sedan ett kommandoradsgränssnitt för att modifiera och kompilera källkod till CSS för användning i HTML-sidamarkering.

Foundation Rails pärla

Foundation Rails pärla kan installeras genom att lägga till "gem 'foundation-rails'" till Rails Application Gemfile.

externa länkar