2022-02-18: CSS
========================

.. sectnum::

Overview
--------------------------------------------

- standaard CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
- Bootstrap: https://getbootstrap.com/
- Bulma: https://bulma.io/
- Tailwind: https://tailwindcss.com/

Standaard CSS
--------------------------------------------

- box model
- Flexbox
- CSS Grid


Standaard CSS: Box model
------------------------



.. literalinclude:: ./examples/css/box.html
  :language: html
  :linenos:

Debug:
https://codepen.io/takis/pen/JjOpKXw?editors=1100

Box model:
https://codepen.io/takis/pen/podabbW?editors=1100

Classes:
https://codepen.io/takis/pen/xxPYOEm?editors=1100

Standaard CSS: Flexbox
------------------------

Flexbox:

https://codepen.io/takis/pen/RwjQRKN

Om meer vertrouwd te geraken met de werking van CSS Flexbox,
kan je onderstaand spel spelen: https://geddski.teachable.com/p/flexbox-zombies

Standaard CSS: CSS Grid
------------------------

https://gridbyexample.com/
https://css-tricks.com/snippets/css/complete-guide-grid/


Bootstrap
------------------------

Enkele voorbeelden:

- Buttons: https://codepen.io/takis/pen/VwrQaJR?editors=1000
- Dropdown: https://codepen.io/takis/pen/KKyQMPm?editors=1000
- Layout: https://codepen.io/takis/pen/RwjQayd?editors=1000
- Nav: https://codepen.io/takis/pen/vYWdGww?editors=1000