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

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 

Último (20)

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 

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