What is Object Oriented CSS?
138 likes43,179 views
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.
1 of 68
Recommended
Object Oriented CSS
Object Oriented CSSNicole Sullivan 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.
CSS For Backend Developers
CSS For Backend Developers10Clouds This handy “spellbook” prepared by our Frontend Developer Marta to provide guidance through the basic principles of CSS!
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 - 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.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke 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.
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.
Professional Css
Professional CssSubramanyan Murali The document discusses various techniques for writing professional CSS, including:
- CSS allows for rich styling and separates presentation from structure.
- Basic CSS rules include using selectors to style elements, grouping styles, and inheritance.
- More advanced selectors include class, ID, attribute, and pseudo-class selectors.
- The cascade, inheritance, and specificity determine which styles take precedence.
- Proper use of CSS structure, selectors, and rules allows for clean separation of concerns and maintainable styling.
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.
Initiation au html
Initiation au htmlAbdoulaye Dieng objectif général :Concevoir la structure sémantique du contenu d’un site web
objectifs opérationnels :
Formater du texte, des listes et des liens
Afficher une image simple ou cliquable
Établir un tableau
Concevoir un formulaire
Shadows Effects in CSS
Shadows Effects in CSSWebtech Learning This Presentation is based on the different effects of css like "box-shadow, text-shadow". We can also give these effects on the inner side of the text and any image or box.
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.
Flexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew This document provides an overview and examples of CSS Grids and Flexbox layout techniques. It discusses how Flexbox allows items to be laid out in a single direction row or column, and how CSS Grids enable two-dimensional page layouts using rows and columns. Examples are given for creating navigation menus, image galleries, and multi-column page designs using these new CSS properties. Media queries are also used to redefine grid layouts at different screen sizes.
Html 5
Html 5manujayarajkm HTML5 is the newest version of HTML that adds new semantic elements, built-in audio and video playback, and features like the canvas element for drawing graphics. It simplifies the syntax of earlier HTML versions and aims to make web pages more semantic, reduce the need for plugins, and work across devices. New elements in HTML5 include <header>, <footer>, <nav>, <video>, <audio>, <canvas>, and new form input types. It is still a work in progress with partial browser support.
Html & Css presentation 
Html & Css presentation joilrahat html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
jQuery for beginners
jQuery for beginnersArulmurugan Rajaraman Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies
HTML and Responsive Design 
HTML and Responsive Design Mindy McAdams An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Html introduction
Html introductionDalia Elbadry HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to annotate text, images, and other content for display in a web browser. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists. CSS can be used to style and lay out HTML elements.
Blazor - An Introduction
Blazor - An IntroductionJamieTaylor112 Blazor is a new web framework that allows web applications to be written in C# instead of JavaScript. It uses WebAssembly to run .NET code directly in the browser. Developers write Blazor apps using Razor components with HTML and C# code. At runtime, the Blazor runtime compiles the Razor components to WebAssembly, which generates the app's rendering tree and updates the DOM efficiently as the app runs. Blazor provides a way to build interactive client-side web UI using .NET instead of JavaScript.
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.
JavaScript Programming
JavaScript ProgrammingSehwan Noh The document provides an overview of JavaScript programming. It discusses the history and components of JavaScript, including ECMAScript, the DOM, and BOM. It also covers JavaScript basics like syntax, data types, operators, and functions. Finally, it introduces object-oriented concepts in JavaScript like prototype-based programming and early vs. late binding.
HTML & CSS Masterclass
HTML & CSS MasterclassBernardo Raposo This document provides an introduction to HTML and CSS. It discusses what HTML and CSS are used for, with HTML defining the content or structure of a document and CSS controlling the style. It outlines some of the most important HTML elements like <div>, <span>, <p>, and <h1-h6> and how they are used. It also introduces new HTML5 elements like <header>, <nav>, <section>, <article>, and <aside>. The document then discusses CSS selectors for targeting elements, properties for changing elements, and values. It notes that browsers have default styling and custom properties. Finally, it encourages keeping CSS simple and mentions available frameworks.
Dom html - java script
Dom html - java scriptDaniel Grippo El documento explica el modelo de objetos del documento (DOM), que permite representar cualquier página web como un árbol de nodos y objetos, y cómo JavaScript puede manipular el DOM para modificar el contenido, estructura y estilo de una página. Se describen las propiedades, métodos y eventos que ofrece el DOM para buscar, modificar y agregar/eliminar elementos HTML, y cómo se pueden manejar eventos del usuario con JavaScript.
Javascript
JavascriptMomentum Design Lab This document is a presentation about JavaScript that covers what JavaScript is, where it came from, and what it can do. It introduces JavaScript as a scripting language that is easy to use and learn and runs in web browsers. The presentation explains that JavaScript is unrelated to Java but borrows some naming conventions. It provides overviews of JavaScript basics like variables, operators, and functions, as well as more advanced topics like objects, events, and DOM manipulation.
ReactJS presentation
ReactJS presentationThanh Tuong Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerJayapal Reddy Nimmakayala HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website.
If you have any doubt contact me for more details. WhatsApp:8008877940
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.
CSS
CSSAkila Iroshan The document discusses various topics related to HTML, CSS, and client-side coding including: CSS selectors, properties, cascade, media queries, animations. It covers CSS syntax, selectors like type, ID, class, attribute, and pseudo selectors. It describes the box model and properties for text, background, positioning. It also explains cascade, specificity, inheritance in CSS and how media queries allow styling for different devices.
HTML5 & CSS3 
HTML5 & CSS3 Ian Lintner HTML was first defined by Tim Berners-Lee in 1991 and has evolved through several versions. HTML5 and CSS3 are the next generation standards that will enhance the richness and interactivity of web content. HTML5 introduces new semantic tags and APIs for multimedia, geolocation, and offline storage. CSS3 includes features for rounded corners, drop shadows, columns, animations, and media queries for responsive design. While legacy browsers present challenges, HTML5 and CSS3 will improve the functionality of the mobile web and make the interface of the web comparable to native applications.
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
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.
More Related Content
What's hot (20)
Initiation au html
Initiation au htmlAbdoulaye Dieng objectif général :Concevoir la structure sémantique du contenu d’un site web
objectifs opérationnels :
Formater du texte, des listes et des liens
Afficher une image simple ou cliquable
Établir un tableau
Concevoir un formulaire
Shadows Effects in CSS
Shadows Effects in CSSWebtech Learning This Presentation is based on the different effects of css like "box-shadow, text-shadow". We can also give these effects on the inner side of the text and any image or box.
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.
Flexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew This document provides an overview and examples of CSS Grids and Flexbox layout techniques. It discusses how Flexbox allows items to be laid out in a single direction row or column, and how CSS Grids enable two-dimensional page layouts using rows and columns. Examples are given for creating navigation menus, image galleries, and multi-column page designs using these new CSS properties. Media queries are also used to redefine grid layouts at different screen sizes.
Html 5
Html 5manujayarajkm HTML5 is the newest version of HTML that adds new semantic elements, built-in audio and video playback, and features like the canvas element for drawing graphics. It simplifies the syntax of earlier HTML versions and aims to make web pages more semantic, reduce the need for plugins, and work across devices. New elements in HTML5 include <header>, <footer>, <nav>, <video>, <audio>, <canvas>, and new form input types. It is still a work in progress with partial browser support.
Html & Css presentation
Html & Css presentation joilrahat html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
jQuery for beginners
jQuery for beginnersArulmurugan Rajaraman Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies
HTML and Responsive Design
HTML and Responsive Design Mindy McAdams An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Html introduction
Html introductionDalia Elbadry HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to annotate text, images, and other content for display in a web browser. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists. CSS can be used to style and lay out HTML elements.
Blazor - An Introduction
Blazor - An IntroductionJamieTaylor112 Blazor is a new web framework that allows web applications to be written in C# instead of JavaScript. It uses WebAssembly to run .NET code directly in the browser. Developers write Blazor apps using Razor components with HTML and C# code. At runtime, the Blazor runtime compiles the Razor components to WebAssembly, which generates the app's rendering tree and updates the DOM efficiently as the app runs. Blazor provides a way to build interactive client-side web UI using .NET instead of JavaScript.
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.
JavaScript Programming
JavaScript ProgrammingSehwan Noh The document provides an overview of JavaScript programming. It discusses the history and components of JavaScript, including ECMAScript, the DOM, and BOM. It also covers JavaScript basics like syntax, data types, operators, and functions. Finally, it introduces object-oriented concepts in JavaScript like prototype-based programming and early vs. late binding.
HTML & CSS Masterclass
HTML & CSS MasterclassBernardo Raposo This document provides an introduction to HTML and CSS. It discusses what HTML and CSS are used for, with HTML defining the content or structure of a document and CSS controlling the style. It outlines some of the most important HTML elements like <div>, <span>, <p>, and <h1-h6> and how they are used. It also introduces new HTML5 elements like <header>, <nav>, <section>, <article>, and <aside>. The document then discusses CSS selectors for targeting elements, properties for changing elements, and values. It notes that browsers have default styling and custom properties. Finally, it encourages keeping CSS simple and mentions available frameworks.
Dom html - java script
Dom html - java scriptDaniel Grippo El documento explica el modelo de objetos del documento (DOM), que permite representar cualquier página web como un árbol de nodos y objetos, y cómo JavaScript puede manipular el DOM para modificar el contenido, estructura y estilo de una página. Se describen las propiedades, métodos y eventos que ofrece el DOM para buscar, modificar y agregar/eliminar elementos HTML, y cómo se pueden manejar eventos del usuario con JavaScript.
Javascript
JavascriptMomentum Design Lab This document is a presentation about JavaScript that covers what JavaScript is, where it came from, and what it can do. It introduces JavaScript as a scripting language that is easy to use and learn and runs in web browsers. The presentation explains that JavaScript is unrelated to Java but borrows some naming conventions. It provides overviews of JavaScript basics like variables, operators, and functions, as well as more advanced topics like objects, events, and DOM manipulation.
ReactJS presentation
ReactJS presentationThanh Tuong Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerJayapal Reddy Nimmakayala HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website.
If you have any doubt contact me for more details. WhatsApp:8008877940
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.
CSS
CSSAkila Iroshan The document discusses various topics related to HTML, CSS, and client-side coding including: CSS selectors, properties, cascade, media queries, animations. It covers CSS syntax, selectors like type, ID, class, attribute, and pseudo selectors. It describes the box model and properties for text, background, positioning. It also explains cascade, specificity, inheritance in CSS and how media queries allow styling for different devices.
HTML5 & CSS3
HTML5 & CSS3 Ian Lintner HTML was first defined by Tim Berners-Lee in 1991 and has evolved through several versions. HTML5 and CSS3 are the next generation standards that will enhance the richness and interactivity of web content. HTML5 introduces new semantic tags and APIs for multimedia, geolocation, and offline storage. CSS3 includes features for rounded corners, drop shadows, columns, animations, and media queries for responsive design. While legacy browsers present challenges, HTML5 and CSS3 will improve the functionality of the mobile web and make the interface of the web comparable to native applications.
Similar to What is Object Oriented CSS? (20)
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
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.
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.
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.
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.
CSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
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.
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson This document discusses using CSS preprocessors like LESS, Sass, and Stylus to build mobile web apps. It covers getting started with Sass and Compass, using variables, operations, nesting, mixins, and other Sass features. It also discusses object-oriented CSS techniques like separating structure and skin, and container and content. The goal is to speed up front-end workflows and make CSS reusable, modular, and scalable.
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.
Css methods architecture
Css methods architectureLasha Sumbadze The document discusses CSS architecture methodology called ITCSS (Inverted Triangle CSS). ITCSS involves visualizing CSS projects as a layered inverted triangle with the following properties: from generic to explicit styles, low specificity to high specificity, and far-reaching to localized selectors. This hierarchical structure is meant to improve scalability, maintainability, and reduce conflicts. The document also discusses object-oriented CSS methodology, separating structure from skin, avoiding location-dependent styles, and using classes, mixins, extends, and preprocessors to improve reusability.
What is Modular CSS?
What is Modular CSS?Scott Vandehey This document discusses the benefits of modular CSS and different methodologies for implementing it. It notes that CSS at scale can be difficult to understand, reuse, and maintain without modularity. It then explains Object-Oriented CSS (OOCSS), Block Element Modifier (BEM), and Scalable and Modular Architecture for CSS (SMACSS) as approaches for creating reusable, self-contained CSS modules. The key principles across these methodologies are separating components into logical blocks, elements, and modifiers; using descriptive naming conventions; and avoiding nesting and IDs. Following modular best practices makes CSS more predictable, maintainable, and performant at any scale.
Modular HTML & CSS Turbo Workshop
Modular HTML & CSS Turbo WorkshopShay Howe All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc Advanced CSS Tricks maximizes the use of CSS as a styling language and provides better user experience for your website and maximize the performance.
Slow kinda sucks
Slow kinda sucksTim Wright This document provides an overview of Object Oriented CSS (OOCSS), HTML5, and web performance. It discusses what OOCSS is, how to implement it, and why it is useful. It also briefly covers some HTML5 forms and communication features. Finally, it examines how to improve website speed. The goal is to look at these topics and discuss elegant and lean CSS as opposed to "fat sack of crap" code.
CSS - Basics
CSS - BasicsShubham_Saurabh The document provides an overview of CSS (Cascading Style Sheets) including what CSS is, its syntax, how to apply CSS, commonly used CSS properties, grouping and nesting selectors, floats for page layout, at-rules like @import and @media, and answers some questions. The agenda covers topics like syntax, applying CSS inline, internally, and externally, selectors, properties and values, units, colors including gradients, text styling, backgrounds, shadows, margins and padding, borders, class and ID selectors, grouping selectors, nesting properties, pseudo-classes, floats for layouts, and different at-rules.
SMACSS Workshop
SMACSS WorkshopTim Hettler The document discusses a scalable and modular architecture for CSS that involves categorizing styles into base, layout, module, and state categories. This approach helps make CSS more flexible, maintainable, and avoids overly specific selectors. Key aspects include naming conventions, limiting the depth of styles, and using child selectors. An example of a "media object" pattern is provided to demonstrate how abstracting styles into reusable modules can significantly reduce code. While this approach goes against some conventional wisdom, it separates structure and skin while promoting reusability.
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble This document provides an overview of HTML5 best practices for mobile design. It begins with introductions and outlines the session agenda. The presenter then discusses high-level principles like universal design and progressive enhancement. Specific techniques covered include viewport meta tags, media queries, scalable images, HTML5 tags, and touch-friendly guidelines. CSS topics include grids, backgrounds, gradients, and transitions. JavaScript behaviors like navigation, forms, and geolocation are also reviewed. Useful frameworks, polyfills, and testing tools are presented. The overall message is that mobile design requires an adaptive, user-centered approach through careful content structuring, responsive presentation, and unobtrusive behavior.
Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs Don't be fooled, CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now.
Intro to OOCSS Workshop
Intro to OOCSS WorkshopJulie Cameron Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.
Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
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
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.
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.
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
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.
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.
Recently uploaded (20)
MuleSoft RTF & Flex Gateway on AKS – Setup, Insights & Real-World Tips
MuleSoft RTF & Flex Gateway on AKS – Setup, Insights & Real-World TipsPatryk Bandurski This presentation was delivered during the Warsaw MuleSoft Meetup in April 2025.
Paulina Uhman (PwC Polska) shared her hands-on experience running MuleSoft Runtime Fabric (RTF) and Flex Gateway on Azure Kubernetes Service (AKS).
The deck covers:
What happens after installation (pods, services, and artifacts demystified)
Shared responsibility model: MuleSoft vs Kubernetes
Real-world tips for configuring connectivity
Key Kubernetes commands for troubleshooting
Lessons learned from practical use cases
🎙️ Hosted by: Patryk Bandurski, MuleSoft Ambassador & Meetup Leader
💡 Presented by: Paulina Uhman, Integration Specialist @ PwC Polska
TAFs on WebDriver API - By - Pallavi Sharma.pdf
TAFs on WebDriver API - By - Pallavi Sharma.pdfPallavi Sharma This Presentation details different test automation frameworks available on Selenium WebDriver, and some directly on WebDriver.
Build your own NES Emulator... with Kotlin
Build your own NES Emulator... with KotlinArtur Skowroński For those who have ever wanted to recreate classic games, this presentation covers my five-year journey to build a NES emulator in Kotlin. Starting from scratch in 2020 (you can probably guess why), I’ll share the challenges posed by the architecture of old hardware, performance optimization (surprise, surprise), and the difficulties of emulating sound. I’ll also highlight which Kotlin features shine (and why concurrency isn’t one of them). This high-level overview will walk through each step of the process—from reading ROM formats to where GPT can help, though it won’t write the code for us just yet. We’ll wrap up by launching Mario on the emulator (hopefully without a call from Nintendo).
A simple Introduction to Algorithmic Fairness
A simple Introduction to Algorithmic FairnessPaolo Missier Algorithmic bias and its effect on Machine Learning models.
Simple fairness metrics and how to achieve them by fixing either the data, the model, or both
AI Unboxed - How to Approach AI for Maximum Return
AI Unboxed - How to Approach AI for Maximum ReturnMerelda Keynote for a client.
In this session, Merelda addressed common misconceptions about AI technologies, particularly the confusion between Predictive AI and Generative AI, and provided clarity on when to use each. Predictive AI analyzes historical data to forecast future outcomes, while Generative AI creates new content, from text to images, rapidly. Understanding the differences between these technologies is crucial for making informed, strategic decisions.
She introduced the three archetypes of AI adoption: Takers, Shapers, and Makers, inviting the audience to identify which role their organisation plays. Based on these archetypes, she presented industry-specific examples relevant to Schauenburg’s portfolio, showcasing how Predictive AI can drive operational efficiency (e.g., predicting equipment maintenance), while Generative AI enhances customer interactions (e.g., generating technical documents).
The session received a 10/10 rating from attendees for its practical insights and immediate applicability.
The fundamental misunderstanding in Team Topologies
The fundamental misunderstanding in Team TopologiesPatricia Aas In this talk I will break down the argument presented in the book and argue that it is fundamentally ill-conceived, building on weak and erroneous assumptions. And that this leads to a "solution" that is not only flawed, but outright wrong, and might cost your organization vast sums of money for far inferior results.
John Carmack’s Slides From His Upper Bound 2025 Talk
John Carmack’s Slides From His Upper Bound 2025 TalkRazin Mustafiz Source: https://docs.google.com/presentation/d/1GmGe9ref1nxEX_ekDuJXhildpWGhLEYBMeXCclVECek/edit?usp=sharing
PSEP - Salesforce Power of the Platform.pdf
PSEP - Salesforce Power of the Platform.pdfssuser3d62c6 This PDF document is a presentation for the Salesforce Partner Success Enablement Program (PSEP), focusing on the "Power of the Platform." It highlights Salesforce’s core platform capabilities, including customization, integration, automation, and scalability. The deck demonstrates how partners can leverage Salesforce’s robust tools and ecosystem to build innovative business solutions, accelerate digital transformation, and drive customer success. It serves as an educational resource to empower partners with knowledge about the platform’s strengths and best practices for solution development and deployment.
GraphSummit Singapore Master Deck - May 20, 2025
GraphSummit Singapore Master Deck - May 20, 2025Neo4j GraphSummit Singapore Master Deck - May 20, 2025
Pushing the Limits: CloudStack at 25K Hosts
Pushing the Limits: CloudStack at 25K HostsShapeBlue Boris Stoyanov took a look at a load testing exercise conducted in the lab. Discovered how CloudStack performs with 25,000 hosts as we explore response times, performance challenges, and the code improvements needed to scale effectively
--
The CloudStack European User Group 2025 took place on May 8th in Vienna, Austria. The event once again brought together open-source cloud professionals, contributors, developers, and users for a day of deep technical insights, knowledge sharing, and community connection.
Is Your QA Team Still Working in Silos? Here's What to Do.
Is Your QA Team Still Working in Silos? Here's What to Do.marketing943205 Often, QA teams find themselves working in silos: the mobile team focused solely on app functionality, the web team on their portal, and API testers on their endpoints, with limited visibility into how these pieces truly connect. This separation can lead to missed integration bugs that only surface in production, causing frustrating customer experiences like order errors or payment failures. It can also mean duplicated efforts, communication gaps, and a slower overall release cycle for those innovative F&B features everyone is waiting for.
If this sounds familiar, you're in the right place! The carousel below, "Is Your QA Team Still Working in Silos?", visually explores these common pitfalls and their impact on F&B quality. More importantly, it introduces a collaborative, unified approach with Qyrus, showing how an all-in-one testing platform can help you break down these barriers, test end-to-end workflows seamlessly, and become a champion for comprehensive quality in your F&B projects. Dive in to see how you can help deliver a five-star digital experience, every time!
Planetek Italia Corporate Profile Brochure
Planetek Italia Corporate Profile BrochurePlanetek Italia Srl Planetek Italia is an Italian Benefit Company established in 1994, which employs 130+ women and men, passionate and skilled in Geoinformatics, Space solutions, and Earth science.
We provide solutions to exploit the value of geospatial data through all phases of data life cycle. We operate in many application areas ranging from environmental and land monitoring to open-government and smart cities, and including defence and security, as well as Space exploration and EO satellite missions.
NVIDIA’s Enterprise AI Factory and Blueprints_ Paving the Way for Smart, Scal...
NVIDIA’s Enterprise AI Factory and Blueprints_ Paving the Way for Smart, Scal...derrickjswork In a landmark step toward making autonomous AI agents practical and production-ready for enterprises, NVIDIA has launched the Enterprise AI Factory validated design and a set of AI Blueprints. This initiative is a critical leap in transitioning generative AI from experimental projects to business-critical infrastructure.
Designed for CIOs, developers, and AI strategists alike, these new offerings provide the architectural backbone and application templates necessary to build AI agents that are scalable, secure, and capable of complex reasoning — all while being deeply integrated with enterprise systems.
RDM Training: Publish research data with the Research Data Repository
RDM Training: Publish research data with the Research Data RepositoryCSUC - Consorci de Serveis Universitaris de Catalunya Presentació del curs "Publicar dades de recerca amb el Repositori de Dades de Recerca (en anglès)
I’d like to resell your CloudStack services, but...
I’d like to resell your CloudStack services, but...ShapeBlue In this session, Brian Turnbow went over the process and challenges faced onboarding a whitelabel reseller into their CloudStack offering. What happens when a potential customer wants to use his own IP addresses and bandwidth, his ecommerce and his brand name?
--
The CloudStack European User Group 2025 took place on May 8th in Vienna, Austria. The event once again brought together open-source cloud professionals, contributors, developers, and users for a day of deep technical insights, knowledge sharing, and community connection.
Introducing High Availability: Business Continuity for Every NAS User
Introducing High Availability: Business Continuity for Every NAS UserQNAP Marketing Slidedeck for Introducing High Availability: Business Continuity for Every NAS User Webinar hosted by QNAP (May 20, 2025)
Assurance Best Practices: Unlocking Proactive Network Operations
Assurance Best Practices: Unlocking Proactive Network OperationsThousandEyes Presented by Marcus Sarmento and Saakshi Gusain
RDM Training: Publish research data with the Research Data Repository
RDM Training: Publish research data with the Research Data RepositoryCSUC - Consorci de Serveis Universitaris de Catalunya
Editor's Notes
- #8: 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.
- #9: 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.
- #13: Modular CSS is a great idea in theory, but in practice...
- #16: Nothing is shared between modules, each reinvents the CSS wheel. Wastefully file sizes and http requests grow and...
- #17: What is ... ?
- #21: lists, headings, etc should all be global
- #22: grids
- #23: contours X backgrounds X content objects = complexity 1 X foo bar X 1 2 X 4 = 8 HTTP req 5 X 5 = 25 HTTP req
- #24: Classes on object we wish to extend.
- #27: media, media extended, wrap Open editable zone
- #28: media, media extended, wrap Open editable zone
- #30: media, media extended, wrap Open editable zone
- #52: function created to return area that occasionally returns the diameter instead.
- #60: There is a general belief in CSS development that there are many ‘right’ ways. This isn’t always true.
- #63: Each time you analyze a solution, there are three main metrics that should be considered.