ZURB Foundation: Felhasználói felület CSS keretrendszer az érzékeny előtérhez

2010-ben a ZURB tervezőiroda CSS keretrendszert hozott létre azzal a céllal, hogy szolgáltatást indítson a számára prototípusok létrehozásának megkönnyítése e lerövidíti a fejlesztési időt. Ennek érdekében a legjobb snitteket, mintákat és sablonokat választották ki, hogy összegyűjtsék őket a Foundation keretrendszerben, amely 2011-ben nyílt forráskódú projektként jelent meg, és amely azóta továbbra is ingyenes a nyilvánosság számára.

A Foundation egy reszponzív előtér-keretrendszer, amely hatékony HTML és CSS összetevőkből áll a felhasználói felület konfigurálásához (felhasználói felület), különféle kódrészletek és sablonok, de számos opcionális JavaScript-bővítmény is. A webes keretrendszer rendelkezik a modul felépítése és a különböző eszközökről elérhető projektek konfigurálására tervezték; a MIT licenc és mindkettőről letölthető hivatalos honlapja lennie GitHub. A Foundation 4.0-s verziójától kezdve a munkafeltételek érvényesek „Első a mobil”, ezért azóta több új modul segítségével dolgozunk a teljesítmény optimalizálásán és a kereten belüli fájlok méretének könnyítésén. Az Alapítvány szabványos verziója mellett a ZURB más változatokat is közzétett az e-mailes hírlevelek fejlesztéséhez (Az e-mailek alapja) és egyoldalas webhelyek (Foundation for Apps).

A Foundation, a moduláris felépítéssel jellemezhető reszponzív webes keretrendszer, mindenekelőtt a rugalmasságban előnyös. Lehetősége van a letöltés előtt eldönteni, hogy melyik komponenst választja és melyiket nem: így Ön saját maga állíthatja össze a webes kódgyűjtemény változatát anélkül, hogy olyan modulokat kellene letöltenie, amelyekre nincs szüksége. Ha pedig úgy adódik, hogy olyan komponensre van szüksége, amelyet a letöltéskor még nem választott ki, később könnyedén hozzáadhatja a keretrendszerhez. Ugyanígy lehetséges az Ön számára már nem hasznos modulok eltávolítása is: így mindig garantált a lehetőség, hogy csak olyan funkciókkal rendelkezzen, amelyeket valóban szükségesnek tart webprojektjének megvalósítása.

A Foundation 6.0 esetében több lehetőség közül választhat 40 komponens a következő hét ágazathoz tartozik:

• Rács: A reszponzív webdizájn döntő összetevője a Grid rugalmas elrendezése, a szabványnak megfelelő 1200 pixeles szélességgel. A modul kijelölését is törölheti, azonban a rendszer egy olyan webprojekt tervezésének alapját képezi, amely különböző eszközökről elérhető, és különböző felbontási skálákkal kompatibilis. Emellett a 6.0-s verziótól lehetőség van a "Flex Grid" modul kiválasztására is, amely a CSS flexbox modell alapján (például vízszintes vagy függőleges) az elemek még rugalmasabb pozicionálását teszi lehetővé. tárgyak szervezése).

• általános: Az általános modulok között (amelynek hivatalosan a Grid is része) elsősorban az osztályok vannak úszik e láthatóság, melynek köszönhetően megteheti defimagatartási szabályok meghatározása az egyes elemek elhelyezésére és láthatóságára vonatkozóan; Emellett ezen a területen találunk még egy űrlapkészítő komponenst, valamint az írás és szöveg alapformátumait tartalmazó nyomdamodult.

• Ellenőrzés: Itt található a webprojekt összes legfontosabb interaktív eleme. Például ezek olyan gombok, amelyek egy kattintással máshová vezetik a felhasználót, vagy bezárják a kiválasztott elemeket. Vannak olyan modulok is, amelyekkel csúszkákat, ill gombokat be/ki móddal.

• Navigáció: A kezelőfelület konfigurációjából biztosan nem hiányozhatnak a navigációs elemek, így még a ZURB Foundation-lel való projektjéhez is sokféle modul áll rendelkezésére, amellyel beállíthatja menüsorok és menük (legördülő lista, legördülő lista, részletezés), navigációs útvonalakat (morzsamorzsa) vagy szám hozzáadása az oldalakhoz.

• Konténer: A tárolók fantasztikus lehetőséget kínálnak különböző elemek, például szövegek, képek vagy videók közös térbe helyezésére. Itt talál stílusokat a klasszikus tartalom widgetekhez, mint például a legördülő menük, lapok, lépcsőzetes szektorok vagy modális párbeszédpanelek.

• Média: A „Média” részben találja azokat a keretmodulokat, amelyek hasznosak lesznek a multimédiás elemek beépítéséhez. A „Flex Video” komponens például támogatja Öntvideók beszúrása és gondoskodik arról, hogy a tartalom a különböző képernyőméretekhez és felbontástípusokhoz legyen igazítva. Ezen kívül vannak előnézeti képek összetevői, valamint hasznos tippek az eszközök használatához.

• Csatlakoztat: Végül választhat néhány nagyon hasznos bővítményt a ZURB Foundation számára, amelyek megkönnyítik a webes keretrendszerrel való munkát. A „Motion UI” könyvtárral például lehetőség van egy nagyon hasznos könyvtár letöltésére, még ha csak a Sass változathoz is elérhető, ami megkönnyíti a felhasználói felület szakaszok és animációk létrehozását.

