Low Code CSS

Voor wie OutSystems nog niet kent, een prachtig platform waarop je ontzettend snel gave (enterprise brede) applicaties kunt ontwikkelen en designen. Low code development van je app eventueel aangevuld met eigen code wanneer noodzakelijk. Allemaal erg tof, maar there must be more…​

 


Bij het maken van app komt niet alleen techniek, maar ook vooral design kijken. Met de CSS editor kon je custom CSS schrijven, ideaal en geen probleem voor een UI designer. Maar wat als je er niet zo in thuis bent, maar wel aanpassingen wil doen, moet je dan CSS leren? Regelmatig werd de vraag gesteld, waarom geen low-code features voor CSS, kan het niet slimmer, there must be a better way.

 

Met de recente update is de CSS ook visueel gemaakt, zodat je vrij bent om te spelen met colors, paddings, border-radius, heights & widths etc. Niet alleen visueel gemaakt, maar ook de toegepaste CSS kun je direct opslaan voor als reusable class.

 

CSS Made easy in actie


Oké, dus stel je hebt een List-widget die je een eigen style wil geven. Hoe ga je dan te werk? In de Widget Tree wordt de opbouw van mijn scherm getoond met daarbij de properties van mijn List.

 

 

Wanneer je de brush optie selecteert zie je welke CSS styles toegepast zijn op de List-widget. De computed style (margin, padding) zoals je die in een Web-inspector verwacht zijn op diezelfde wijze gepresenteerd. Vanaf dit punt kun je visueel je widget gaan stylen. Met direct zichtbaar wat je aanpassingen in de style voor resultaat hebben.

 

 

Vooral handig dat je primaire en secundaire direct te selecteren zijn, geen noodzaak om kleurcodes uit je hoofd te leren, met ook de color-picker.

 

 

Reusable CSS Class


Stylen doe je het liefst eenmaal en de opslaan als reusable class, waarbij de style class wordt opgenomen in de CSS op App-niveau. Stylen doe je het liefst eenmaal en de opslaan als reusable class, waarbij de style class wordt opgenomen in de CSS op App-niveau. Note; Geef er zelf een betere (herkenbare) naam aan dan ik in dit voorbeeld gebruik ;-)

 

 


Dus bij de eerst volgende keer dat je weer een List-widget maakt, selecteer je style en that’s it! :-)

 

 

 

Happy styling gewenst! Mocht je geïnteresseerd zijn in wat het OutSystems platform verder kan bieden, of zou je er zelf mee willen leren werken? Bij Inforza helpen we je graag op weg; stuur mij gerust een mailtje of check onze Inforza Academy.

 

 

 


Je kunt deze blog hier downloaden
 

Please reload

Recente Posts
Please reload

Bedrijf

Sectoren

Diensten

Producten

Meer

Volg ons

  • Wix Facebook page
  • Twitter Classic
  • LinkedIn Social Icon
Inforza Projecten BV
Kelvinring 44
2952 BG Alblasserdam
t: 078-6933302

Thema's