Creating Living Style Guides to Improve Performance

This document discusses the evolution of web design methodologies from static pages to dynamic single-page applications. It introduces Atomic Design and ITCSS as approaches to bring more structure and scalability to component-based design systems. The author learns to design directly in React using Atomic patterns, CSS Modules, and PostCSS to address challenges with CSS organization and scaling. They create a living style guide using Storybook to demonstrate these techniques.

From a lecture for product designers, describing the Atomic Design Approach in theory and practice: the idea of approach and how it was used in production.

This document provides an overview of creating a style guide with modularity and reusable components in mind. It discusses defining global styles like color palettes and typography early in the design process. Designers should analyze wireframes to isolate reusable objects and create a shared vocabulary through a style guide. This ensures visual consistency and allows developers to begin work before final designs. The document provides examples and references to support the described approach.

This document discusses Atomic Design, a methodology for building design systems. It begins by explaining that interfaces are made of systems of components, not just pages. It then discusses frameworks like Foundation and Bootstrap, as well as their potential pitfalls. The document introduces Atomic Design and its principles of separating interfaces into abstract and concrete levels. It explains Pattern Lab as a tool for building design systems and provides examples of existing style guides. Overall, the document advocates for a systematic approach to design to improve collaboration and build reusable and scalable components.

Slides for my talk at CSS Summit 2016 about the approach of atomic design in creating componentized, reusable design systems for sites and apps.

This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.

This is a presentation I gave at the React Nova Meetup on Tuesday, March 21, 2017 at the The Goal in Reston, VA.

An introduction to Emulsify In this presentation, Safallia Joseph of Valuebound has walked us through Emulsify -a component driven prototyping-tool using Pattern Lab. The various agendas include: A brief intro to Components, Atomic Designs and Pattern Lab How to get up and running with Pattern Lab in Drupal An intro to Emulsify Emulsify’s implementation of CDD Getting started with Emulsify Connecting Emulsify to Drupal Benefits and challenges of a decoupled front end workflow in Drupal Projects ---------------------------------------------------------- Get Socialistic Our website: http://valuebound.com/ LinkedIn: http://bit.ly/2eKgdux Facebook: https://www.facebook.com/valuebound/ Twitter: http://bit.ly/2gFPTi8

This document introduces the SC5 Styleguide, a tool for living styleguides that represents UI components with the exact same styles used in a project. It advocates an approach called Styleguide Driven Development where the styleguide is the focal point for front-end development. Key features include supporting CSS/SCSS/LESS, related variables, live editing, Angular directives, and easy integration. The styleguide allows for quick testing, building out new pages, and easier collaboration between designers and developers.

Atomic Design: Creating systems to promote consistency and scalability. This was a presentation I gave at #FredDev on 2/11/14 and is based on the Atomic Design Principals from @brad_frost bradfrostweb.com/blog/post/atomic-web-design/

This talk proposes a new approach called Atomic Design for improving agile UX processes. It focuses on enabling rapid prototyping through higher fidelity prototypes, better collaboration between designers and developers on markup and CSS, and improved design asset management through version control. The approach involves organizing design assets into reusable patterns and components stored in a central library. This would allow for continuous incremental improvements to design globally based on user feedback, rather than large, infrequent redesigns. It aims to make discovery and collaboration easier through a shared vocabulary and standardized organization of files.

