SlideShare a Scribd company logo
1 of 85
Download to read offline
Bridging the gap between 
developers and designers at 
the Guardian
Who is this conference for?
Who is this conference for? 
The ones who write code
Who is this conference for? 
The ones who write code 
The ones who don’t
Who is this conference for? 
The ones who write code 
The ones who don’t 
The ones who use CSS pre-processors
Who is this conference for? 
The ones who write code 
The ones who don’t 
The ones who use CSS pre-processors 
The ones who never heard of them
Mars Climate Orbiter 
23 September 1999
theguardian.com
github.com/guardian/frontend
github.com/guardian/frontend 
66 contributors
github.com/guardian/frontend 
~30 engi6n6e ecrosn ttoriubcuht oHrTsML/CSS
github.com/guardian/frontend 
~30 en~g2i56n 60e e0cro0sn lttionriuebcsuh ot oHf rCTsSMSL/CSS
github.com/guardian/frontend 
~30 en~g2i56n R60e ee0clro0esna ltstionreiue bccsuyh oct olHfe rCT sSMSL/CSS 
~4 times per day
 
 
 
Designers 
 
 Product Manager 
Engineers 
 
Editorial 
 
UX Designer 

Idea
Idea
Idea 
Prototype
Idea 
Prototype
Idea 
Prototype 
Test
Prototype 
Idea Test
@kaelig 
Our context
@kaelig 
Our context 
Lots of contributors
@kaelig 
Our context 
Lots of contributors 
Different skill sets
@kaelig 
Our context 
Lots of contributors 
Different skill sets 
People speaking different languages
@kaelig 
Our context 
Lots of contributors 
Different skill sets 
People speaking different languages 
We release early and often
@kaelig 
Our context 
Lots of contributors 
Different skill sets 
People speaking different languages 
We release early and often 
We want to keep it that way
Scala 
Developer tools 
Play! 
Grunt 
Sass 
Bower 
RequireJS 
AWS 
Node.js 
Selenium 
Webdriver 
Ruby 
TeamCity 
GitHub 
PhantomJS 
Angular 
Beer
Scala 
AWS 
Developer tools 
Play! 
Bower 
Grunt Sass RequireJS 
Node.js 
Selenium 
Webdriver 
Ruby 
TeamCity 
GitHub 
PhantomJS 
Angular 
Beer
sass-lang.com 
@kaelig
The colour for the article’s headline is “light grey” 
@kaelig
@kaelig
$c-brandBlue: #005689; 
@kaelig
$c-brandBlue: #005689; 
.nav { background: $c-brandBlue; } 
@kaelig
$c-brandBlue: #005689; 
.nav { background: $c-brandBlue; } 
@kaelig 
.nav { background: #005689; }
Takeaways 
@kaelig
Takeaways 
• Code is a communication tool (here, 
thanks to variables) 
@kaelig
Takeaways 
• Code is a communication tool (here, 
thanks to variables) 
• A pre-processor avoids constant copy 
and pasting of specific values 
@kaelig
Breakpoints 
@kaelig
@kaelig
@media (min-width: 37.5em) {} 
@kaelig
@media (min-width: 37.5em) {} 
@media (min-width: $tablet) {} 
@kaelig
@media (min-width: 37.5em) {} 
@media (min-width: $tablet) {} 
@include mq(tablet) {} 
@kaelig
@media (min-width: 37.5em) {} 
@media (min-width: $tablet) {} 
@include mq(tablet) {} 
@include mq(tablet, desktop) {} 
@kaelig
@media (min-width: 37.5em) {} 
@media (min-width: $tablet) {} 
@include mq(tablet) {} 
@include mq(tablet, desktop) {} 
@include mq($to: tablet) {} 
@kaelig
sass-mq 
git.io/sass-mq 
• Reusable @media query abstraction 
• A breakpoint has a name, instead of 
being called by its width 
• Simplifies cross-browser support (IE8) 
@kaelig
sass-mq: example 
CSS 
.nav { 
background: #005689; 
} 
@media all and (min-width: 37.5em) { 
.nav { 
background: transparent; 
} 
} 
Sass 
.nav { 
background: $c-brandBlue; 
! 
@include mq($from: tablet) { 
background: transparent; 
} 
}
sass-mq: example 
Sass 
CSS 
.nav { 
background: $c-brandBlue; 
! 
@include mq($from: tablet) { 
background: transparent; 
} 
} 
.nav { 
background: #005689; 
} 
@media all and (min-width: 37.5em) { 
.nav { 
background: transparent; 
} 
}
Naming breakpoints 
$mq-breakpoints: ( 
mobile: 320px, 
tablet: 740px, 
desktop: 980px, 
wide: 1300px 
); 
@kaelig
Naming breakpoints 
mobile vs S 
tablet vs M 
desktop vs L 
wide vs XL 
@kaelig
Takeaways 
@kaelig
Takeaways 
• Technically complex things can be 
made much simpler looking 
@kaelig
Takeaways 
• Technically complex things can be 
made much simpler looking 
• Taking time to code small tools can 
actually be super productive 
@kaelig
The grid 
@kaelig
4 to 16 60px columns 
Gutter: 20px 
Outer margins: 
< 480px: 10px 
>= 480px: 20px
A column, a gutter… 
How much is that in pixels? 
@kaelig
.element { 
width: 220px; 
} 
@media (min-width: 56.25em) { 
.element { 
width: 540px; 
} 
} 
3 columns by default, 
then 7 columns on 
desktops
https://github.com/guardian/guss-grid-system @kaelig
.element { 
width: gs-span(3); 
} 
@include mq(desktop) { 
.element { 
width: gs-span(7); 
} 
} 
3 columns by default, 
then 7 columns on 
desktops
Basing breakpoints on the grid 
@kaelig
$right-column: gs-span(4); 
$left-column: gs-span(2); // Grows to 3 columns on wide viewports 
$left-column-wide: gs-span(3); 
! 
$mq-breakpoints: ( 
mobile: gs-span(4) + $gs-gutter, // 320px 
tablet: gs-span(9) + $gs-gutter*2, // 740px 
desktop: gs-span(12) + $gs-gutter*2, // 980px 
wide: gs-span(16) + $gs-gutter*2, // 1300px 
! 
// Tweakpoints 
mobileLandscape: gs-span(6) + $gs-gutter, // 480px 
! 
// Content 
rightCol: gs-span(11) + $gs-gutter*2, // 900px 
leftCol: gs-span(13) + $gs-gutter*2, // 1060px 
! 
// Facia 
faciaLeftCol: gs-span(14) + $gs-gutter*2 // 1140px 
); 
@kaelig
Takeaways 
@kaelig
Takeaways 
• Machines can (must) do maths, so you 
don’t have to 
@kaelig
Takeaways 
• Machines can (must) do maths, so you 
don’t have to 
• The sum of the parts does not equal the 
whole (grid system + breakpoints) 
@kaelig
20px/28px bolder 
16px/20px normal 
32px/36px normal 
14px/18px normal 
14px/18px normal 
32px/36px normal 
14px/18px normal 
14px/18px normal 
16px/20px normal 
text sans 12px/16px 
text sans 12px/16px 
20px/24px normal
? 
? 
? 
@kaelig
CSS 
Type scale example 
Sass 
.element { 
.element font-size: { 
16px; 
@line-include height: fs-header(20px; 
1); 
} 
font-family: "Guardian Egyptian Headline", Georgia, serif; 
font-weight: 900; 
}
CSS 
Type scale example 
Sass 
.element { 
@include fs-header(1); 
} 
.element { 
font-size: 16px; 
line-height: 20px; 
font-family: "Guardian Egyptian Headline", Georgia, serif; 
font-weight: 900; 
}
20px/28px bolder 
16px/20px normal 
32px/36px normal 
14px/18px normal 
14px/18px normal 
32px/36px normal 
14px/18px normal 
14px/18px normal 
16px/20px normal 
text sans 12px/16px 
text sans 12px/16px 
20px/24px normal
Header 3 
Headline 2 
Headline 1 
Headline 6 
Headline 1 
Headline 1 
Headline 2 
Headline 6 
Text Sans 1 
Text Sans 1 
Headline 3 
Headline 1
Isn’t this putting a cap on creativity?
Takeaways 
@kaelig
Takeaways 
• When no naming convention is in 
place, you can get together and set a 
new one 
@kaelig
Takeaways 
• When no naming convention is in 
place, you can get together and set a 
new one 
• Putting design principles into in code 
can improve UI consistency 
@kaelig
Prototype 
Idea Test 
@kaelig 
Design 
system 
Design 
system 
Design 
system
Design 
system 
@kaelig 
Prototype 
Idea Test
Bridge the gap between 
developers and designers 
@kaelig 
Credits: 
Mars Climate Orbiter 2 — By NASA/JPL/Corby Waste [Public domain], via Wikimedia Commons — http://commons.wikimedia.org/wiki/File 
%3AMars_Climate_Orbiter_2.jpg 
Hipster — Cámara espía — https://flic.kr/p/cXMuEd 
Mug — slavik_V — https://flic.kr/p/9WgM9D 
swiss style grid sample — Filipe Varela — https://flic.kr/p/4xLDb1 
Gene Wilburn — A Splash of Colour — https://flic.kr/p/5VK8kv 
Glasses designed by Okan Benn from the Noun Project 
Document designed by Jamison Wieser from the Noun Project

More Related Content

What's hot

Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova PresentationSteve Zyglowicz
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesRenato Iwashima
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSTrevor Pierce
 
What makes me "Grunt"?
What makes me "Grunt"? What makes me "Grunt"?
What makes me "Grunt"? Fabien Doiron
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsifyvaluebound
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllTodd Moy
 
Don't sh** in the Pool
Don't sh** in the PoolDon't sh** in the Pool
Don't sh** in the PoolChris Jean
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsNetguru
 
Plugins at WordCamp Phoenix
Plugins at WordCamp PhoenixPlugins at WordCamp Phoenix
Plugins at WordCamp PhoenixAndrew Ryno
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraWalter Ebert
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.Vladimir Roudakov
 
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017Bartek Igielski
 

What's hot (18)

Atomic Design con Pattern Lab
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern Lab
 
Crazy sassy
Crazy sassyCrazy sassy
Crazy sassy
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSSReact Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
 
What makes me "Grunt"?
What makes me "Grunt"? What makes me "Grunt"?
What makes me "Grunt"?
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsify
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
 
Don't sh** in the Pool
Don't sh** in the PoolDon't sh** in the Pool
Don't sh** in the Pool
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
 
Plugins at WordCamp Phoenix
Plugins at WordCamp PhoenixPlugins at WordCamp Phoenix
Plugins at WordCamp Phoenix
 
Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
 
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
Magento 2 Front-end performance tips & tricks - Nomadmage September 2017
 

Viewers also liked

Viewers also liked (20)

BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and Mustard
 
Le marche de la publicite digitale2015 (1)
Le marche de la publicite digitale2015 (1)Le marche de la publicite digitale2015 (1)
Le marche de la publicite digitale2015 (1)
 
Numerique et nouveaux business models
Numerique et nouveaux business modelsNumerique et nouveaux business models
Numerique et nouveaux business models
 
Web to-store- geolocalisation et personnalisation
Web to-store- geolocalisation et personnalisationWeb to-store- geolocalisation et personnalisation
Web to-store- geolocalisation et personnalisation
 
Marketing digital, nouvellestendances
Marketing digital, nouvellestendancesMarketing digital, nouvellestendances
Marketing digital, nouvellestendances
 
E - logistique
E - logistiqueE - logistique
E - logistique
 
Marketing digital, lesfondamentaux
Marketing digital, lesfondamentauxMarketing digital, lesfondamentaux
Marketing digital, lesfondamentaux
 
Que permet le digital en marketing ?
Que permet le digital en marketing ?Que permet le digital en marketing ?
Que permet le digital en marketing ?
 
Le mix marketing a l'heure du digital
Le mix marketing a l'heure du digitalLe mix marketing a l'heure du digital
Le mix marketing a l'heure du digital
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3
 
Les noms de domaine
Les noms de domaineLes noms de domaine
Les noms de domaine
 
Presentación2
Presentación2Presentación2
Presentación2
 
Programaci n orientada_a_objetos_usando_java_1_to_40
Programaci n orientada_a_objetos_usando_java_1_to_40Programaci n orientada_a_objetos_usando_java_1_to_40
Programaci n orientada_a_objetos_usando_java_1_to_40
 
Time Period of Transcendentalism
Time Period of TranscendentalismTime Period of Transcendentalism
Time Period of Transcendentalism
 
Instagram
InstagramInstagram
Instagram
 
Ccnet
CcnetCcnet
Ccnet
 
Hotpotatoes
HotpotatoesHotpotatoes
Hotpotatoes
 
Caso mp3
Caso mp3Caso mp3
Caso mp3
 
C:\fakepath\capitulo 5 software
C:\fakepath\capitulo 5 softwareC:\fakepath\capitulo 5 software
C:\fakepath\capitulo 5 software
 
Baptism
BaptismBaptism
Baptism
 

Similar to Bridging the gap between designers and developers at the Guardian

MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Scala facile jug summer camp 2017
Scala facile   jug summer camp 2017Scala facile   jug summer camp 2017
Scala facile jug summer camp 2017Philippe Charrière
 
Going to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGoing to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGuillaume Laforge
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdfAll Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdfChris Swan
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAidan Foster
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESSjsmith92
 
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
QConNY 2023 - Implementing OSSF Scorecards Across an OrganisationQConNY 2023 - Implementing OSSF Scorecards Across an Organisation
QConNY 2023 - Implementing OSSF Scorecards Across an OrganisationChris Swan
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development정윤 김
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
Padrino is agnostic
Padrino is agnosticPadrino is agnostic
Padrino is agnosticTakeshi Yabe
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comKaelig Deloumeau-Prigent
 
GraphFrames Access Methods in DSE Graph
GraphFrames Access Methods in DSE GraphGraphFrames Access Methods in DSE Graph
GraphFrames Access Methods in DSE GraphJim Hatcher
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridRachel Andrew
 

Similar to Bridging the gap between designers and developers at the Guardian (20)

MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Scala facile jug summer camp 2017
Scala facile   jug summer camp 2017Scala facile   jug summer camp 2017
Scala facile jug summer camp 2017
 
Going to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGoing to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific Languages
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdfAll Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
All Day DevOps 2023 - Implementing OSSF Scorecards Across an Organisation.pdf
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
 
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
QConNY 2023 - Implementing OSSF Scorecards Across an OrganisationQConNY 2023 - Implementing OSSF Scorecards Across an Organisation
QConNY 2023 - Implementing OSSF Scorecards Across an Organisation
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
Sass compass
Sass compassSass compass
Sass compass
 
Padrino is agnostic
Padrino is agnosticPadrino is agnostic
Padrino is agnostic
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
GraphFrames Access Methods in DSE Graph
GraphFrames Access Methods in DSE GraphGraphFrames Access Methods in DSE Graph
GraphFrames Access Methods in DSE Graph
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 

More from Kaelig Deloumeau-Prigent

State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)Kaelig Deloumeau-Prigent
 
