CSS

De meeste CSS die wij gebruiken word hier uitgeschreven en besproken.
Je kan dan van hieruit je eigen Deesign maken.

Download


Deesign Start

Het begin van ons Deesign om zelf jouw eigen Deesign te maken.

Download Start
Deesign Basis

De basis van heel Deesign met de styling dingen om meteen aan de slag te kunnen gaan.

Download Basis
Deesign Medium

Het medium CSS pakket kan je meer doen en hier heeft veel meer mogelijkheden.

Download Medium
Deesign Large

Dit pakket bevat alles van Deesign heb je alles wat in de andere paketten ook bevat.

Download Large

Ga aan de slag

Ga nu aan de slag met je eerste project. Als je het start pakket van Deesign hebt genomen kun je nu zelf je eigen code schrijven simpel en gemakkelijk. Hieronder vind je al de CSS codes die Deesign ondersteund.

Eventuele volgorde voor de CSS

Om Deesign te kunnen gebruiken moet je eerst de structuur van het CSS design begrijpen.

De basis structuur van Deesign en eventueel wat je kan importeren.

  1. Als je de Deesign start hebt gedownload heb je alleen de reset en styling gedownload het beste is dat je dit laat staan voor geen problemen te krijgen.
  2. Importeer nu de h1,h2,h6,h4,h5,h6 en eventueel text-styling.
  3. Voordat je de buttons en andere toepassingen toevoegd gaan we eerst het grid systeem inladen.
  4. Vervolgens gaan we nu alle buttons, indicators, breadcrumbs inladen.

Mobiel vriendelijk

Het de(e)sign dat we gemaakt hebben is mobiel vriedelijk dat betekend dat het toegankelijk is voor de mobiele generatie.
Om een goede rendering, aanraking en zoomen te garanderen, voeg de viewport metatag aan je <head> toe.

<meta name="viewport" content="width=device-width, initial-scale=1">

Containers

Gebruik .container voor een responsieve vaste breedte container.

<div class="container">
...
</div>

Gebruik .container-fluid is voor een volledige breedte container, die de gehele breedte van het kijkvenster bezit.

<div class="container-fluid">
...
</div>

Introductie

Het Grid systemen van Deesign wordt gebruikt om pagina-indelingen te maken via een reeks rijen en kolommen om u inhoud te ordenen. Hier is hoe het Deesign grid-systeem werkt:

  • Rijen moet binnen in een .container (vaste breedte) of .container-fluid (volledige breedte) worden geplaatst voor een goede afstemming en opvulling.
  • Gebruik rows om horizontale groepen van kolommen te creëren.
  • Inhoud moet binnen kolommen, en er m kolommen en slechts kan onmiddellijk kinderen rijen.
  • Voorgedefinieerde klassen zoals .row en .col-xs-4 zijn beschikbaar voor het snel maken van geweldige lay-outs.
  • Kolommen maakt het lelijk (openingen tussen de inhoud kolom) via padding. Dat padding wordt gecompenseerd in rijen voor de eerste en laatste kolom via negatieve marge op .row s.
  • Grid kolommen worden gemaakt onder vermelding van het aantal twaalf beschikbare kolommen die u wilt overbruggen. Bijvoorbeeld, drie gelijke kolommen drie gebruiken .col-xs-4.
  • Als er meer dan 12 kolommen binnen een enkele rij zijn geplaatst, Zal die kolom op een andere regel geplaatst worden.
  • Grid klassen gelden voor apparaten met een grotere schermen breedtes en kleinere schermen. Daarom is bijvoorbeeld het aanbrengen van elke .col-MD-* klasse om een element zal niet alleen invloed op de styling op middelgrote apparaten, maar ook op grote apparaten als .col-LG-* niet aanwezig is.

  • Kijk naar de voorbeelden hieronder voor de code toe te passen op uw HTML code.

    Grid systeem

    Media queries

    We maken gebruik van de volgende media queries in ons grid-systeem en andere componenten.

    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Deesign */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

    Horizontaal Gestapeld

    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1


    .col-md-8
    .col-md-4


    .col-md-4
    .col-md-4
    .col-md-4


    .col-md-6
    .col-md-6

    CODE

    Mobiel versus computer

    .col-xs-12 .col-md-8
    .col-xs-6 .col-md-4


    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4


    .col-xs-6
    .col-xs-6

    CODE

    Mobiel versus tablet versus computer

    .col-xs-12 .col-sm-6 .col-md-8
    .col-xs-6 .col-md-4


    .col-xs-6 .col-sm-4
    .col-xs-6 .col-sm-4
    .col-xs-6 .col-sm-4

    CODE

    Kolommen verpakken

    .col-xs-9
    .col-xs-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    .col-xs-6
    Subsequent columns continue along the new line.

    CODE

    Responsive reset kolommen

    .col-xs-6 .col-sm-3
    .col-xs-6 .col-sm-3
    .col-xs-6 .col-sm-3
    .col-xs-6 .col-sm-3

    CODE

    Offset kolommen

    .col-md-4
    .col-md-4 .col-md-offset-4
    .col-md-3 .col-md-offset-3
    .col-md-3 .col-md-offset-3
    .col-md-6 .col-md-offset-3

    CODE

    Nesting kolommen

    Level 1: .col-sm-9
    Level 2: .col-xs-8 .col-sm-6
    Level 2: .col-xs-4 .col-sm-6

    CODE

    Kolommen ordenen

    .col-md-9 .col-md-push-3
    .col-md-3 .col-md-pull-9

    CODE

    Afbeeldingen formaten

    100 op 100 100 op 100 100 op 100

    <img src="../img/sizes/100x100.png" alt="100 op 100" class="img-rounded">
    <img src="../img/sizes/100x100.png" alt="100 op 100" class="img-circle">
    <img src="../img/sizes/100x100.png" alt="100 op 100" class="img-thumbnail">

    Gebruik .img-responsive voor een de resolutie aan te passen naargelang het beeldscherm kleiner of groter word.

    <img class="img-responsive" src="" alt="" title=""></img>

    Gebruik .center-block voor de afbeelding in het midden te zetten

    <img class="center-block" src="" alt="" title=""></img>

    Uitgelijnde tekst

    Gebruik .text-left voor de tekst uit te lijnen naar links.

    Gebruik .text-center voor de tekst in het midden te plaatsen.

    Gebruik .text-right voor de tekst uit te lijnen naar rechts

    <p class="text-left">Links uitgelijnde tekst.</p>
    <p class="text-center">Center uitgelijnde tekst.</p>
    <p class="text-right">Right uitgelijnde tekst.</p>
    www.000webhost.com