Object Oriented CSS
1,097 likes286,167 views
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.
1 of 64
Ad
Recommended
JONAS' RESOURCES FOR BUILDING BEAUTIFUL WEBSITES WITH HTML, CSS AND JAVASCRIPT
JONAS' RESOURCES FOR BUILDING BEAUTIFUL WEBSITES WITH HTML, CSS AND JAVASCRIPTTanyaVarshney9 This document is an introduction to a web design course that teaches students how to make their websites look professionally designed using techniques like proper typography, color selection, image placement, icon usage, layout, and user experience design. It provides tips and best practices in these areas and encourages students to get inspired by studying other successful website designs. The goal is to help students create visually appealing websites that optimize the user experience and conversion rates. The document recommends constant practice and continuing to learn new skills.
Design concepts and principles
Design concepts and principlessaurabhshertukde The document describes key components of software design including data design, architectural design, interface design, and procedural design. It discusses the goals of the design process which are to implement requirements, create an understandable guide for code generation and testing, and address implementation from data, functional, and behavioral perspectives. The document also covers concepts like abstraction, refinement, modularity, program structure, data structures, software procedures, information hiding, and cohesion and coupling.
FRONT-END WEB DEVELOPMENT WITH REACTJS
FRONT-END WEB DEVELOPMENT WITH REACTJSTran Phong Phu The document provides information about a training course on front-end web development with Reactjs offered by NordicCoder. It details what the course will cover including React basics, advanced React topics like data handling and the React ecosystem, and tools like Webpack. It also introduces the instructor, outlines the course schedule over 10 weeks, and describes the final project of building an online shopping cart.
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessAustin Gil A performance optimization presentation for WordCamp Sacramento 2016. Presented by Austin Gil.
This presentation addresses issues in design, development, and project management, where performance is most greatly affected. We look at various opportunities and techniques within each stage that may offer more speed. The subjects range from beginner to advanced with tips and advice that just about anyone can walk away with, and we end with a collection of recommended tools.
This presentation was designed so the slides would be useful even out of context of the presentation. Please enjoy.
Wireframes for Web Design
Wireframes for Web DesignMindy McAdams Wireframes are not well understood by Web design students in various disciplines. With illustrations and examples, this presentation differentiates between storyboards and wireframes.
Good/Bad Web Design
Good/Bad Web DesignYaowaluck Promdee This document provides an introduction to good and bad web design. It discusses key elements of good design such as simplicity, consistency, uniqueness, usefulness, easy navigation, responsiveness and lack of errors. Good design is exemplified by websites like Nike.com that are easy to use and achieve their objectives well. Bad design is seen on websites like Havenworks.com that do not clearly convey their purpose. The document concludes with an assignment to evaluate examples of good and bad web design based on the principles discussed.
Principles of web design
Principles of web designdswebdesign . A website is a platform where you can look for information or purchase products online. Web design is a process where professionals make use of graphical design, user interface design and other elements for creating a good website. Web designers should possess the required skill and professional knowledge for developing good quality software. Many visitors visit a website with good design and high-quality content. Follow the principles of effective web design so that you attract your customers towards your business website. Visit our site of your wish to develop quality websites that would attract numerous users. https://www.digitalseo.in/web-designing-company-chennai/
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptMarc Huang This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.
CSS Bloat!
CSS Bloat!Nicole Sullivan 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.
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyVarya Stepanova This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent semantic structure. It explains that BEM aims to address the lack of a unified semantic model across frontend technologies by introducing a common naming convention based on blocks, elements, and modifiers. It then details BEM's core concepts and provides examples and best practices for implementing BEM in HTML/CSS and JavaScript.
CSS Best practice
CSS Best practiceRuss Weakley This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
SASS - CSS with Superpower
SASS - CSS with SuperpowerKanchha kaji Prajapati This document introduces Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. Sass allows writing clean CSS in a programming construct rather than static rules, reducing repetition and creating more manageable stylesheets. It features variables, nesting, mixins, partials, and inheritance. Installing Sass involves downloading Ruby and using the gem install command. Key benefits of Sass include writing cleaner CSS, faster development time, and programmatic features like variables and nesting.
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.
Laravel intake 37 all days
Laravel intake 37 all daysAhmed Abd El Ftah This document provides an overview of the Laravel framework, including:
- A brief history of Laravel and its origins from Ruby on Rails
- Instructions for installing Laravel and understanding its directory structure
- Explanations of core Laravel features like routing, Blade templating, Eloquent ORM, validation, and the service container
- Additional resources are provided for further exploring topics like middleware, collections, and customizing Laravel's functionality.
BEM - CSS, Seriously
BEM - CSS, SeriouslyRoland Lösslein An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley An introduction to the changing world of CSS. Slides from Brisbane Web Designer Meetup 13 March 2013.
HTML CSS & Javascript
HTML CSS & JavascriptDavid Lindkvist - HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan 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.
Efficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley 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.
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
Introduction to HTML
Introduction to HTMLAjay Khatri This document provides an introduction to HTML and covers several key topics:
1. It explains what HTML is and that it is the skeleton or structure of web pages, describing elements with markup tags.
2. It reviews important HTML tags like headings, paragraphs, links, images, and lists and how they are used to provide structure and semantics to text.
3. It also discusses other useful tags like comments and provides additional resources for further learning HTML.
Css
Cssshanmuga rajan This document provides an overview of Cascading Style Sheets (CSS) including:
- CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more.
- CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms.
- There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags.
- The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to
BEM It! for Brandwatch
BEM It! for BrandwatchMax Shirshin The document introduces the BEM (Block, Element, Modifier) methodology for organizing CSS, HTML, and JavaScript code into reusable components. It describes BEM as a semantic model that defines blocks, elements, and modifiers to structure interfaces. Blocks are standalone parts of an interface, elements are integral parts of blocks, and modifiers define block/element properties or states. The document provides examples of BEM naming conventions and discusses benefits like improved reusability, reduced specificity issues, and serving as a common language for designers and developers.
Sling models by Justin Edelson 
Sling models by Justin Edelson AEM HUB This document discusses Sling Models, which provide a simplified way to adapt Sling resources into domain objects in AEM. Some key points:
- Sling Models allow resources to be adapted to POJOs with minimal code using annotations like @Model and @Inject. This is cleaner than previous "adapter factory" approaches.
- Common use cases like injecting resource properties, child resources, services and more are supported out of the box via standard injectors.
- Sling Models are pluggable, so custom injectors can be added to inject non-standard dependencies.
- They allow resources and requests to be adapted to either classes or interfaces, keeping domain objects simple POJOs.
Maintainable CSS
Maintainable CSSStephen Hay This document discusses how to write maintainable CSS through organizing CSS files according to a design language's components (e.g. layout, color), authoring semantic and portable CSS code using classes and IDs, and documenting CSS code and conventions either through inline comments or generated documentation from comment tags. It emphasizes organizing CSS files by concern rather than by site section, separating IE conditional code into separate files, using a system for declaration order and formatting for readability, and having an effective text editor for working with CSS code.
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
AEM Sightly Deep Dive
AEM Sightly Deep DiveGabriel Walt Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
Object Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And ApplicationsPerconaPerformance The document discusses object-oriented CSS (OOCSS) as a way to improve performance, code reuse, and maintainability of CSS code for websites and applications. It outlines several principles of OOCSS including creating reusable CSS components, separating container and content rules, extending objects by applying multiple classes, avoiding location-dependent styles, and separating structure from skin. Examples are provided to illustrate these concepts. The goal of OOCSS is to write more modular, predictable and maintainable CSS code.
The Fast And The Fabulous
The Fast And The FabulousNicole Sullivan 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
More Related Content
What's hot (20)
CSS Bloat!
CSS Bloat!Nicole Sullivan 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.
BEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyVarya Stepanova This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent semantic structure. It explains that BEM aims to address the lack of a unified semantic model across frontend technologies by introducing a common naming convention based on blocks, elements, and modifiers. It then details BEM's core concepts and provides examples and best practices for implementing BEM in HTML/CSS and JavaScript.
CSS Best practice
CSS Best practiceRuss Weakley This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.
SASS - CSS with Superpower
SASS - CSS with SuperpowerKanchha kaji Prajapati This document introduces Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. Sass allows writing clean CSS in a programming construct rather than static rules, reducing repetition and creating more manageable stylesheets. It features variables, nesting, mixins, partials, and inheritance. Installing Sass involves downloading Ruby and using the gem install command. Key benefits of Sass include writing cleaner CSS, faster development time, and programmatic features like variables and nesting.
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.
Laravel intake 37 all days
Laravel intake 37 all daysAhmed Abd El Ftah This document provides an overview of the Laravel framework, including:
- A brief history of Laravel and its origins from Ruby on Rails
- Instructions for installing Laravel and understanding its directory structure
- Explanations of core Laravel features like routing, Blade templating, Eloquent ORM, validation, and the service container
- Additional resources are provided for further exploring topics like middleware, collections, and customizing Laravel's functionality.
BEM - CSS, Seriously
BEM - CSS, SeriouslyRoland Lösslein An in depth introduction to the BEM methodology and how to use it in the wild. The slides cover the key concepts of Block-Element-Modifier as well as their usage in HTML and CSS. Furthermore the presentation covers on how BEM can solve well-known CSS challenges.
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley An introduction to the changing world of CSS. Slides from Brisbane Web Designer Meetup 13 March 2013.
HTML CSS & Javascript
HTML CSS & JavascriptDavid Lindkvist - HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan 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.
Efficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley 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.
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket http://inarocket.com
Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.
Introduction to HTML
Introduction to HTMLAjay Khatri This document provides an introduction to HTML and covers several key topics:
1. It explains what HTML is and that it is the skeleton or structure of web pages, describing elements with markup tags.
2. It reviews important HTML tags like headings, paragraphs, links, images, and lists and how they are used to provide structure and semantics to text.
3. It also discusses other useful tags like comments and provides additional resources for further learning HTML.
Css
Cssshanmuga rajan This document provides an overview of Cascading Style Sheets (CSS) including:
- CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more.
- CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms.
- There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags.
- The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to
BEM It! for Brandwatch
BEM It! for BrandwatchMax Shirshin The document introduces the BEM (Block, Element, Modifier) methodology for organizing CSS, HTML, and JavaScript code into reusable components. It describes BEM as a semantic model that defines blocks, elements, and modifiers to structure interfaces. Blocks are standalone parts of an interface, elements are integral parts of blocks, and modifiers define block/element properties or states. The document provides examples of BEM naming conventions and discusses benefits like improved reusability, reduced specificity issues, and serving as a common language for designers and developers.
Sling models by Justin Edelson
Sling models by Justin Edelson AEM HUB This document discusses Sling Models, which provide a simplified way to adapt Sling resources into domain objects in AEM. Some key points:
- Sling Models allow resources to be adapted to POJOs with minimal code using annotations like @Model and @Inject. This is cleaner than previous "adapter factory" approaches.
- Common use cases like injecting resource properties, child resources, services and more are supported out of the box via standard injectors.
- Sling Models are pluggable, so custom injectors can be added to inject non-standard dependencies.
- They allow resources and requests to be adapted to either classes or interfaces, keeping domain objects simple POJOs.
Maintainable CSS
Maintainable CSSStephen Hay This document discusses how to write maintainable CSS through organizing CSS files according to a design language's components (e.g. layout, color), authoring semantic and portable CSS code using classes and IDs, and documenting CSS code and conventions either through inline comments or generated documentation from comment tags. It emphasizes organizing CSS files by concern rather than by site section, separating IE conditional code into separate files, using a system for declaration order and formatting for readability, and having an effective text editor for working with CSS code.
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
AEM Sightly Deep Dive
AEM Sightly Deep DiveGabriel Walt Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
Similar to Object Oriented CSS (20)
Object Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And ApplicationsPerconaPerformance The document discusses object-oriented CSS (OOCSS) as a way to improve performance, code reuse, and maintainability of CSS code for websites and applications. It outlines several principles of OOCSS including creating reusable CSS components, separating container and content rules, extending objects by applying multiple classes, avoiding location-dependent styles, and separating structure from skin. Examples are provided to illustrate these concepts. The goal of OOCSS is to write more modular, predictable and maintainable CSS code.
The Fast And The Fabulous
The Fast And The FabulousNicole Sullivan 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
Maintainable theming
Maintainable themingWunderkraut Learn how to do maintainable Drupal theming. This presentation was given at DrupalCamp Stockholm 2013
CSS Systems
CSS SystemsNatalie Downe http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan 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.
INTEGRATION (HTML/CSS) The technology behind AESTHETICS
INTEGRATION (HTML/CSS) The technology behind AESTHETICSSiddharth Lale This document is about HTML and CSS code written for integration. How to avid silly mistakes while writing a HTML / CSS code for developer
Design Fast Websites
Design Fast WebsitesNicole Sullivan 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.
Design Best Practices for WordPress
Design Best Practices for WordPressSuzette Franck The document provides best practices for designing WordPress websites, recommending that designers standardize layouts and formats to improve usability, maintenance, and search engine optimization while avoiding unnecessary complexity; it also discusses typography, responsive design, and tools like grids, media queries, and content management to create user-friendly, adaptable sites.
Web design-workflow
Web design-workflowPeter Kaizer This document discusses web design workflow and front-end development. It covers the layers of front-end development including HTML, CSS, JavaScript, grids, and frameworks. It also discusses designing static comps versus in the browser, the mobile revolution and responsive design. The document then discusses information architecture, wireframes, and the languages of web design including HTML, CSS, JavaScript. It also discusses grids, frameworks, SASS/LESS, and responsive design.
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopVero Rebagliatte 80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
Designing Special Feature Pages
Designing Special Feature PagesJackie Hai Creating a full-page multimedia feature, from design concept to coded implementation.
Presentation for the CoPress College Web Design Camp 2009, by Jackie Hai.
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindNadya Rodionenko 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.
Roadmap 01
Roadmap 01quangnv17071980 This document provides an overview of CSS (Cascading Style Sheets) and why it is important for web design. It discusses the benefits of CSS, including improved portability across devices, increased download speeds, and easier site maintenance. The document then provides steps for getting started with CSS, including planning layouts with CSS in mind, using simple building blocks, and testing designs across browsers. The overall purpose is to convince readers of the business and design advantages of using CSS for websites.
HICapacity UI talk by Kathryne Sakata
HICapacity UI talk by Kathryne Sakatahicapacity HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.
These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.
These are the UI slides
About Kathryne Sakata
====
Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds.
Event info: http://www.hicapacity.org/2013/05/23/ui-ux/
Sitting in the Driver's Seat
Sitting in the Driver's SeatJack Moffett This document discusses creating production-ready CSS. It emphasizes the benefits of an object-oriented CSS (OOCSS) approach, including reuse, separation of concerns, and maintainability. OOCSS involves designing CSS for future flexibility rather than immediate needs, and creating a library of reusable and well-documented components rather than long monolithic stylesheets. The document provides examples of OOCSS principles and recommends resources for further information.
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targeting, as well as solutions to modern browser bugs are covered.
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
OOCSS
OOCSSYoniWeb The document is a presentation about Object Oriented CSS (OOCSS). It discusses two major OOCSS principles: 1) Separating structure and skin and 2) Separating container and content. This allows websites to be built in a modular way using "Legos" of HTML, CSS, images and JavaScript that can be reused across a site. Following OOCSS principles results in faster sites with less CSS and happier users, developers, and clients. The presentation provides examples of OOCSS code and tips for implementation.
lecture2_public
lecture2_publictutorialsruby This document provides an overview of the Information Organization Lab class on September 8, 2009. It discusses installing necessary browser extensions, completing an online skills assessment, and joining the class mailing list. The lecture covers HTML, CSS, JavaScript, jQuery, and browser extensions like Greasemonkey. Students are asked to practice building the Delicious Trailmaker tutorial on their own, add a feature to it, and write their first Greasemonkey script before the next class. They are also instructed to come up with an idea for their first project.
Ad
More from Nicole Sullivan (12)
Building the Media Block in ReactJS 
Building the Media Block in ReactJS Nicole Sullivan the API is an interface that needs to be designed.
http://styleguide.pivotal.io/react_beta.html
https://www.npmjs.com/search?q=pui
Why are you here?
Why are you here?Nicole Sullivan A reflection on career and community. A call to follow your heart rather than some abstract notion of success.
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Don't feed the trolls
Don't feed the trollsNicole Sullivan 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.
CSS Power Tools
CSS Power ToolsNicole Sullivan 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
5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan 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.
CSS Wish List @JSConf
CSS Wish List @JSConfNicole Sullivan 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.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan 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.
Taming CSS Selectors
Taming CSS SelectorsNicole Sullivan 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.
Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan Quantifier et améliorer la performance de tout produit Yahoo! mondial avec Éric Daspet pour ParisWeb 2008
7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan The 7 Habits of Exceptional Performance discusses techniques for optimizing website performance. It recommends flushing the buffer early, using GET requests for AJAX, preloading components, avoiding filters, measuring performance metrics, and balancing new features with performance improvements. High performance should be baked into the development process from the start. Key metrics to track include page weight, response time, and HTTP requests.
After YSlow "A"
After YSlow "A"Nicole Sullivan The document discusses 20 additional best practices for improving web performance beyond the original 14 recommendations from YSlow. It covers techniques like flushing the buffer early, splitting components for post-loading, preloading necessary assets, reducing unnecessary DOM elements, optimizing images through techniques like converting to smaller file formats and using CSS sprites, and designing for mobile performance. The document provides examples and case studies to illustrate the recommendations and cites additional resources on web performance.
Ad
Recently uploaded (20)
Secret Disk Professional 2024.24 Crack With License Key [Latest]![Secret Disk Professional 2024.24 Crack With License Key [Latest]](https://cdn.slidesharecdn.com/ss_thumbnails/softwareengineering-250604190841-180afd0a-thumbnail.jpg?width=560&fit=bounds)
Secret Disk Professional 2024.24 Crack With License Key [Latest]salma Copy Link & Paste👉👉https://technicalworld.co/after-verification-click-go-to-download/
Secret Disk Professional Serial Key 2025 will show up as any some other disk in Windows. Our system will have a new disk instantly very rapidly
Nueva presentación para diapositivas de power point.pdf
Nueva presentación para diapositivas de power point.pdfSubaruKun1 Presenta plantillas para powerpoint
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]![AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]](https://cdn.slidesharecdn.com/ss_thumbnails/softwareengineering2-250604190126-9b2f868a-thumbnail.jpg?width=560&fit=bounds)
AnyMP4 DVD Ripper 8.1.12 + Crack Free Download [Latest 2025]salma Download Link👇👇👇
👉👉 https://technicalworld.co/click-to-download/
AnyMP4 DVD Ripper latest version have full command throughout the finished product thanks to these modifying options.
🎰 LABUAN4D – SLOT GACOR, CUAN TIAP HARI! 🎰 🔥 BONUS NEW MEMBER 50% – Modal REC...
🎰 LABUAN4D – SLOT GACOR, CUAN TIAP HARI! 🎰 🔥 BONUS NEW MEMBER 50% – Modal REC...Labuan 4D 🎰 LABUAN4D – SLOT GACOR, CUAN TIAP HARI! 🎰 🔥 BONUS NEW MEMBER 50% – Modal RECEH NAMUN HASIL GA RECEHAN ! 💰 JACKPOT PULUHAN BAHKAN RATUSAN JUTA !
AnyTrans for Android 7.3.0.20200910 with Crack Download [Latest]![AnyTrans for Android 7.3.0.20200910 with Crack Download [Latest]](https://cdn.slidesharecdn.com/ss_thumbnails/artificialintelligence2-250603094652-00bfd238-thumbnail.jpg?width=560&fit=bounds)
AnyTrans for Android 7.3.0.20200910 with Crack Download [Latest]Designer Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
AnyTrans for Android Crack AnyTrans for Android Crack Free Download is an impressive application for managing your contacts, photos, music, and applications on Android devices.
Internet Download Manager (IDM) Crack Free Download 2025
Internet Download Manager (IDM) Crack Free Download 2025Designer Copy Link & Paste in Google:👉👉👉 http://alipc.pro/dl
Internet Download Manager increases download speed with built-in download logic accelerator, resume and schedule downloads.
Low-Maintenance, High-Impact - Ash Joshi’s Approach to Effortless Landscaping
Low-Maintenance, High-Impact - Ash Joshi’s Approach to Effortless LandscapingAsh Joshi For many homeowners, the idea of a beautiful garden or yard is enticing—until reality sets in. Weekly mowing, seasonal pruning, watering schedules, pest control… the list of tasks can make even the most dedicated dreamer dread the upkeep.
AlterCam 6.2 Full Crack With License Key Free Download [2025]![AlterCam 6.2 Full Crack With License Key Free Download [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/softwareengineering1-250604190555-f6fe5e1b-thumbnail.jpg?width=560&fit=bounds)
AlterCam 6.2 Full Crack With License Key Free Download [2025]salma Copy Link & Paste👉👉https://technicalworld.co/after-verification-click-go-to-download/
AlterCam Crack is software will recognize entire of them though allow users to select which result user needed to perform the belongings upon.
Bio Cng Plant In Indore | FINSEN RITTER
Bio Cng Plant In Indore | FINSEN RITTERFINSENRITTER Make the waste pure fuel with our advanced Bio CNG Plant Manufacturers in Indore. FINSEN RITTER one of the largest manufacturers of agricultural machinery and high -quality plants that meet the energy requirements of farmers and agricultural -based industries. We make BIO -CNG high -quality systems that convert organic waste into environmentally friendly compressed natural gas, which helps companies to reduce the costs of protecting the environment. The selection of our products includes livestock manure and different types of plants that can produce renewable energy sources. FINSEN RITTER BIO -CNG plants provide a smart solution for permanent energy production. Manufactured with durable materials such as GFS and RC, these systems effectively treat organic waste and convert it into pure combustion of CNG fuel. This process not only reduces your carbon footprint but also cuts operating expenses significantly. We design Best BIO -CNG plants with processing skills up to 500 TPD to 500 TPD, making them suitable for all sizes of companies. Whether you are a small business or a large industrial facility, we have the right solution for your needs. Our BIO –CNG plants in Indore is fully in line with the government initiative, which has the government initiative, including continuous, cow dung and Kvic schemes, and gets you from the available accessible and support programs available. As a reliable BIO -CNG system exporters and suppliers, we serve customers throughout India with complete installation, commissioning and later support. Our expert team ensures easy integration with your current business. Save money and the environment with Bio CNG Plant Exporters and Suppliers in India. Connect with us Now
Dimensions of Presence in multiverse experiences_Luciana Jaalouk
Dimensions of Presence in multiverse experiences_Luciana JaaloukLucianaJaalouk1 Presence, Attention, this is just the start of the story on how attention plays, in a 3D game or in 3D reality.
Your presence and attention matter, it's not just a game.
I am a Digital Marketer and SEO Professional And an expert in Facebook Market...
I am a Digital Marketer and SEO Professional And an expert in Facebook Market...Milon Islam I am a Digital Marketer and SEO Professional And an expert in Facebook Marketing, Graphics Designing, Video Editing, Link Building, and Content Making. I have finished a long training from Outsourcing Institute on total Digital Marketing and participated in many practical projects. There I gathered lots of experience. Able to make practical and attractive web content to promote any product or business to millions of people worldwide. My work is exceptional because every work is done manually with my full responsibility and saif direction, Thanks.
Editor's Notes
- #2: Introductions - Nicole Sullivan, worked at yahoo, specialist in scalable high performance websites.
- #5: After which he said that “CSS is broken” Very common to say that CSS is broken when it is misunderstood. Emerging frameworks are a sign that CSS is broken. Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
- #6: couple years coding in the basement by yourself before you are remotely useful. Profession needs to accomodate entry level, mid level, and architect level developers. Frankly, I’m tired of writing rounded corner boxes. I’ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges.
- #7: New (different) html pages should be able to be built without modifying the CSS.
- #8: And for good reason. Currently there is no consistency or predictability.
- #9: Perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set.
- #12: yoga, balance metaphor
- #13: “Once upon a time...” pages to modules to objects
- #22: If we build new HTML pages from a component library, new pages won’t require new css. So what goes into a component library. First up, content objects.
- #23: Anything else that should be consistent site-wide.
- #26: media, media extended, wrap Open editable zone
- #28: presentational elements
- #38: function created to return area that occasionally returns the diameter instead.
- #52: not because you can’t do it everyone in this room could position something to the left and something else to the right. Also because, when working with beginners, they need not to figure out a brand new system with each module.
- #60: If ducati and saleMod both specify border, and the rules are the same strength, ducati should “win” as it is the last class specified.
- #61: Support for child element selectors would solve this, but would increase the length of the rules. E > F