SlideShare una empresa de Scribd logo
1 de 37
Descargar para leer sin conexión
3 Ways to Create
  CSS Sprites
   With Rails
What Are Image
Sprites?
A great way to save
  HTTP requests.
In other words:

 Something that
makes your website
     faster. awes om
                     e!
Rails 3.1 > Integrated Spriting
CSS_Sprite > better <img>
Lemonade > Full CSS sprites
Finding Information




  http://www.drdobbs.com/blog/archives/2010/06/preparing_for_r.html
Few Information




http://blog.endpoint.com/2010/06/rails-3-at-railsconf-2010-code-goodness.html
A Piece of Code




   http://twitter.com/jsiarto/status/15861245321
Finally!


   http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
Generation Sprites
<%= sprite_css("icons") %>



★   Combines all images of a folder
★   Generates CSS
Using Images
<%= sprite_tag("icons/trash") %>



★   Adds a HTML tag with the class
                (I guess it works this way.)
Questions
★   Is it possible to pack CSS files?
★   Why “icons/trash” if image_tag requires
    “icons/trash.png”?
★   When will it be available?
Rails 3.1 > Integrated Spriting
CSS_Sprite > better <img>
Lemonade > Full CSS sprites
gem install
css_sprite
Features
★   Creates sprite images
★   Creates classes for each file
★   Sass compatible
★   Rake Task for generation
From Image to CCS
images under css_sprite directory                             class name in css_sprite css

twitter_icon.png                                              .twitter_icon

facebook_icon.png                                             .facebook_icon

hotmail-logo.png                                              .hotmail-logo

gmail-logo.png                                                .gmail-logo

icons/twitter_icon.png                                        .icons .twitter_icon

widget/icons/twitter_icon.png                                 .widget .icons .twitter_icon

twitter_icon_hover.png                                        .twitter_icon:hover

twitter-icon-hover.png                                        .twitter-icon:hover

logos_hover/gmail_logo.png                                    .logos:hover .gmail_logo

logos-hover/gmail-logo.png                                    .logos:hover .gmail-logo

…                                                             …




                                    full table at http://github.com/flyerhzm/css_sprite
Built Sprites (1)
rake css_sprite:build
Built Sprites (2)
rake css_sprite:start
Pros
★   Easy for HTML developers
★   Easy if you’re handling <img> tag
Cons
★   A lot of CSS generated (sizes, …)
★   Additional non-semantic tags
★   Additional classes
★   Positioned background images difficult
★   RMagick
★   Rake task
Alternatives
★   http://github.com/gistinc/sprite
    based on css_sprite
★   http://github.com/sblackstone/auto_sprite
    image_tag extention + CSS classes
★   http://github.com/setepo/css-sprites
    image_tag extention + inline CSS
Rails 3.1 > Integrated Spriting
CSS_Sprite > better <img>
Lemonade > Easy Sprites
gem install
 lemonade
Simple Sprites
.add {
  background:
    sprite-image("icons/pl.png");
}

.remove {
  background:
    sprite-image("icons/rm.png");
}
               all icons by p.yusukekamiyamane.com (CC by 3.0)
Output
.add {
  background:
    url("icons.png");
}

.remove {
  background:
    url("icons.png") 0 -16px;
}
Right Aligned
.something {
  background:
    sprite-image("i/wide.png");
}
a.next {
  background: yellow no-repeat
    sprite-image("i/n.png", 100%);
  padding-right: 20px;
}
Result
.something {
  background:
    url("i.png");
}
                  Example link
a.next {
  background: yellow no-repeat
    url("i.png") 100% -20px;
  padding-right: 20px;
}
Empty Space
.add {
  background:
    sprite-image("icons/pl.png");
}
.remove {
  background: yellow no-repeat
    sprite-image("icons/rm.png");
  padding: 20px;
}
Could be Better
.add {
  background:
    url("icons.png");
}
.remove {             Example link
  background:
    url("icons.png") 0 -16px;
  padding: 20px;
}
Empty Space
.add {
  background:
    sprite-image("icons/pl.png");
}
.remove {
  background: yellow no-repeat
    sprite-image("icons/rm.png",
       0, 0, 20px);
  padding: 20px; }
