Theo den Blanken Theo-denBlanken
Theo-denBlanken
/ slimmer.css
Last active
August 29, 2020 19:30
geen herhaling, opdeling van verantwoordelijkheden en BEM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .knoppen { | |
| display: grid; | |
| grid-gap: 1em; | |
| grid-template-rows: repeat(auto-fill, 2em); | |
| width: 7em; | |
| margin: 0 .5em; | |
| } | |
| .knoppen--horizontaal { | |
| width: 100%; | |
| grid-template-columns: repeat(auto-fill, minmax(7em, auto)); |
Theo-denBlanken
/ slimmer.html
Created
August 28, 2020 10:19
geen herhaling, opdeling van verantwoordelijkheden en BEM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Twee knoppen</title> | |
| <link rel="stylesheet" href="slimmer.css"> | |
| </head> | |
| <body> | |
| <div class="knoppen knoppen--horizontaal"> |
Theo-denBlanken
/ nietZoHandig.css
Created
August 28, 2020 09:58
De CSS is hier niet zo handig georganiseerd: minder functioneel opgebouwd en onhandige herhaling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .button-koop { | |
| width: 9em; | |
| height: 2.45em; | |
| background-color: darkcyan; | |
| font-family: Arial, Helvetica, sans-serif; | |
| text-decoration: none; | |
| text-align: center; | |
| line-height: 2.45em; | |
| display: inline-block; | |
| color: #fff; |
Theo-denBlanken
/ nietZoHandig.html
Created
August 28, 2020 09:55
Markup van 2 knoppen waarbij de CSS handiger kan
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Twee knoppen</title> | |
| <link rel="stylesheet" href="nietZoHandig.css"> | |
| </head> | |
| <body> | |
| <div class="winkelwagen-knoppen"> |
Theo-denBlanken
/ koning-object.js
Last active
May 23, 2020 15:31
Een voorbeeld van een JavaScript object
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const koning = { | |
| naam: 'Willem-Alexander der Nederlanden', | |
| echtgenote: 'Máxima Zorreguieta', | |
| kinderen: ['Amalia', 'Alexia', 'Ariane'], | |
| geboortejaar: 1967, | |
| url: 'https://imgg.rgcdn.nl/162226349cc546fb9f908c4faaf8bf75/opener/Foto-NOS.jpg', | |
| noemKinderen() { | |
| let zin = 'Mijn kinderen zijn: '; | |
| for (let i=0; i<this.kinderen.length; i++) { | |
| zin += this.kinderen[i] + ' '; |
Theo-denBlanken
/ inleidingSass.html
Created
May 8, 2020 05:32
Een start document bij de training intro Sass: https://blanken5.home.xs4all.nl/sass.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="author" content="Theo den Blanken, hier jouw naam"> | |
| <script crossorigin="anonymous" src="https://kit.fontawesome.com/123jouwAPIkey.js"></script> | |
| <title>Site met Sass</title> | |
| </head> | |
| <body> |
Theo-denBlanken
/ na_Import.css
Created
April 23, 2020 06:16
De gecompileerde CSS nadat de variabelen en de navigatie zijn geïmporteerd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Dit is meer css-commentaar */ | |
| body { | |
| font: 100% Helvetica, sans-serif; | |
| color: #1b74f0; | |
| } | |
| .navigatie { | |
| background-color: cornflowerblue; | |
| } | |
| .navigatie li { |
Theo-denBlanken
/ main.scss
Last active
May 7, 2020 09:04
Voorbeeld waarin _var.scss en _nav.sass geïmporteerd worden
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // importeer _var.scss en _nav.sass | |
| @import 'vars'; | |
| @import 'nav'; |
Theo-denBlanken
/ nestingVoorbeeld.css
Created
April 23, 2020 05:45
nesting voorbeeld, gecompileerd uit 'nestingVoorbeeld.scss' of 'nestingVoorbeeld.sass'
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .navigatie { | |
| background-color: cornflowerblue; | |
| } | |
| .navigatie li { | |
| float: left; | |
| } | |
| .navigatie a { | |
| display: block; | |
| padding: 1em 2em; | |
| color: white; |
Theo-denBlanken
/ nestingVoorbeeld.sass
Created
April 23, 2020 05:41
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Nesting met SCSS | |
| $primair: cornflowerblue | |
| .navigatie | |
| background-color: $primair | |
| li | |
| float: left | |
| a | |
| display: block | |
| padding: 1em 2em |