1. Steve Honeyman site: stevehoneyman.co.uk
stevehoneyman.co.uk/blog/wordcamp
repo: github.com/stevehoneyman
twitter: stevehoneyman

2. A talk about:
Using Advanced Custom Fields to create multi-layered print style graphics in the browser, adding a little responsive type into the mix.

10. Markup (header.php):

12. header {background-image}

13. header:after {backgound-image}

14. header {background-color}

15. img {}

16. figure img {}

17. figure {background-image}

18. figure:before {background-image}

19. figure:after {background-image}

20. h1 {}

21. Custom Field Types Image Field Type to control images
Radio Button Field Type to control blend-modes
Number Field Type to control opacity, rotate and letter-spacing if required.
Color Picker Field Type to control background and font colours.

22. Using radio buttons to control blend modes:

23. Using number to control opacity:

25. Set variables, get data:

26. Echo variables as inline styles:

27. Output HTML and CSS:

28. What the user sees!

29. Fluid / Responsive Type
Use viewport width and CSS locks to scale and control. Apply either by;
Resetting font-size on HTML root element
Using calc() on specific elements

30. Reset font-size to vw at root

31. Style using em or rem

32. Lock element in pixels at max-width:

33. Thanks! :) stevehoneyman.co.uk/blog/wordcamp
stevehoneyman.co.uk/blog/blue-notes