My opening keynote from Responsive Field Day 2015 (https://www.responsivefieldday.com/) in Portland OR.

Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!" While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.

Style guides and component libraries are the new trend in front-end development. Everyone is into "Atomic Design" and "Modular CSS" nowadays. But how did we get to this “hype”, and why? What is a style guide, what is its value and where are the benefits of introducing one in a project? And are them useful only for the web, or can be employed by other platforms too? I'll try to give an answer to all these questions in this presentation – directed to designers, web developers but also iOS/Android/Win developers – and I'll show how our Mobile Web team in Badoo has developed his first style guide and how is using it to catch bugs and create a shared pattern library.

Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015 Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.

This document discusses atomic and modular design approaches. It begins by defining modules and patterns, explaining that modules can be independently created and combined in different systems. It then discusses atomic design methodology, which involves designing user interfaces in a hierarchical manner across five stages from atoms to pages. The document also covers creating pattern libraries to promote reusability. It suggests starting by identifying reusable components and not thinking in terms of pages but systems. Overall, the document promotes modular and atomic design principles for building flexible and scalable interfaces.

How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.

We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.

the API is an interface that needs to be designed. http://styleguide.pivotal.io/react_beta.html https://www.npmjs.com/search?q=pui

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.

Design Pattern Libraries explores the process of creating, maintaining, and evolving a design language using a pattern library. This talk explains how to identify, document, share and iterate design patterns, build consensus throughout large organizations, and create a uniform user experience in the process. Pattern libraries are living, breathing systems, and this presentation shows how to evolve patterns and create a library that keeps pace with product release cycles as well as changes in technology and an organization's brand.

Your website has out-of-control CSS bloat. You know your performance is being impacted, but how do you move from organic CSS with no particular architecture to something lighter, more logical, and easier to maintain? In this session, Nicole Sullivan and Stoyan Stefanov will show you how they improved the CSS at Facebook and Yahoo! Search. After this session you will know how to: 1. Use lint tools to automate and evaluate the efficiency of your CSS 2. Avoid the top 5 causes of CSS bloat, and 3. Speed up your site by making the UI code an order of magnitude smaller.

The JavaScript community is one of the most vibrant and fun groups I've ever been lucky enough to be a part of. Like any vibrant community, sometimes people don't play nicely. In this session, I will discuss what it has been like to be shy *and* be on twitter, mailing lists, and open source. I'll talk about my experiences consulting on massive CSS overhauls, and ways to defeat trolls -- including your own inner troll! I'll also share a timing attack for your brain that might just surprise you.

A reflection on career and community. A call to follow your heart rather than some abstract notion of success.

Matt Bee is a freelance developer based in the UK who has worked on websites for organizations like the National Theatre and Brighton Fringe. He discusses how traditional style guides focused only on print and lacked guidance for online design. Living style guides address this by styling base elements, building modular components to handle different content, and documenting each part. This allows for focused design, less messy code, and quicker integration. Bee then provides examples of tools and resources for building living style guides and discusses his successful experience creating one for the Brighton Fringe 2016 website.

We have moved beyond the world of creating pages and into a world where we focus on creating design systems composed of a combination of design aesthetics, ui components, and code standards. In order to communicate these design systems across teams of designers and developers, these design systems are often captured in a living style guide. In this session, we explored how to build and sustain a living style guide. Presented at GiantConf 2016 in Charlotte, NC.

Learn how UI Framework improves design processn and why it is helpful for building web software products and encouraging rapid prototyping in Agile software enviroments

From Nicole's presentation at the CSS Summit. This is brand new research regarding efficient CSS selector design. Practicing the rules outlined here will make your CSS lean, your site fast, and your maintenance minimal. A beautiful combination for people concerned with building performance into their sites.

What would appear on the surface to be a simple change like updating the look of a button or changing the color of a link can turn out to be a huge effort. When everyone understands what can be reused and what needs to be newly created, the team can focus discussion on how to attain the best designs.

1. The document outlines a workshop on using SASS for WordPress themes. It will cover installing SASS and setting up a WordPress development environment, the basics of SASS including variables, nesting, mixins and more, and a hands-on workshop to slice a mockup design and implement it using SASS. 2. Attendees are instructed to bring a laptop with Photoshop, a text editor like Sublime Text, WordPress installed and Ruby and SASS installed. 3. The workshop consists of an introduction to SASS, setting up the project files and structure, and a mockup slicing workshop followed by a Q&A session.

The document proposes an IDE-based meta search engine called SurfClipse that searches multiple search engines for solutions to programming exceptions. It considers the exception context, content relevance, link popularity, and search engine confidence to score and rank results. An experiment tested SurfClipse on 25 exceptions and found correct solutions for 24 cases. A user study with 5 exceptions had 64.28% agreement between recommended and participant solutions. Future work includes improving the metrics, conducting more experiments and user studies, and developing a distributed version of SurfClipse.

Nicole Sullivan gives a presentation on designing fast websites. She discusses why performance matters, how websites have grown more complex over time, and how poor performance can negatively impact businesses. She provides several best practices for optimizing websites, such as creating reusable components, using consistent styles, making modules transparent, optimizing images through sprites and compression, avoiding non-standard fonts and using columns instead of rows.

How CustomInk created a UX lead style guide that could easily maintain and build styles, elements, and components on the site.

At WalmartLabs, we've got lots of react component libraries and the number of libraries we have is always growing. This is the framework we're using on the Electrode React team to get component libraries up and running quickly.

Steve Berry, Grant Hutchins, and I presented to the NYC UX/Agile MeetUp group on how to leverage a Live Style Guide when designing products in an Agile process.

Users are dropping their desktops/laptops in favor of their phone or tablet at an impressive rate. If these platforms make our site difficult to use it will create a negative impression on our users, ultimately costing our companies business. To survive this trend we must go responsive. This session will discuss the basic principals of a responsive site: Flexible Images, Media Queries, and Fluid Grids. Without the assistance of a framework we will face lift a non-responsive site. Lastly, we will compare and contrast several of the simple and complete responsive frameworks that are available today: Bootstrap, Foundation, and Responsive Grid System. #codemash

We wanted to utilize the responsive nature of the grid layout in our EPUBs to mimic the complex layout of higher education print textbooks. When we looked at applying the grid to our EPUBs, we saw that this would require additional coding not related to semantics, and the addition of s surrounding our headers would interrupt our CFI generation (which are essential to our course creation). To mimic the look of a grid layout, we leveraged the consistent framework of our Macmillan Schema and relied on media queries to mirror the look of a responsive grid. This solution worked with our CFI generation and saved us from having to add additional coding to fit the grid model. In this workshop, we will present the CSS we authored at Macmillan as a case study and explore alternative ways to code and style complex content with CSS, with a focus on grid and media queries in EPUBs. March 18, 2019 ebookcraft.booknetcanada.ca #EbookCraft

You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites. * Abstraction * Flexibility * Grids * Location dependent styles Velocity Conference, 2009

This document provides an overview of Cascading Style Sheets (CSS) including: - The different ways to apply CSS such as inline styles, embedded styles, and external styles. - Various CSS selectors like tag selectors, class selectors, ID selectors, and combination selectors that allow targeting specific elements. - CSS properties for styling elements with regards to colors, text, margins, paddings, and borders. - The benefits of using CSS including separation of structure and presentation, consistency across pages, and reduced file size compared to only using HTML for styling.

The document discusses reworking front-end development workflows. It describes the speaker's workflow in 2004, which involved writing HTML, CSS and JavaScript, and uploading files via FTP. This is compared to modern workflows, which involve version control, preprocessors, task runners, and static site generators. Common CSS methodologies like SMACSS and BEM are also discussed. Nesting in preprocessors and responsible use of tools are emphasized.

The document discusses implementing Georgia.gov's front-end using Drupal 8 and a pattern library. Key points discussed include: - Integrating a pattern library with Drupal 8 to allow front-end work to start early and stay in sync with the site as it launches. - Standardizing typography across many sites using techniques like variable fonts and defining a type system. - Developing a system to allow over 85 sites to vary colors using CSS custom properties instead of subthemes to reduce maintenance costs. - Building out a library of reusable front-end components to maintain consistency across many developers.

How style guides can help in a responsive design workflow. Find out more here: http://blog.lukebrooker.com/future-friendly-style-guides Pattern Response - Github https://github.com/lukebrooker/pattern-response Slides from my talk at What Do You Know - Brisbane: http://whatdoyouknow.webdirections.org/brisbane

An introduction to the SASS language for styling your web projects. Its aim is to explain why you should make the jump from CSS to SASS, and to help you do so as easily as possible. This presentation also focuses on getting you the highest impact from the simplest features of the SASS language.

Rob Walker from Papertrail takes us through his recent journey from regular CSS to SCSS. If you’re thinking of making the switch yourself and just need a little push, this is the talk for you.

The document discusses Sass, a CSS extension language that adds powerful features like variables, nested rules, mixins, functions and more. It outlines problems with traditional CSS like repetition, maintenance issues and lack of abstraction capabilities. Sass aims to solve these through its additional features that allow for more modular, reusable and maintainable stylesheets. It also introduces Compass, a Sass extension framework and library, and discusses best practices like organization, sprites and separation of concerns.

My presentation at SourceDevCon. There's a lot more you can do with Sass/Compass than just parameterize CSS.

Front-end developer Marta shares with you some tips which she finds most helpful, according to her experience.

SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that allows for nesting, variables, mixins and other powerful features to help write cleaner, more maintainable CSS. It helps achieve the DRY principle by eliminating repeated code and allowing logical structuring. Some key SASS features include nesting, variables and scopes, mixins, extends and interpolation. SASS files are compiled to normal CSS files for use in browsers. Using SASS can help large development teams work on CSS in a more organized and efficient way.

This document discusses concepts related to Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor. It describes how Sass allows for variables, nesting, mixins and other features to make CSS more powerful and maintainable. Key concepts covered include using variables to reduce repetition, creating reusable code with mixins, and how Sass files are compiled into normal CSS that browsers can understand.

This document provides an overview of CSS3 features including borders, backgrounds, text effects, fonts, transforms, transitions, animations, multiple columns, and selectors. It begins with an introduction to CSS3 and what it adds compared to CSS2. It then covers specific CSS3 modules like borders, backgrounds, text effects and how to create various visual effects. It demonstrates how to use CSS3 features like rounded borders, multiple backgrounds, shadows, fonts, 2D and 3D transforms, transitions and animations. The document also covers CSS3 multiple column layouts, and new selector types introduced in CSS3.

A brief tutorial on some of the basic advantages LESS and other CSS preprocessors have over pure CSS.

CSS3 is the latest evolution of Cascading Style Sheets, the style sheet language used for describing the presentation of web pages. It adds new features and extends existing ones, though browser support is still evolving. The document discusses CSS3 features and browser support, recommendations for using CSS3, and provides an introduction to the Google Maps API version 3.

DRY CSS - Theries, methods and tools for efficient and scalable Stylesheets. A talk given at WordCamp NYC 2012. The value of keeping all code D.R.Y (Don't Repeat Yourself) is universally accepted and demanded in the world of programming, but when it comes to CSS we've all learned to compromise and live in a wet mess. We don't have to! This talk will go over how you can use thematic and structural CSS definitions to cut down on wasted code, simplify maintenance and unify your site styles just by DRYing out your standard CSS. I'll explain how tools like Firebug enable a whole new way of understanding complex style interrelationships and give examples of the particular patterns that let me cut one stylesheet from ~4200 to ~2400 lines without losing anything but wasted code! We'll also cover how preprocessors like LESS and SASS can take your DRY CSS even farther by actually programming your styles as if they were made of PHP.

This document provides an introduction and overview of CSS (Cascading Style Sheets) for use in RoboHelp. It defines key CSS concepts like styles, style sheets, and the cascading priority of styles. It also covers style types, best practices for CSS development, and troubleshooting issues with pre-RoboHelp 8 lists. The document is presented by Neil Perlin of Hyper/Word Services, an internationally recognized content consultant.

This document provides an introduction and overview of CSS (Cascading Style Sheets) for use in RoboHelp. It defines key CSS concepts like styles, style sheets, and the cascading priority of styles. It also covers style types, best practices for CSS development, and troubleshooting issues with pre-RoboHelp 8 lists. The document is presented by Neil Perlin of Hyper/Word Services, an internationally recognized content consultant.

Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum! In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here. What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include: * Validators * Preprocessors * Finding dead rules * Linting * CSS3 gradient tools * Performance measurement tools * Unit testing

Nicole Sullivan and Stoyan Stefanov discuss their work optimizing CSS at Facebook and Yahoo!, As well as the state of CSS optimizations in the Alexa Top 1000 websites. What a mess! From Velocity Conference and Texas-Javascript.

From Nicole's talk at JSConf.eu where she presented her wish list for the future of CSS. She presents a brand-new expanded syntax which allows for prototypes, mixins, and variables and explains how a preprocessor can be used today to achieve a richer language in older browsers.