Geschreven door Anja de Crom op zaterdag 26 maart 2016 21:31, in: Joomla gebruikersgroepen

Vanavond hield Patrick een presentatie over LESS. Is het nou meer of niet?

JUG Utrecht 14032016

Volgende presentaties:

  • Maandag 11 april: Big Data
  • Maandag 9 mei: AcyMailing en Piwik

Joomla Nieuws

Laatste versies

  • Joomla 3.4.8
  • Joomla 3.5 RC 2 even in de gaten houden, want binnen een paar dagen komt de stabiele versie
  • Akeeba Backup 4.5.5
  • Admin Tools 3.7.1
  • JCE 2.5.15

Leuk interview met Simon: http://goo.gl/ib8Sxy

Presentatie Is {LESS} more .... of toch niet? door Patrick Smits

Liever de presentatie bekijken? Hij staat hier: http://less.byantoinette.nl/

Patrick is grafisch vormgever van beroep, doet daarbij webdesign. In 2007 ging hij een webdesigncursus volgen omdat hij meer met internet wilde doen. Toen hij eenmaal met html en css bezig was en het zoveelste contactformuliertje moest ontwerpen, ging hij kijken of het anders kon. Hij stuitte op Joomla en doet daar nu veel mee. Patrick en zijn vrouw Antoinette hebben samen een communicatiebureau, By Antoinette.

Wat is LESS? De bekende CSS-taal, maar dan verrijkt met extra'€™s als variabelen, functies en aspecten die we kennen uit de programmeertalen.

Waarom LESS? Patrick programmeert zo clean mogelijk, en helder. Bij LESS matcht dat.

Hoe werkt LESS?

Patrick legt het uit aan de hand van een voorbeeldtekst in html, in verschillende opmaak: title, body, paragraph, h1 en h2. Vervolgens kijken we naar de styling in css. Je hebt dan een html-bestand en een css-bestand.

Welke stappen neem je?

Zie presentatie

Je hebt dan een LESS bestand, een leeg css-bestand en een html-bestand

Met LESS Compiling voeg je de code samen tot een css bestand. Patrick gebruikte https://prepos.io (trial versie die gewoon blijft werken).

Makkelijk te configureren: nieuw project aanmaken. Map aanwijzen waar je html, css en LESS in staat. Standaard staat dit op autocompiling. Elke keer dat je het LESS-bestand opslaat, wordt er een css gegenereerd die door de html gebruikt wordt.

LESS is eigenlijk gewoon€™ css. Het is makkelijk om ermee te beginnen. Je kunt stapje voor stapje dingen aanpassen, toevoegen, weghalen. De structuur css/html blijft gelijk. En een groot voordeel is dat je gestructureerd kunt opmaken.

Nadelen: je mag geen aanpassingen meer maken in je css bestand, met elke LESS aanpassing wordt je css namelijk weer overschreven. En firebug geeft alleen de css weer, dus dat moet je vertalen naar het LESS bestand waar het vandaan komt.

Kleur en LESS

Stel, je wilt een kleur toewijzen aan verschillende elementen. In je LESS bestand kun je variabelen invoegen, bijvoorbeeld @mijnkleur: #CC3366

Nu kun je die variabele @mijnkleur toevoegen op alle plaatsen waar je die kleur wilt hebben. En het handigst is het dat je die variabele maar één keer hoeft aan te passen om overal die kleur terug te laten komen.

Je kunt ook met verschillende kleurtinten werken. Verschillende variabelen aanmaken en er een kleurcode aan hangen. Maar het kan ook nog anders. Je neemt bijvoorbeeld een tint die 20% donkerder is dan je hoofdkleur, en een tint die 50% lichter is.

Dan kun je aangeven: darken(@mijnkleur, 20%)

Of lighten(@mijnkleur, 50%).

Je kunt ook kleuren mixen: pak 50% van dit en 50% van dat.

Je kunt nog veel meer met kleur, van multiply tot shade en van overlay tot greyscale. Je kunt elke kleur als variabele opgeven en daarmee verschillende foefjes en trucjes uithalen. Het internet staat er vol van.

