SlideShare a Scribd company logo
How could we handle Style in
ReactNative?
Agenda
What CSS Design System is
7 points for handling Style
The way to organize and handle our styles
Think with the information architecture of our app
What CSS Design System is
What is System?
CSS Design System is
The kind of CSS Design System
7 points for handling Style
1. Understanding how Style works in ReactNative
2. Maintainable / Scalable
3. Readable / Easy to use
4. No sideEffect
5. Optimization
6. Cross platform
7. CSS methodology
Understanding how Style works in ReactNative
Stylesheet Object
Making once, Use everytime
Select styles from ID (HashTable)
create(), flatten()
Maintainable, Scalable, Readable and Scoping
1. Making valuables about Style
2. Modular Programming
3. Refer to CSS methodology
4. Using Platform and Helper which detect DeviceInfo
The way to organize and handle our styles
Stateless Functional Component
High Order Component
StyleProvider
I want to say that Making design system
for just only our app!
Drawing the flow about design system and have a disscusion
Step back and look at the Big Picture.
Think with the information architecture of our
app

More Related Content

Similar to Css system

Similar to Css system (20)

Design Systems
Design SystemsDesign Systems
Design Systems
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Three ways to apply design principles in practice
Three ways to apply design principles in practiceThree ways to apply design principles in practice
Three ways to apply design principles in practice
 
11 Strategic Considerations for SharePoint Migrations #SPSVB
11 Strategic Considerations for SharePoint Migrations #SPSVB11 Strategic Considerations for SharePoint Migrations #SPSVB
11 Strategic Considerations for SharePoint Migrations #SPSVB
 
Using Sencha Touch to build Cross-platform HTML5 Apps - FITC Screens 2011
Using Sencha Touch to build Cross-platform HTML5 Apps - FITC Screens 2011Using Sencha Touch to build Cross-platform HTML5 Apps - FITC Screens 2011
Using Sencha Touch to build Cross-platform HTML5 Apps - FITC Screens 2011
 
FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform H...
FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform H...FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform H...
FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform H...
 
CSS for Design Systems
CSS for Design SystemsCSS for Design Systems
CSS for Design Systems
 
Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
 
Wordpress Workflow
Wordpress Workflow Wordpress Workflow
Wordpress Workflow
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
CSS Interview Questions for Fresher and Experience
CSS Interview Questions for Fresher and Experience CSS Interview Questions for Fresher and Experience
CSS Interview Questions for Fresher and Experience
 
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStartIntro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
 
MERN Stack Developer Course Syllabus
MERN Stack Developer Course Syllabus MERN Stack Developer Course Syllabus
MERN Stack Developer Course Syllabus
 
Compass n Sass
Compass n SassCompass n Sass
Compass n Sass
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
Aaug sample slides
Aaug sample slidesAaug sample slides
Aaug sample slides
 
MANAGE STATIC RESOURCES IN SITECORE IN HELIX WAY
MANAGE STATIC RESOURCES IN SITECORE IN HELIX WAYMANAGE STATIC RESOURCES IN SITECORE IN HELIX WAY
MANAGE STATIC RESOURCES IN SITECORE IN HELIX WAY
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
 

More from 성훈 백 (6)

GDSC_백성훈.pdf
GDSC_백성훈.pdfGDSC_백성훈.pdf
GDSC_백성훈.pdf
 
Frontend test-environment 이해하기
Frontend test-environment 이해하기Frontend test-environment 이해하기
Frontend test-environment 이해하기
 
GraphQL이란?
GraphQL이란?GraphQL이란?
GraphQL이란?
 
Es6 module
Es6 moduleEs6 module
Es6 module
 
CSS와 BEM
CSS와 BEMCSS와 BEM
CSS와 BEM
 
CSS Rendering - 1
CSS Rendering - 1CSS Rendering - 1
CSS Rendering - 1
 

Recently uploaded

Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns
 
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdfMastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
mbmh111980
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
Alluxio, Inc.
 

Recently uploaded (20)

Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 
Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024
 
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
 
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfA Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdfMastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
 
Studiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting softwareStudiovity film pre-production and screenwriting software
Studiovity film pre-production and screenwriting software
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdf
 
iGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by SkilrockiGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by Skilrock
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdf
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
 
AI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in Michelangelo
 

Css system

  • 1. How could we handle Style in ReactNative?
  • 2. Agenda What CSS Design System is 7 points for handling Style The way to organize and handle our styles Think with the information architecture of our app
  • 3. What CSS Design System is What is System? CSS Design System is The kind of CSS Design System
  • 4. 7 points for handling Style 1. Understanding how Style works in ReactNative 2. Maintainable / Scalable 3. Readable / Easy to use 4. No sideEffect 5. Optimization 6. Cross platform 7. CSS methodology
  • 5. Understanding how Style works in ReactNative Stylesheet Object Making once, Use everytime Select styles from ID (HashTable) create(), flatten()
  • 6. Maintainable, Scalable, Readable and Scoping 1. Making valuables about Style 2. Modular Programming 3. Refer to CSS methodology 4. Using Platform and Helper which detect DeviceInfo
  • 7. The way to organize and handle our styles Stateless Functional Component High Order Component StyleProvider
  • 8. I want to say that Making design system for just only our app! Drawing the flow about design system and have a disscusion
  • 9. Step back and look at the Big Picture. Think with the information architecture of our app