After a long day of travel, come to the Falcon's Nest for an evening welcome reception and social gathering. Meet old friends, make new friends, and enjoy some billiards! Help us kick off the inaugural CSSConf in style.
Like many a startup, our original codebase was built around Twitter Bootstrap for its look and feel. It was the easiest way for a bunch of backend engineers to get the app quickly up and running and have it still be somewhat usable.
All was well and good, until it was time to upgrade Bootstrap. Because of the ways that Bootstrap and our own codebase are architected, it took a month of coding, a week of Q&A, and a week of post-release fixes, just to make the "simple upgrade".
It really shouldn't have to be that way for you, so in this talk, I'll share what I learned and what I'd recommend for your own CSS architecture.
Converting small visual details from Photoshop to CSS can be a pain. What are Blend Modes? How do you convert the Photoshop Drop Shadow values to the CSS syntax? What exactly is Bevel and Emboss supposed to do, anyway?
Many of the common layer styles in Photoshop are impossible - or too time-consuming - to faithfully recreate in CSS. However, by harnessing the power of CSS Preprocessors, we can utilize functions & mixins to reduce the friction between a static comp and an interactive site without missing any of the details.
Back in the day, flexbox was supposed to be the answer to our layout troubles. It was a simple tool for controlling and altering the layout of a series of child elements. We put our layout hopes in the hands of the flexbox spec, only to see it partially implemented and then crushed, taking our layout dreams along with it.
Well, flexbox is back and this time it's simpler, more powerful, and more importantly, here to stay. We'll take a quick look at the history of the flexbox, survey the current flexbox spec, and see how easy it is to build powerful, flexible layouts with this new layout specification.
One of the coolest benefits of preprocessors is that they have easy-to-grok open source parsers that you can actually get into. By injecting yourself after the pre-CSS code has been parsed, you can have a data-centric view of your styles. You can use this information to reduce complexity, point out probable mistakes, or more interestingly, gather metrics, and implement real-time update mechanisms on the client side.
Border-radius is humble. It will never show off. Everyone and their cat think they know it well, but it won’t stand up to defend itself. Instead, it will smirk quietly while everybody is busy paying attention to its more flashy siblings, confident in its own skin. Border-radius might seem superficially simple, but it can be very powerful. However, its powers are reserved only for those who know how to unleash them. Under its superficial simplicity it hides some of the most complex algorithms in CSS. Intrigued? Come to this talk, and prepare to be surprised.
Meet TopCoat, Adobe's open source UI library. Learn from our experiences building our performance driven CSS UI library for creating native applications with web standards. We will cover our design philosophies as well as our extensive benchmarking and optimization discoveries behind TopCoat.
A discussion of CSS tricks learned during development of the Google Zeitgeist 3D map.
The map is a 3D experiment using Three.js for layout, but entirely rendered in CSS.
How does a large company with many aging online products and processes transform into a lean, mean innovative machine and how does CSS play a HUGE part in it? Come hear Dean's story to find out.
Reacting to a button click/tap has usually been the domain of JavaScript but, what if I told you you don't need JavaScript and CSS is very capable of doing such interaction?
Using the :checked pseudo-class and some cleverly styled labels we can create a whole suite of cool interactions like tabs, modals and even image sliders.
With their tiny screens, multitouch and lack of Flash, mobile devices ushered in a new era of web standards. But the dream of a post-IE6 world quickly unraveled in the face of all-new problems: AndroidOS fragmentation, buggy CSS support, and an ever growing range of screen aspect ratios.
Fortunately, emerging design patterns, workarounds, hacks and some clever font tricks can help make the chaotic mobile web landscape more manageable. By embracing the concept of the resolution-independent viewport, and by understanding the underlying assumptions that iOS and Android browsers are making, even the most complex designs can be rendered exactly as intended, across all platforms and devices.
The same typographic rules can rarely cover the bases for every screen size, and that can lead to some curious looking typographic situations in your responsive layout. This presentation will arm you with tips for how to best keep your type in check and looking its best across all screens. We'll look at how to identify where your type needs a little extra hand, and how to remedy the situation with some type centric "tweak points" and rules.
We'll cover techniques for keeping your line lengths, type sizes, and leading in check across the board for maximum reading comfort and content sensibility. Your readers will be happier and your design will look more polished. It's win-win for all involved!
Sweet, smooth UI effects for your app! Not so easy! Let’s talk about jank, and how to avoid it. We’ll talk about some of the improvements we’ve made to the CSS animation implementation in Chrome so you can make stuff wiggle without hitching, and some common performance pitfalls to avoid. Most importantly, we’ll demonstrate how to find these pitfalls with Chrome’s tools so you can investigate performance problems on your own in the future -- there’s no magic bullet for rendering performance.
In front-end development, the term "best practice" is sometimes attached to the search for absolute truths and the purging of alternative approaches. As web developers, we should become accustomed to reevaluating our knowledge and assumptions as the nature of web development continues to change. This talk will look at the historical context of some dominant ideas about HTML/CSS development, and touch upon how the future of the web platform will fundamentally change the way we work.
After a day of learning, come down to the beach for our evening closing party. We will be sharing the party with JSConf attendees. Chat about what you saw at the conference with fellow attendees, and enjoy the sand between your toes! We will have various things going on during this event including light appetizers, refreshments, and possibly a little bit of live music.