Frontent Development voor Programmeurs

Presentatie voor gastcollege aan 1ste jaars studenten Applicatie Ontwikkeling

Transcript

1. Frontend Development HTML & CSS voor
2. Babs Gösgens @crossinghippos
6. 1. Frontend
8. HTML is makkelijk NIET
11. Redcarpet
13. Twig
15. } Mustache
16. Liquid
17. CSS is makkelijk NIET
19. Specificity • Universal selectors • Tag (type) selectors • Class selectors • A ribute selectors • Pseudo-classes & Pseudo-elements • ID selectors • Inline styles * a, div, article .block [type=“checkbox”] :first-child, ::before #mainmenu style=“color: #f00;” bad!
32. 2. Communicatie
37. 3. Code
38. Het werkt toch?
45. <?php php
46. :{}
47. :{} :{ }
48. :{}
49. :{} :{ }
50. :{}
51. :{} :{ }
52. :{}
53. :{} :{ }
54. :{}
55. <?php $array = array(‘Rood’ , ’Wit’ , ‘Blauw’); ?> ! <?php foreach ($array as $color) { ?> <div class=“vlag<?php echo $color; ?>”></div> <?php } ?>
60. Sources • h p://bem.info/ • h p://bradfrostweb.com/blog/post/atomic-web-design/ • h p://clubmate.fi/oocss-acss-bem-smacss-what-are-they- what-should-i-use/ • h p://coding.smashingmagazine.com/2011/12/12/an- introduction-to-object-oriented-css-oocss/ • h p://csswizardry.com/2011/09/writing-efficient-css- selectors/ • h p://csswizardry.com/2013/01/mindbemding-ge ing- your-head-round-bem-syntax/ • h p://hugogiraudel.com/ • h p://nicoespeon.com/en/2013/05/dive-into-oocss/ • h p://nicolasgallagher.com/about-html-semantics-front- end-architecture/ • h p://rhodesmill.org/brandon/2011/concentric-css/ • h p://sass-lang.com/ • h p://smacss.com/ • h p://snook.ca/ • h p://www.alwaystwisted.com/post.php?s=2014-02-27- even-easier-bem-ing-with-sass-33 • h p://www.bre jankord.com/2013/02/09/thoughts-on- semantic-html-class-names-and-maintainability/ • h p://www.mathayward.com/modular-css-with-sass- and-bem/ • h p://www.sitepoint.com/architecture-sass-project/ • h p://www.sitepoint.com/css-sass-styleguide/ • h p://www.slideshare.net/maxdesign/css-oocss-and- smacss • h ps://github.com/necolas/idiomatic-css • h ps://github.com/stubbornella/oocss/wiki
 h p://en.wikipedia.org/wiki/ Comparison_of_web_template_engines
 h p://alistapart.com/article/why-sass
61. h ps://speakerdeck.com/ babsgosgens/frontent-development-voor-programmeurs
62. a www.facebook.com/crossinghippos
 h p://www.slideshare.net/babsgosgens