Managing CSS for a big ass website - at Netlog

•

10 likes•4,654 views

Lennart Schoors

presented at Barcamp Antwerp 4, September 11, 2010

Technology

Managing CSS for a

BIG ASS
WEBSITE
– at Netlog –
Lennart Schoors

Me
. web designer at Netlog
http://www.netlog.com

. blog at http://lensco.be

How big is big ass?
. 100.000.000 visitors/month
. 3.000.000.000 pageviews/month
. more than 1.500 templates
. lots of traffic & lots of different pages
. 3 designers (vs. ~15 developers)

Environment
Staging Live
. full, commented . minified
. seperate files . concatenated
. about 60 CSS files . about 40 CSS files
. in SVN . 3-4 files/page max
. served from CDN

netlog.css
. the engine
. about 150kb
. used sitewide on nearly every page

netlog.css consists of (1/3)

. netlog.core.css
. css reset, typography (all of it), basic
elements & headings, common classes
like left, right, clearfix, clear, lists, …
. netlog.common.css
. "grid", boxes, building blocks &
widgets, navigation, tabs, status
messages, dialogs

$netlog.css consists of (2/3) . netlog.icons.css & netlog.ui.css . images sprites . use text clippings to expand “icon” to <img src="{top.__static}/s/i/common/blank.gif" class="icon icon " alt="" />$

$bonus tip . hover & selected states for icon sprites <img src="{top.__static}/s/i/common/blank.gif" class="icon iconDelete iconOn" alt="" /> <img src="{top.__static}/s/i/common/blank.gif" class="icon iconDeleteAlt iconOff" alt="" />$

netlog.css consists of (3/3)

. netlog.wrapper.css
. header & footer styles
. netlog.forms.css
. buttons & inputs, form layouts, …
. netlog.ads.css

Other files
. seperate file per “vertical”
. seperate files for certain features
. IE6 & IE7 styles via conditional comments
. Right-to-left styles for RTL languages
. mobile
. external widgets

Our code
. lots of comments
. headings & subheadings
. indentation

. emphasis on classes & combing them
<a href="/foo" class="button buttonSmall buttonRed
buttonCapitals inline">bar</a>

. shift the load from always downloaded
CSS to take-what-you-need HTML
. “new pages don't need new css”

Some call it ...

“OOCSS”
... but CSS is not programming ;-)

Deploy script
. check diff
. combines & minifies specified files
. rsync to our servers
. sync to CDN

Dealing with cache
. deploy bumps version number in config
http://v.netlogstatic.com/v6.00/3077/s/c/netlog.css

. now global, soon per file

That’s all folks!
Questions?

Read on at http://lensco.be

What's hot

Fundamental CSS3

Css

Css3 Presetation

Creative Web 2 - CSS

Twitter bootstrap training_session_ppt

html & css

Html Styles-CSS

Lecture 1

Comparisons of web languages

Evelyn Loh

Lecture6 web design and development

Rafi Haidari

What's hot (10)

Fundamental CSS3

Css

Css3 Presetation

Creative Web 2 - CSS

Twitter bootstrap training_session_ppt

html & css

Html Styles-CSS

Lecture 1

Comparisons of web languages

Lecture6 web design and development

Similar to Managing CSS for a big ass website - at Netlog

CSS

Rohit Verma ....

Bootstrap 3

McSoftsis

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...

Yandex

Pfnp slides

William Myers

Exploring Critical Rendering Path

Raphael Amorim

Vskills certified css designer Notes

Vskills

A Complete Guide to Frontend - UI Developer

nariyaravi

Responsive content

honzie

Introduction to BOOTSTRAP

Jeanie Arnoco

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4

Erin M. Kidwell

html5_css3

Sindh Madresatul Islam University

Sass Essentials at Mobile Camp LA

Jake Johnson

Building high performing web pages

Nilesh Bafna

Html css workshop, lesson 0, how browsers work

Albino Tonnina

Sitecore 10 XC SXA frontend development using the SXA Storefront Branded

Serge van den Oever

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...

Roni Banerjee

Web technologies part-2

Michael Anthony

CSS Methodology

Zohar Arad

Video at http://www.youtube.com/watch?v=HaJnhYPLvx0 Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do. Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed. The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely. With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave. A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether. http://2013.drupalcamplondon.co.uk/session/death-themer

Death of a Themer

James Panton

Css

Sumit Gupta

Similar to Managing CSS for a big ass website - at Netlog (20)

CSS

Bootstrap 3

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...

Pfnp slides

Exploring Critical Rendering Path

Vskills certified css designer Notes

A Complete Guide to Frontend - UI Developer

Responsive content

Introduction to BOOTSTRAP

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4

html5_css3

Sass Essentials at Mobile Camp LA

Building high performing web pages

Html css workshop, lesson 0, how browsers work

Sitecore 10 XC SXA frontend development using the SXA Storefront Branded

“Good design is obvious. Great design is transparent.” — How we use Bootstrap...

Web technologies part-2

CSS Methodology

Death of a Themer

Css

Recently uploaded

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

Following the popularity of “Cloud Revolution: Exploring the New Wave of Serverless Spatial Data,” we’re thrilled to announce this much-anticipated encore webinar. In this sequel, we’ll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you’re building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Angeliki Cooney has spent over twenty years at the forefront of the life sciences industry, working out of Wynantskill, NY. She is highly regarded for her dedication to advancing the development and accessibility of innovative treatments for chronic diseases, rare disorders, and cancer. Her professional journey has centered on strategic consulting for biopharmaceutical companies, facilitating digital transformation, enhancing omnichannel engagement, and refining strategic commercial practices. Angeliki's innovative contributions include pioneering several software-as-a-service (SaaS) products for the life sciences sector, earning her three patents. As the Senior Vice President of Life Sciences at Avenga, Angeliki orchestrated the firm's strategic entry into the U.S. market. Avenga, a renowned digital engineering and consulting firm, partners with significant entities in the pharmaceutical and biotechnology fields. Her leadership was instrumental in expanding Avenga's client base and establishing its presence in the competitive U.S. market.

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Angeliki Cooney

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

[BuildWithAI] Introduction to Gemini.pdf

Sandro Moreira

Dubai, known for its towering skyscrapers, luxurious lifestyle, and relentless pursuit of innovation, often finds itself in the global spotlight. However, amidst the glitz and glamour, the emirate faces its own set of challenges, including the occasional threat of flooding. In recent years, Dubai has experienced sporadic but significant floods, disrupting normalcy and posing unique challenges to its infrastructure. Among the critical nodes in this bustling metropolis is the Dubai International Airport, a vital hub connecting the world. This article delves into the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Orbitshub

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Zilliz

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

AXA XL - Insurer Innovation Award Americas 2024

The Digital Insurer

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Zilliz

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Passkeys: Developing APIs to enable passwordless authentication Cody Salas, Sr Developer Advocate | Solutions Architect - Yubico Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...

apidays

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

Accelerating FinTech Innovation: Unleashing API Economy and GenAI Vasa Krishnan, Chief Technology Officer - FinResults Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

apidays

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Recently uploaded (20)