State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)Kaelig Deloumeau-Prigent
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianKaelig Deloumeau-Prigent
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianKaelig Deloumeau-Prigent
 
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCResponsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCKaelig Deloumeau-Prigent
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleKaelig Deloumeau-Prigent
 
Temps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementTemps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementKaelig Deloumeau-Prigent
 
Optimisation des performances d'un site web
Optimisation des performances d'un site webOptimisation des performances d'un site web
Optimisation des performances d'un site webKaelig Deloumeau-Prigent
 

More from Kaelig Deloumeau-Prigent (11)

State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)
 
State of the Sass - The Mixin (May 2016)
State of the Sass - The Mixin (May 2016)State of the Sass - The Mixin (May 2016)
State of the Sass - The Mixin (May 2016)
 
State of the Sass - The Mixin
State of the Sass - The MixinState of the Sass - The Mixin
State of the Sass - The Mixin
 
State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
 
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBCResponsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
Temps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementTemps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencement
 
Optimisation des performances d'un site web
Optimisation des performances d'un site webOptimisation des performances d'un site web
Optimisation des performances d'un site web
 

Recently uploaded

Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecturerahul_net
 
1C_PNS.pdf Philippines National standard
1C_PNS.pdf Philippines National standard1C_PNS.pdf Philippines National standard
1C_PNS.pdf Philippines National standardraffietividad53
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfkalichargn70th171
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxReal-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxRTS corp
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Angel Borroy López
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencessuser9e7c64
 
Comparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfComparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfDrew Moseley
 
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)jennyeacort
 
Sending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdfSending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdf31events.com
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingOpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingShane Coughlan
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...Technogeeks
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 

Recently uploaded (20)

Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprise
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecture
 
1C_PNS.pdf Philippines National standard
1C_PNS.pdf Philippines National standard1C_PNS.pdf Philippines National standard
1C_PNS.pdf Philippines National standard
 
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxReal-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conference
 
Comparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfComparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdf
 
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)
 
Sending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdfSending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdf
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingOpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 

Bridging the gap between designers and developers at the Guardian