Just Perfect
.add {
  background:
    url("icons.png");
}
.remove {             Example link
  background:
    url("icons.png") 0 -36px;
  padding: 20px;
}
Sprite Generation
★   Sprite image named by directory:
    “icons/*.png” > “icons.png”

★   Background position added only if needed

★   Add “no-repeat” by yourself:
    background:
      sprite-image("…") no-repeat;
Any questions?
Happy forking:
http://github.com/flyerhzm/css_sprite
http://github.com/hagenburger/lemonade
last name
first name


             nico@hagenburger.net
    e-mail
              twitter
                        blog

Más contenido relacionado

La actualidad más candente

Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3 Wynn Netherland
 
Traceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14thTraceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14thCarsten Sandtner
 
Intro to CouchDB
Intro to CouchDBIntro to CouchDB
Intro to CouchDBbenaldred
 
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gemAccelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gemWynn Netherland
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sasspriyanka1452
 
Obscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite UsefulObscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite UsefulGraham Armfield
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)VIPIN KUMAR
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & CompassRob Davarnia
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Rachel Andrew
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVDirk Ginader
 
Locarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesLocarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesIkuru Kanuma
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"bentleyhoke
 
Distributed caching for your next node.js project cf summit - 06-15-2017
Distributed caching for your next node.js project   cf summit - 06-15-2017Distributed caching for your next node.js project   cf summit - 06-15-2017
Distributed caching for your next node.js project cf summit - 06-15-2017Viktor Gamov
 

La actualidad más candente (20)

Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
Variations on a Theme
Variations on a ThemeVariations on a Theme
Variations on a Theme
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
Traceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14thTraceur - Javascript.next - Now! RheinmainJS April 14th
Traceur - Javascript.next - Now! RheinmainJS April 14th
 
Intro to CouchDB
Intro to CouchDBIntro to CouchDB
Intro to CouchDB
 
Accelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gemAccelerated Native Mobile Development with the Ti gem
Accelerated Native Mobile Development with the Ti gem
 
LESS
LESSLESS
LESS
 
Capybara
CapybaraCapybara
Capybara
 
JSON and the APInauts
JSON and the APInautsJSON and the APInauts
JSON and the APInauts
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sass
 
Obscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite UsefulObscure Wordpress Functions That Are Actually Quite Useful
Obscure Wordpress Functions That Are Actually Quite Useful
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Locarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesLocarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript Libraries
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
 
Distributed caching for your next node.js project cf summit - 06-15-2017
Distributed caching for your next node.js project   cf summit - 06-15-2017Distributed caching for your next node.js project   cf summit - 06-15-2017
Distributed caching for your next node.js project cf summit - 06-15-2017
 

Similar a 3 ways-to-create-sprites-in-rails

Css sprite best practices
Css sprite best practicesCss sprite best practices
Css sprite best practicesRichard Huang
 
Css sprite_maker-1
Css  sprite_maker-1Css  sprite_maker-1
Css sprite_maker-1lokku
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign拓樹 谷
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Anna Migas
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion
 
Font End Development + Automation with Django
Font End Development + Automation with DjangoFont End Development + Automation with Django
Font End Development + Automation with DjangoEvan Reiser
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 
create-netflix-clone-06-client-ui_transcript.pdf
create-netflix-clone-06-client-ui_transcript.pdfcreate-netflix-clone-06-client-ui_transcript.pdf
create-netflix-clone-06-client-ui_transcript.pdfShaiAlmog1
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform wellAnna Migas
 
CreateJSの概要 + Animate CC 2018の新機能
CreateJSの概要 + Animate CC 2018の新機能CreateJSの概要 + Animate CC 2018の新機能
CreateJSの概要 + Animate CC 2018の新機能Yasunobu Ikeda
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
 
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军裕波 周
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Ontico
 

Similar a 3 ways-to-create-sprites-in-rails (20)

Css sprite best practices
Css sprite best practicesCss sprite best practices
Css sprite best practices
 
Css sprite_maker-1
Css  sprite_maker-1Css  sprite_maker-1
Css sprite_maker-1
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
High Performance Webdesign
High Performance WebdesignHigh Performance Webdesign
High Performance Webdesign
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Css3
Css3Css3
Css3
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
 
Font End Development + Automation with Django
Font End Development + Automation with DjangoFont End Development + Automation with Django
Font End Development + Automation with Django
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
create-netflix-clone-06-client-ui_transcript.pdf
create-netflix-clone-06-client-ui_transcript.pdfcreate-netflix-clone-06-client-ui_transcript.pdf
create-netflix-clone-06-client-ui_transcript.pdf
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform well
 
CreateJSの概要 + Animate CC 2018の新機能
CreateJSの概要 + Animate CC 2018の新機能CreateJSの概要 + Animate CC 2018の新機能
CreateJSの概要 + Animate CC 2018の新機能
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
 
LSM实践
LSM实践LSM实践
LSM实践
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
 

Último

Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 

Último (20)

Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 

3 ways-to-create-sprites-in-rails

  • 1. 3 Ways to Create CSS Sprites With Rails
  • 3. A great way to save HTTP requests.
  • 4. In other words: Something that makes your website faster. awes om e!
  • 5.
  • 6. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
  • 7. Finding Information http://www.drdobbs.com/blog/archives/2010/06/preparing_for_r.html
  • 9. A Piece of Code http://twitter.com/jsiarto/status/15861245321
  • 10. Finally! http://www.rubyinside.com/dhhs-railsconf-2010-keynote-video-a-justification-of-rails-3-0-3325.html
  • 11. Generation Sprites <%= sprite_css("icons") %> ★ Combines all images of a folder ★ Generates CSS
  • 12. Using Images <%= sprite_tag("icons/trash") %> ★ Adds a HTML tag with the class (I guess it works this way.)
  • 13. Questions ★ Is it possible to pack CSS files? ★ Why “icons/trash” if image_tag requires “icons/trash.png”? ★ When will it be available?
  • 14. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Full CSS sprites
  • 16. Features ★ Creates sprite images ★ Creates classes for each file ★ Sass compatible ★ Rake Task for generation
  • 17. From Image to CCS images under css_sprite directory class name in css_sprite css twitter_icon.png .twitter_icon facebook_icon.png .facebook_icon hotmail-logo.png .hotmail-logo gmail-logo.png .gmail-logo icons/twitter_icon.png .icons .twitter_icon widget/icons/twitter_icon.png .widget .icons .twitter_icon twitter_icon_hover.png .twitter_icon:hover twitter-icon-hover.png .twitter-icon:hover logos_hover/gmail_logo.png .logos:hover .gmail_logo logos-hover/gmail-logo.png .logos:hover .gmail-logo … … full table at http://github.com/flyerhzm/css_sprite
  • 18. Built Sprites (1) rake css_sprite:build
  • 19. Built Sprites (2) rake css_sprite:start
  • 20. Pros ★ Easy for HTML developers ★ Easy if you’re handling <img> tag
  • 21. Cons ★ A lot of CSS generated (sizes, …) ★ Additional non-semantic tags ★ Additional classes ★ Positioned background images difficult ★ RMagick ★ Rake task
  • 22. Alternatives ★ http://github.com/gistinc/sprite based on css_sprite ★ http://github.com/sblackstone/auto_sprite image_tag extention + CSS classes ★ http://github.com/setepo/css-sprites image_tag extention + inline CSS
  • 23. Rails 3.1 > Integrated Spriting CSS_Sprite > better <img> Lemonade > Easy Sprites
  • 24.
  • 26. Simple Sprites .add { background: sprite-image("icons/pl.png"); } .remove { background: sprite-image("icons/rm.png"); } all icons by p.yusukekamiyamane.com (CC by 3.0)
  • 27. Output .add { background: url("icons.png"); } .remove { background: url("icons.png") 0 -16px; }
  • 28. Right Aligned .something { background: sprite-image("i/wide.png"); } a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px; }
  • 29. Result .something { background: url("i.png"); } Example link a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px; }
  • 30. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px; }
  • 31. Could be Better .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -16px; padding: 20px; }
  • 32. Empty Space .add { background: sprite-image("icons/pl.png"); } .remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
  • 33. Just Perfect .add { background: url("icons.png"); } .remove { Example link background: url("icons.png") 0 -36px; padding: 20px; }
  • 34. Sprite Generation ★ Sprite image named by directory: “icons/*.png” > “icons.png” ★ Background position added only if needed ★ Add “no-repeat” by yourself: background: sprite-image("…") no-repeat;
  • 37. last name first name nico@hagenburger.net e-mail twitter blog