Blog/Tutorial: #1 responsive design met foundation framework

  • Hallo allemaal,


    Ik ben momenteel bezig met het foundation framework. Nu dacht ik dat misschien meerdere mensen er wat aan hebben als ik mijn ervaringen hier deel, zodat jullie er ook wat van kunnen leren.


    Let op: ik ga niet tot in detail op alles in, dus je moet een goede kennis van CSS hebben


    Ik was op zoek naar een geschikt framework voor wordpress en kwam uiteindelijk tot de conclusie om mij te verdiepen in Foundation van zurb. Dit framework ondersteunt vele functies: responsive design, Sass, mixins en ga zo maar door. Voor meer informatie over dit framework klik hier.


    Nja, laten we maar zo zeggen, het is nog niet heel gemakkelijk. Ik had eerst de bovenstaande link goed doorgelezen en dacht alles wel te begrijpen. Ik had prima de stappen doorgenomen en voilá. Binnen no-time had ik de standaard template van het foundation framework staan. Maar toen kwam ik tot het volgende: Hoe pas ik in vredesnaam het _settings.scss bestand aan... In de documentatie van foundation zelf kwam ik niet veel verder en ben verder gaan zoeken. Hierdoor kwam ik bij nettuts aan. :thumbup:


    link


    Boom! Bij elke verandering in je variabelen in de root : /sass/_settings.scss moet je dus via Ruby het bestand 'compilen'. Hierdoor update hij de variabelen en kun je in je app.css gebruiken maken van bijvoorbeeld het volgende:


    _settings.scss

    Code
    $bodyfontfamily: Arial;


    app.css

    Code
    body {
    font-family: $bodyfontfamily;


    Damn!! De eerste stap is gemaakt! Zodra ik verder ben met het framework zal ik jullie er meer over vertellen en wellicht kunnen jullie het dan ook zelf gaan gebruiken! Ideaal voor responsive design, goede SEO structuur en een goede semantische opbouw! Let's go!

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!