Overstap naas SASS & gulp

Sinds ik 2008 begon met het bouwen van websites was dit altijd op eenzelfde manier. Er was een ontwerp, dit werd omgezet naar HTML en CSS. In 2010 kwam hier PHP bij in de vorm van WordPress. In de hier opvolgende jaren heb ik mijn continue verbeterd maar het werk bleef ongeveer hetzelfde. Veel handmatige acties en vooral met CSS – heel veel typen -. Vervolgens was daar in 2015 LESS. Dit is een CSS preprossessor die ervoor zorgt dat je ‘less’ css hoeft te schrijven.

Waar je vroeger css als volgt moest schrijven:


.navbar{
  background: none;
  padding: 15px 20px 10px 35px;
  width: 100%;
}
.navbar.mobile {
  padding: 0;
  padding-left: 20px;
}
.navbar.mobile a{
  font-size: 1.6rem !important;
  text-align: left;
}

Kan dat met LESS (en SASS) opeens op de volgende manier:


.navbar{
  background: none;
  padding: 15px 20px 10px 35px;
  width: 100%;
  &.mobile{
    padding: 0;
    padding-left: 20px;
    a{
      font-size: 1.6rem !important;
      text-align: left;
    }
  }
}

 

Dit scheel bizar veel typewerk en zorgt voor overzichtelijke code! Maar alsnog, ik was in één .less bestand aan het werken wat ik continue handmatig moest omzetten of ‘compileren’ naar een css bestand. Ondertussen werden de websites steeds groter en complexer. Vervolgens ontdekte is WordPress frameworks die mijn leven een stuk makkelijker maakte zoals de 8.x versie van Sage.

Deze templates gebruiken build tools om SASS en JS bestanden te combineren en verkleinen tot één enkel bestand. Dit gaf de mogelijkheid om meerdere SASS-bestanden te maken en deze te laten combineren tot een ‘ouderwets’ css bestand.

Daarnaast ben ik Browsersync gaan gebruiken. Deze tool houdt in de gaten wanneer een bestand opnieuw is opgeslagen en herlaad automatisch de website op de achtergrond. Dit scheelt vooral met het compatible maken voor de verschillende browsers heel veel tijd!

Ondertussen ben ik op een punt beland dat ik mijn eigen WordPress stack aan het ontwikkelen ben welke zeer zwaar leunt op bestaande code van andere stacks en templates om uiteindelijk een template te worden met moderne buildtools zonder te complex te worden.

De naam van deze template is BasePlate en is op GitHub te bekijken. In de komen tijd ga ik hier verder aan ontwikkelen. Als vervolg op deze post wil ik ook nog een vervolg schrijven over BasePlate.

0 Comments

    Leave a comment

    Your email address will not be published or shared

    . Required fields are marked *

    *

    © Copyright 2019 Based Online. - Privacy policy