Ezenkívül a letöltés előtt kiválaszthatja, hogy defibefejezni néhányat a keret szabványos beállításai. Ezek közé tartozik az oszlopok számának vagy vastagságának, valamint a Grid rendszer maximális szélességének módosítása, valamint a különböző színbeállítások és a szöveg irányának meghatározása (balról jobbra vagy jobbról balra). Ha először szeretné tesztelni a keretrendszert az egyes modulok működésének tanulmányozása nélkül, letöltheti a Foundationt teljes verzióban is (teljes) vagy könnyebb alapváltozatként (Alapvető).

Ha elégedett a CSS által kínált lehetőségekkel, majd egyszerűen átírja a stílusokat a letöltött CSS fájlba, akkor biztosan jól döntött. A Foundation keretrendszernek azonban van még egy különlegessége: a CSS kód alapja a Sass stíluslap nyelven van írva (Szintaktikailag fantasztikus stíluslapok), amely a CSS úgynevezett előfeldolgozója. A Sass lehetővé teszi, hogy stíluslapokon dolgozzon .scss amelyeket a későbbiekben le lehet fordítani vagy átírni népszerű .css fájlokba, és amelyeket a böngészők elolvasnak és értelmeznek.

Ha a ZURB keretrendszer Sass változatát használja, a következő előnyöket élvezheti:

• Egyszerűsített szintaxis (Sass vagy CSS), ami megkönnyíti a stíluslapok írását

• A lehetősége defiBefejez az modellek (Mixins), hogy az ismétlődő formátumokat központilag elmentse és tetszés szerint integrálja

• Különböző stíluslapok egyszerű kombinációja a HTTP kérések minimalizálása érdekében

• Használata változók és függvények színek, távolságok, betűtípusok stb. cseréjéhez központilag

• A kód egyszerűen strukturálható, köszönhetően fészekrakó hierarchikus sorrendben, ami lehetővé teszi, hogy tisztábban dolgozzon túl sok kódsor nélkül

A Sass fordító eredetileg Ruby nyelven íródott. Ha azonban nem ezt a programozási nyelvet használja, akkor nem kell telepítenie a Sass-hoz, mert a LibSass-szal lesz egy C-ben írt alternatíva. A LibSass minden használt operációs rendszerrel működik, és könnyen telepíthető Node.js-re. munkafolyamat, vagyis a Sass kódjának módosítása és azok automatikus CSS-be fordítása.

Az 5-ös verzióról a Foundation 6.0-ra való átállással a ZURB ismét csökkentette a teljes keretrendszer fájlméretét: 60 KB CSS-jével és 84 KB JavaScript-jével a Foundation a hírnévnek örvend. az egyik legkorszerűbb fejlesztési platform és olvasd el, hogy van. A már említett moduláris felépítésnek és bizonyos testreszabási szabadságnak köszönhetően még a keret méretét is tovább csökkentheti. Kombinálva a rugalmas Griddel és a különböző attribútumokARIA (például egy hatékony billentyűzet-navigáció átültetéséhez) a ZURB által megvalósított, a különböző platformokon és eszközökön kompatibilis webprojekt megvalósításához elengedhetetlen alapfeltételek teljes mértékben kielégítettnek tekinthetők. Az ARIA-attribútumok a legjobban dokumentáltak, és ott állnak rendelkezésre, ahol jelentősen optimalizálni kívánja webhelye elérhetőségét.

Ha a keretrendszer Sass verziójával dolgozik, feltétlenül bővítse ki a beillesztett tervezési elemek és elrendezések konfigurálási lehetőségeit. Ezeknek a speciális stíluslapoknak a használata korántsem egyszerű a kezdők számára, és bizonyos tanulási időt igényel, ami általában a platformra is igaz. Nekem is'külső komponensek integrálása, valamint modulok és Alapítványi projektek más keretrendszerben vagy CMS-ben nagyon bonyolult. Az apró gyengeségek, amelyeket a ZURB Foundation mutat más CSS-keretrendszerekhez, például a Twitter Bootstraphoz képest, a sablonok korlátozott választéka és az Internet Explorer régebbi verzióinak támogatásának hiánya.

A ZURB Foundation az első prototípustól a használatra kész weboldalig kíséri a fejlesztőket, és mindenekelőtt saját hatékonyság. Ha úgy találja, hogy egyes összetevők feleslegesek, akkor lehetősége van megszüntetni a kijelölésüket anélkül, hogy ez más elemek működését befolyásolná. Összefoglalva, a CSS keretrendszert egy különösen karcsú kód jellemzi, amely kiemeli a ZURB „Mobile First” által választott vezérmotívumot. Együtt rendkívül rugalmas Grid rendszer, amit opcionálisan a Sass-szal is adaptálhatsz, fejlesztésre ideális a keret reszponzív előlap amelyek előnye, hogy nagy adatbetöltési sebességgel és kiváló hozzáférhetőséggel rendelkeznek, valamint alkalmazkodnak a különböző képernyőméretekhez.

A ZURB keretrendszert testreszabott és talán összetettebb webes projektek létrehozására is használhatja, azonban ez jelentős energiatúlterheléshez kapcsolódik, és megköveteli a töredékek jó megértését.