Fonts en LESS

Hier neemt Patrick Google fonts als voorbeeld. Bij Google kun je een link gebruiken die je in je header van je html zet. Om hem in css te gebruiken klik je op @import en dan krijg je een code die je kunt kopiëren en in je LESS zetten. Daarna kun je er een variabele van maken (voorbeeld @mijnfont: "€˜Shadows Into Light Two"€™, cursive).

Vervolgens kun je dat variabele font toewijzen aan de elementen waar dat font gebruikt moet worden.

Je kunt zo veel fonts toevoegen als je wilt. Bovenaan de import neerzetten (import moet altijd bovenaan), daarna de variabelen en die dan toewijzen.

Fontsize en LESS

Wil je de fontsize van verschillende elementen aanpassen, dan kun je daar ook weer een variabele van maken en die toewijzen aan die elementen.

En ook handig: je kunt ook relatieve fontsizes gebruiken. In LESS kun je rekenen. Dus bijvoorbeeld de helft van je variabele fontsize: @header / 2

Oneven fontsize en wil je geen halve punt? Font-size: ceil (@header / 2) rondt hem af naar boven, font-size: floor (@header / 2) naar beneden.

Het handige van LESS is dat je er commentaar bij kunt zetten: // en dan je commentaar typen.

Je kunt dus rekenen met LESS en dus afgeleiden maken voor relatieve dingen: je hoeft dan maar één variabele aan te passen om alles mee te laten groeien of krimpen.

Nesting en LESS

Stel, je wilt bij de ene div de h1 aanpassen en bij de andere niet. Bij CSS zou je dan de opmaak gaan splitsen. In LESS kun je de h1 gewoon binnen de div zetten en ze daar definiëren. Dan zijn ze van elkaar losgekoppeld.

Een ander voorbeeld zijn de media queries. Je kunt variabelen van je media queries maken en dan vervolgens de elementen definiëren voor de verschillende devices.

Import en LESS

Wil je in een css bestand iets aanpassen, dan moet je je soms een ongeluk zoeken en scrollen. In LESS is daar een oplossing voor. Je kunt je LESS bestand splitsen in verschillende delen. Bijvoorbeeld je container, je ene div en je andere div. Daar maak je drie aparte LESS bestanden van. Maar: alleen het bestand dat gekoppeld is aan het css bestand wordt gelezen. We hebben drie LESS files en maar één css file die wordt ingeladen in de html pagina. Je kunt het oplossen door @import jouwbestand.less€; bovenin dat ene LESS-bestand te zetten dat wel geladen wordt. In de css komen je verschillende onderdelen dan netjes onder elkaar te staan.

Nadeel: je kunt in firebug niet zien in welk LESS-bestand je code staat. Er bestaan overigens wel apps waar je dat wel mee kunt zien.

Mixins en LESS

Mixins is een class die je insluit. Bijvoorbeeld ronde hoekjes. Je zet de code in je LESS-file, als variabele (.roundborders), dan hoef je alleen dat aan de div toe te voegen. Een class kun je zo uitgebreid maken als je zelf wilt. De mixins kun je ook nog variabel maken. Bijvoorbeeld bij de roundborders @radius, of bij een box-shadow @color, en die variabelen dan verderop definiëren. Je kunt daar heel ver en heel diep in gaan.

Je hoeft dus niet heel vaak dingen te kopiëren: je maakt één element en definieert de kenmerken daarvan een paar keer. Daarmee hou je je code heel erg clean -€“ ook al ga je dingen in dingen laden.

LESS Overview

Dit was maar een kleine selectie uit de enorme hoeveelheid mogelijkheden van LESS. Hoe kun je nou zelf LESS leren?

  1. Veel lezen
  2. Code lezen
  3. Surfen
  4. En kijk op http://lesscss.org, daar kun je spelen met LESS.

LESS en Bootstrap

