Let's face it. The web has become too big. At every stage on the development process we have several different tools each with a passionate following that will tell you their tool is better than the other tools in that category. If you've been doing development for any length of time you'll remember that frameworks are not new. We can go as far back as jQuery and libraries developed around that time August, 2006 to see the evolution of frameworks. When they are first introduced they are good. Does anyone remember other Frameworks from the early jQuery era? - MooTools...
The argument about tool overload is not a new one. There have been many discussions over the years about what framework is better, what language is better, whether you should use Ruby on Rails versus Angular, SASS instead of LESS or Compass instead of plain SASS and even whether you should use SASS syntax over SCSS or vice versa. I've been working with web technologies since before we had Javascript and CSS. I subscribe to the school that says learn the basics and then jump into the fancy advanced stuff or in this case, paraphrasing Addy Osmani: first do it,...
> Part conference review and part ideas moving forward. This may or may not make as much sense as the review for AEA did. I still think they complement each other. Where AEA dealt with the how to create content and the tools to use. BIB Books in Browsers, to me, deals with the content we create and the intersection of the stories we tell and the technologies we use to tell them. I was surprised to see how much of these new channels interact with the web is and what the web can be and become. It is also...
I thought I was crazy when I saw that both An Event Apart and Books in Browsers were back to back on the same week and decided not to cancel. Now that BiB is almost done I'm kinda glad it did. AEA gave me ideas and tools about the how to do design work and BiB is giving me ideas on what to work on and where to look for experiment ideas that may or may not fall squarely on the web. AEA I've been promising to myself that I would attend An Event Apart for years. It all worked...
- Grids - labs.jensimmons.nethttps://labs.jensimmons.com - rachelandrew.co.ukhttps://rachelandrew.co.uk/archives/ - Modular Scale - Modular Scalehttp://www.modularscale.com/ - More Meaningful Typographyhttp://alistapart.com/article/more-meaningful-typography -- Tim Brown, A List Apart - Web Font Loading Patternshttps://www.bramstein.com/writing/web-font-loading-patterns.html -- Bram Stein - Molten Leadinghttps://github.com/Wilto/Molten-Leading - Molten leading or, fluid line-heighthttp://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/ -- Tim Brown, Nice Web Type - Viewport Sized Typography - Viewport Sized Typographyhttps://css-tricks.com/viewport-sized-typography/ -- CSS Tricks - Viewport sized typography with minimum and maximum sizeshttps://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html -- Eduardo Boucas - FitTexthttp://fittextjs.com/ - CSS Viewport Units: vw, vh, vmin and vmaxhttps://dev.opera.com/articles/css-viewport-units/ -- Chris Mills, Dev.Opera - Fluid Typehttp://trentwalton.com/2012/06/19/fluid-type/ - Precise control over responsive typographyhttps://madebymike.com.au/writing/precise-control-responsive-typography/ -- Mike Riethmuller - Font Face Observerhttps://github.com/bramstein/fontfaceobserver --...
Layouts: The Next Generation Rather than work with floats and positioned content we'll concentrate on 3 newish layout technologies: Multi column, flexbox and grid General considerations The table below, taken from Responsive Typographyhttp://shop.oreilly.com/product/0636920034063.do by Jason Pamental O’Reilly gives an idea of the different devices sizes and the elements sizes as related to them. We’ve also put the equivalent print sizes for comparison. | | | Print | Desktop xl | Desktop | Tablet | Phone | | --- | --- | --- | --- | --- | --- | --- | | Body | Font Size | 12pt | 16px...
Making and Breaking the Grid and The Elements of Typographic Style are two of my favorite books on design and, for the longest time, I thought about them only in their applications to books. Sitting at a full-day workshop with Jen Simmons about grids it has opened mind and reminded me of what can we do to expand the reach of the web. I will discuss some of them as a way to wrap this up. What is exclusive to the web We need to research and discover what is it that makes the web unique and different from other...
Media queries to control typography and layout Media queries are awesome. They allow developers us to change elements of the design based on arbitrary criteria…. We finally can customize our designs to fit on the target devices rather than the other way around. If we were to create a query for every device in the market we would be stuck in the process for a long, long time. Instead we'll build queries for device sizes using the following mixin. It’s broken in 2 sections: - A nested map containing this information: - The names of the breakpoint - The minimum...
Taking advantage of SASS to play with colors I'm bad at remembering headecimal, rgba or hsl colors. These fuctions will help convert the hexadecimal values scss $base-color: AD141E; Darken & Lighten These two adjust the Lightness of the color’s HSL values. Sass will parse our hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100. I usually stay in the range of 3-20%. scss darken $base-color, 10% lighten $base-color, 10% !http://media.tumblr.com/tumblrluv5i70HPp1qb5ozt.png Saturate, & Desaturate These will will adjust the Saturation of the colors HSL values, much like...
Rather than let font loading remain at the mercy of the network we'll use Font Face Observer to dynamically load the fonts and swap them when ready. This may cause a little user cognitive dissonance but it's better than the alternatives of browsers taking forever or not loading the font. setting up fonts We'll use the following mixin to create our @font-face declarations scss @mixin font-declaration $font-family, $font-file-name, $weight:normal, $style:normal { @font-face { font-family: '{$font-family}'; src: url'{$font-file-name}.eot'; src: url'{$font-file-name}.eot?iefix' format'embedded-opentype', url'{$font-file-name}.woff2' format'woff2', url'{$font-file-name}.woff' format'woff', url'{$font-file-name}.ttf' format'truetype', // working with myFonts requires the svg file // to be formated like this...
