NYCSS - Glue Extension

12
Intelligent UI With CSS [email protected] om http://twitter.com/ nicluciano http://getglue.com/

description

AdaptiveBlue (http://www.adaptivebl...) is a New York startup focusing on building semantic browsing technologies. Their Firefox extension Glue (www.getglue.com) relies heavily on it's front end technology, specifically CSS.AdaptiveBlue's Senior Web Developer gives a brief demo of Glue, discusses common limitations they face with CSS, and displays more advanced CSS techniques used in their new Glue visualizations.

Transcript of NYCSS - Glue Extension

Page 1: NYCSS - Glue Extension

Intelligent UI With CSS

[email protected]

http://twitter.com/nicluciano

http://getglue.com/

Page 2: NYCSS - Glue Extension

What Is Glue?

Glue is a browser extension that adds social and contextual browsing capabilities. The Glue Bar is our new persistent toolbar.

Page 3: NYCSS - Glue Extension

OptionsTopbarTooltip

Page 4: NYCSS - Glue Extension

Options(Simple Sprites)

- Build a base class

- Define an identifying class

- Define States

Page 5: NYCSS - Glue Extension

Options(Simple Sprites)

Page 6: NYCSS - Glue Extension

Topbar(Basic Inheritance)

- Build a parent class

- Build children with unique- properties

Page 7: NYCSS - Glue Extension

Topbar(Basic Inheritance)

Page 8: NYCSS - Glue Extension

Topbar(CSS Limitations)

Page 9: NYCSS - Glue Extension

Tooltip(Complex Inheritance)

- Identify all unique properties of- multiple elements and factor them- out

- Define which property set to use- with a common parent class

Page 10: NYCSS - Glue Extension

Tooltip(Complex Inheritance)

.adb_Liked .adb_LikedComment .adb_Looked .adb_Comment

Page 11: NYCSS - Glue Extension

Visualizations

Glue Visualizations are our experiments invisualizing Glue's implicit data uniquely.