Bootstrap maakt ook gebruik van LESS, bijvoorbeeld van brand colors. Bij buttons worden die nog wel eens gebruikt. Voorbeeld: in het framework T3 zitten de variabelen in variable.less. Je kunt ook een custom.less bestand maken en dat importeren; dat is wel handig omdat zo'€™n variable.less overschreven kan worden als het framework een update krijgt.

Commentaar: met dubbele slash komt niet mee, maar /* wel.

Dokter Joomla

Vraag: PHP7, wat houdt dat in aan de serverkant? Joomla 3.5 gaat daarmee werken, moet de hosting provider het faciliteren?

Antwoord: Ja, maar als je hoster het niet heeft valt-ie terug op een oudere versie. En niet alle extensies zullen meteen compatibel zijn.

Case: Sinds de laatste Joomla-versie komen nieuwe artikelen niet meer standaard bovenaan in de volgorde. Hoe kan dat?

Antwoord: Iets met de auto increment misschien? Kijk eens naar de artikel ID, want daar sorteert hij standaard op. Wat ook nog van invloed kan zijn is als je de volgorde op handmatig hebt zet, en er wordt ook nog gesorteerd op categorievolgorde. Dan komen artikelen uit een categorie later lager te staan.

Tip: We hadden het een tijdje geleden over een soort flipbook van een pdf-bestand, ik heb een leuke oplossing gevonden: http://pubhtml5.com/. Je kunt er een heel mooi doorbladerbaar boek van maken, dat (hoera!) niet met Flash werkt. Zelf samenstellen en uploaden, allerlei dingen instellen (o.a. privacy) en dan staat het bij Pubhtml op de server en kun je het embedden.

Tip: Je kunt het Joomla logo dat bij het inloggen getoond wordt vervangen door je eigen logo. En allerlei kleuren aanpassen. Gewoon in de backend template. Hier vind je meer informatie: http://www.netspecialist.nl/joomla-cursussen/39-joomla-algemeen/421-je-eigen-stijl-voor-de-joomla-beheeromgeving.html

Vraag: Een van mijn klanten wil in een artikel één plaatje hebben en "€˜voor meer afbeeldingen, klik hier"€™. Dat er een soort lightbox opent. Op kleinere devices moet hij schermvullend zijn, je moet kunnen swipen en liefst een rijtje thumbnails eronder.

Antwoord: Zit er bij die van Phoca niet een weergave waar dat wel mee kan? Of kijken hoe ver je komt met Modals? Of de Pubhtml5 van de vorige case? Of zelf wat code schrijven (Bootply).

Case: Ik had een site die offline gehaald is door de hoster vanwege malware. Het zat in een mapje Weblinks en in Phoca.

Antwoord: Als je het wilt monitoren kun je in AdminTools een instelling aanzetten die kijkt of er bestanden veranderen. Het kan ook met Eyesite. En je kunt Watchful.li of Myjoomla.com een audit laten doen.

Case: Ik heb een klant die bestanden wil laten opslaan door zijn klanten, is Docman daar de meest geschikte voor?

Antwoord: Hangt ervan af wat je wilt. Er zijn verschillende mogelijkheden voor. Docman, maar ook RSFiles. Wat je misschien beter niet kunt gebruiken is E-docman.

Tip: Als je een Quickstart Package gebruikt van bijvoorbeeld Helix, kan het gebeuren dat de makers zichzelf als super user hebben toegevoegd. Check dat dus even en verwijder die gebruikers.

Tip: Bij een website wilden ze dat een gebruiker kon inloggen als super user, zodat die kon updaten als het nodig was. Ik heb hem alleen toegang gegeven tot de Joomla Update, en verder niets.

Plaats reactie

Om een reactie te kunnen plaatsen op dit artikel zul je moeten inloggen aan de rechterzijde van deze pagina. Als je nog geen account hebt kun je er gratis een aanmaken waarna je een reactie kunt plaatsen.

j 360 j-2528 JoomlaCommunity

Laatste Nederlandstalige Joomla!® versies

Licentievoorwaarden

Op alle artikelen is de Creative Commons Licentie van toepassing.

Donateurs: ExactHost