SlideShare uma empresa Scribd logo
1 de 14
#styling-frameworks {

        /* Nelson Wong */
.overview {

• Current issues
• Strategy
• LESS
• Bootstrap
• Implementation plan
• Issues
.current-issues {

• Legacy CSS techniques
• CSS3 support in browsers (prefixes)
• Duplicate, redundant code (Tii, Pd)
• Inconsistent styling
• Unorganized code
• No design pattern library
.strategy {


• Best CSS practices
• LESS
• Bootstrap
• Design patterns & style guide for common
  components
.tii-panel {
.less {

•   Extends CSS, compiles into CSS

•   Makes writing and maintaining styles a breeze

•   Faster development

•   A lot less code

•   Encourages structured and organized code

•   Easy to learn and maintain

•   Backwards compatible with CSS
.variables {
.mixins {
.nested-rules {
.functions.operations {
.now-vs-less {
.bootstrap {

•   CSS Toolkit

•   Customizable grid

•   Nice base styles

•   Basic javascript components (jQuery)

•   Written in LESS

•   Good documentation / style guide

•   http://twitter.github.com/bootstrap/
.implementation-plan {

• FED support
  •   Compiling of LESS

  •   Isolate new stylesheet usage (Tii)

• Develop new stylesheet
  •   For new and existing components

  •   Existing HTML untouched

• Style guide / design pattern library
}

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

Make your CSS beautiful again
Make your CSS beautiful againMake your CSS beautiful again
Make your CSS beautiful again
 
Web
WebWeb
Web
 
Advanced Wordpress
Advanced WordpressAdvanced Wordpress
Advanced Wordpress
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Web presence presentation
Web presence presentationWeb presence presentation
Web presence presentation
 
AOS Canadian Tour SharePoint ECM
AOS Canadian Tour SharePoint ECMAOS Canadian Tour SharePoint ECM
AOS Canadian Tour SharePoint ECM
 

Destaque

Destaque (6)

BDD
BDDBDD
BDD
 
Styling frameworks
Styling frameworksStyling frameworks
Styling frameworks
 
Ch8
Ch8Ch8
Ch8
 
Programa erca jivd
Programa erca jivdPrograma erca jivd
Programa erca jivd
 
The human nervous system
The human nervous systemThe human nervous system
The human nervous system
 
58721516 kerangka-acuan-kerja-drainase
58721516 kerangka-acuan-kerja-drainase58721516 kerangka-acuan-kerja-drainase
58721516 kerangka-acuan-kerja-drainase
 

Semelhante a Styling frameworks v2

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkOmkarsoft Bangalore
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Pluginssuperann
 
Web programming css
Web programming cssWeb programming css
Web programming cssUma mohan
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Acquia
 
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...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
 
Rapid WordPress theme development
Rapid WordPress theme developmentRapid WordPress theme development
Rapid WordPress theme developmentJonny Allbut
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSJer Clarke
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter FilesEmily Lewis
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management SystemsDani Nordin
 
Using CSS Paging to Render DITA Documents
Using CSS Paging to Render DITA DocumentsUsing CSS Paging to Render DITA Documents
Using CSS Paging to Render DITA DocumentsContrext Solutions
 
NoSql - mayank singh
NoSql - mayank singhNoSql - mayank singh
NoSql - mayank singhMayank Singh
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap PresentationDuy Do Phan
 
Building a CSS Architecture for Design Systems
Building a CSS Architecture for Design SystemsBuilding a CSS Architecture for Design Systems
Building a CSS Architecture for Design SystemsChristina Truong
 

Semelhante a Styling frameworks v2 (20)

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
 
WordPress Themes and Plugins
WordPress Themes and PluginsWordPress Themes and Plugins
WordPress Themes and Plugins
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
 
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...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...
 
Rapid WordPress theme development
Rapid WordPress theme developmentRapid WordPress theme development
Rapid WordPress theme development
 
WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management Systems
 
Using CSS Paging to Render DITA Documents
Using CSS Paging to Render DITA DocumentsUsing CSS Paging to Render DITA Documents
Using CSS Paging to Render DITA Documents
 
Pertemuan 7
Pertemuan 7Pertemuan 7
Pertemuan 7
 
NoSql - mayank singh
NoSql - mayank singhNoSql - mayank singh
NoSql - mayank singh
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap Presentation
 
Building a CSS Architecture for Design Systems
Building a CSS Architecture for Design SystemsBuilding a CSS Architecture for Design Systems
Building a CSS Architecture for Design Systems
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
Less
LessLess
Less
 

Último

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 

Último (20)

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 

Styling frameworks v2

  • 1. #styling-frameworks { /* Nelson Wong */
  • 2. .overview { • Current issues • Strategy • LESS • Bootstrap • Implementation plan • Issues
  • 3. .current-issues { • Legacy CSS techniques • CSS3 support in browsers (prefixes) • Duplicate, redundant code (Tii, Pd) • Inconsistent styling • Unorganized code • No design pattern library
  • 4. .strategy { • Best CSS practices • LESS • Bootstrap • Design patterns & style guide for common components
  • 6. .less { • Extends CSS, compiles into CSS • Makes writing and maintaining styles a breeze • Faster development • A lot less code • Encourages structured and organized code • Easy to learn and maintain • Backwards compatible with CSS
  • 12. .bootstrap { • CSS Toolkit • Customizable grid • Nice base styles • Basic javascript components (jQuery) • Written in LESS • Good documentation / style guide • http://twitter.github.com/bootstrap/
  • 13. .implementation-plan { • FED support • Compiling of LESS • Isolate new stylesheet usage (Tii) • Develop new stylesheet • For new and existing components • Existing HTML untouched • Style guide / design pattern library
  • 14. }

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n