Emerging HTML5 Authoring Solutions

and open web standards

Created by Prashant Kumar Singh / @prksingh

INSPIRATION

AGENDA

• Layouts
  • Media queries
  • CSS Regions
  • CSS Shapes
  • Flex Box
• Fonts
• Filters
• Other interesting additions
• Questions

LAYOUTS

Responsive web design

Media queries

            @media all and (max-width: 699px) and (min-width: 520px) {
              #sidebar ul li a {
                padding-left: 21px;
                background: url(../images/email.png) left center no-repeat;
              }
            }
                

Whats new?

• device-width
• orientation (portrait or landscape)
• color

CSS Regions

Creating regions

            .Region1{
                flow-into: text-flow;
            }

            .Region2{
                flow-from: text-flow;
            }

CSS Shapes

Creating Shapes

            .inclusion{
                shape-inside: circle(0px, 0px, 100px);
            }
    
            .exclusion {
                shape-outside: circle(0px, 0px, 100px);
            }
        

Flex Box

Flex properties

• flex-direction
• flex-wrap
• justify-content

Fonts for the the web

Typekit

• Great quality fonts without use of imagery
• Browser compatibility and consistency
• CDN caching
• Optimized for the web and automatically improved performance as browser technology evolves

Relative font size

REM - Resize independent of the container

CSS FILTERS

Other additions

• Blend Modes
• Css Animations
• Scalable vector graphics
• Html Canvas

Have you seen wonderland?

Summary

http://html.adobe.com

Questions

Acknowledgements

• http://html5.adobe.com
• http://slides.cjgammon.com/
• http://bennettfeely.com/flexplorer/
• http://codepen.io/collection/qFesk
• http://www.adobe.com/devnet/html5/articles/css-filterlab.html
• http://sarasoueidan.com/blog/css-shapes/