responsive

Swiper

Een mobile first module die toelaat om een afbeeldingsgalerij te maken met swipe functie.

Je kunt een swiper type aanmaken. 

Screen000098.png

De module gebruikt css klassen die meekomen met de third party.


Screen000099.png

Haal de bestanden en mappen van hun site en zet ze in libraries.

Drupal 8 MegaMenu

Deze responsive menu heeft de mogelijkheid om kolommen en zelfs blokken in een menu te gebruiken. Er zijn wat elementaire standaardkleuren en instellingen meegeleverd. Afwerken naar smaak...

Kijk zeker naar de bijgeleverde handleiding. Stap voor stap uitgelegd.. een zeldzaamheid.

Je krijgt bij de instellingen van het menu (via Structuur) een voorbeeld. Van hieruit doe je alle instellingen. Klik op wat je wilt wijzigen.

Image Replace

Niettegenstaande zijn complexiteit is dit er toch eentje om te onthouden.. Je kunt per breekpunt (schermbreedte) een andere afbeelding tonen. Ideaal om grote foto's door telkens kleinere te vervangen al naar gelang je tablet of smartphone gebruikt.

 

PC.

Drupal8_002856.png

Tablet (er is een stuk van de afbeelding weggesneden)

Drupal8_002857.png

Responsive theme preview

Wil je weten hoe je pagina's er uit zien in verschillende apparaten. Deze module simuleert deze schermen.

Er komt in het beheersmenu een knop bij.

Drupal8_002528.png

Elk apparaat heeft een bepaalde breedte en pixeldichtheid die je kunt instellen. Het blijft wel een simulatie....

Drupal8_002531.png

Masonry API

Masonry heeft de mogelijkheid om lege ruimtes op te vullen. Niet enkel met afbeeldingen maar met volledige blokken. Het past de grootte van de divs aan, aan de beschikbare ruimte én tijdens het wijzigen van de schermgrootte krijg je nog een mooie transitie er bij.. Kijk eens hoe de ruimte mooi wordt opgevuld.


Drupal8_002114.png

Responsive tables filter

Tabellen in views zijn responsive omdat er een ingebouwd systeem is dat je kunt instellen vanaf wanneer je een bepaalde kolom niet meer wilt zien. Tabellen in je Editor moet je om responsive te zijn, dezelfde CSS klassen toekennen als in de views.

De Responsive Tables Filter doet bepaalde zaken automatisch....Het zet de inhoud van tabellen mooi onder elkaar en groepeert op de kolom koppen. Hij doet dit zowel in de CKEditor en in Views. Voor de CKEditor moet je dit aanvinken bvb in de full HTML versie.... Zie responsive tables filter.

Bootstrap Layouts

Deze module maakt me blij...Het is de integratie van het voortreffelijke Bootstrap rooster systeem (12 koloms responsive systeem) met Display Suite en Panels.

Gewoon installeren en daarna gebruiken. Hier een voorbeeld met display Suite.

Drupal8_001914.png

Ik kies voor een gestapeld 2 koloms layout.

Drupal8_001915.png

Groot scherm.

Radix Layouts

Radix layout biedt extra responsive layout aan voor Panopoly en Radix thema's welke bruikbaar zijn in alle DS en Pagina toepassingen..

radix layouts.png

 

Afbeeldingsstijlen

Afbeeldingsvelden in inhoudstypes en views kunnen een specifieke stijl meekrijgen. Drupal 8 voorziet nu ook in responsive stijlen waarbij breekpunten worden ingesteld, om naargelang de breedte van het venster, de afbeeldingen in een bepaald formaat weer te geven.

Drupal8_001517.png

Abonneer op responsive