Building a living styleguide using React & Styled-components

•

0 gefällt mir•112 views

Vikram Ramanujam

Leverage React, or other Javascript frameworks with Storybook & Styled-components to build a living styleguide

Software

#KLJS #styled-components #storybook
Using React, styled-components & storybook

#KLJS #styled-components #storybook
Tech Lead & Pixel Pusher, BAE Systems Applied Intelligence
vik@ramanuj.am | https://vik.ramanuj.am | @piggyslasher

#KLJS #styled-components #storybook
● Share code - Logic & UI
● Less duplication, redundancy,
code, bugs
● More consistency
● Encapsulate logic into
components
● Share components visually
● Reap benefits!

#KLJS #styled-components #storybook
● Share code - Logic & UI
● Avoid duplication, redundancy
● Less code, less bugs
● Consistency
● Less work later
● Encapsulate logic into
components
● Share components
● Reap benefits!
● Encapsulation
● Sharing
I.e. presentational components, not smart components a.k.a
containers!

#KLJS #styled-components #storybook
1994, before CSS

#KLJS #styled-components #storybook
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
By Perezpriego

#KLJS #styled-components #storybook
SASS

#KLJS #styled-components #storybook
CSS is getting better...

#KLJS #styled-components #storybook
Browsers will be supporting this natively as the CSS specs are
implemented.

#KLJS #styled-components #storybook
Legacy CSS importing...

#KLJS #styled-components #storybook
Legacy CSS importing… CSS is in external stylesheet

#KLJS #styled-components #storybook
Inline styling - notice the camelCase.

#KLJS #styled-components #storybook
● Allowed tight encapsulation
● Still relied on external
stylesheets
● Devs still used SASS, Less,
PostCSS to build styles
● Was co-created by Glen
Maddern, the co-creator of
styled-components...

#KLJS #styled-components #storybook
Traditional CSS/HTML ->
Credit: CSS-Tricks

#KLJS #styled-components #storybook
Using CSS Modules ->
Credit: CSS-Tricks

#KLJS #styled-components #storybook
The output ->
Generated HTML
Credit: CSS-Tricks
Generated CSS

#KLJS #styled-components #storybook
● Built on the lessons learnt from
CSS Modules
● Doesn’t need an external build
toolset
● Conceptually tallies with the
Component age - you’ll see why
:)

#KLJS #styled-components #storybook
It’s just a better developer experience

#KLJS #styled-components #storybook
Creating buttons...

#KLJS #styled-components #storybook
Creating buttons… sorry, wrong talk.

#KLJS #styled-components #storybook
Nick Babich

#KLJS #styled-components #storybook
Manipulating the appearance… the traditional way.

#KLJS #styled-components #storybook
Credit: Max Stoiber

#KLJS #styled-components #storybook
PDF Styleguide

#KLJS #styled-components #storybook
Aim - Component library,
hosted & visible to:
● UX
● Your team
● Your project
● Test / QA
● (OSS && ‘The World’)

#KLJS #styled-components #storybook
The Storybook knobs addon… lets you play with props!

#KLJS #styled-components #storybook
A match made in heaven, not just in the React world!

#KLJS #styled-components #storybook
● A github repo & webpackbin for you to play about with.
● Styled-components.com
● An introduction to styled-components with Glen Maddern
● Glen Maddern - Styling React Apps with Styled Components
●

Weitere ähnliche Inhalte

Ähnlich wie Building a living styleguide using React & Styled-components

Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/ In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.

The Future is Modular, Jonathan Snook

Future Insights

Slow kinda sucks

Tim Wright

Continuous Integration gehört in den meisten Unternehmen mittlerweile zum guten Ton, oft aber nur mit Blick auf die Server-Seite. Dabei kommt heute keine Anwendung mehr ohne Frontend-Code aus. Dieser wird - gerade im Enterprise-Bereich - oft vernachlässigt. In diesem Vortrag wird ein CI-Setup mit Fokus auf das Frontend vorgestellt. Automatisierte Tests, Sourcecode Quality Management und andere typische Bestandteile sind für den Frontend-Code genauso wichtig wie für das Backend. Durch Asset-Optimierung kann die Performance, gerade für mobile Clients, deutlich gesteigert werden. Gezeigt werden Tools, Methoden und Best Practices für den Aufbau und die Umsetzung der Delivery-Pipeline. Zum Einsatz kommen dabei Grunt, ESLint, Mocha und Jenkins.

EnterJS 2015 - Continuous Integration for Frontend Code

Marcel Birkner

Using a CSS Framework

Gareth Saunders

Magento x codekit x sass x compass x skeleton responsive grid

Arush Sehgal

Understanding the Web Page Layout

Jhaun Paul Enriquez

Be German About Your Frontend

Arush Sehgal

The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017

Matt Raible

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...

Horacio Gonzalez

Creating a unified user experience across multiple applications at a large company is a daunting task. Most projects work in silos with different designers and developers re-creating UX patterns for each project. Standards guides are developed for best practices, but are hard to share and keep updated across projects. Enter Web Components: little snippets of web code that follow standards, promote accessibility, and can be easily shared. Rather than building standards docs, start building web components that all your teams can leverage. Stop setting standards and start building them!

Ensuring Design Standards with Web Components

John Riviello

A presentation from J and Beyond 2018 in Cologne, Germany. In this session, Crystal of Lucid Fox will walk you through the steps she took to build Akeeba FEF, a CSS framework that Akeeba now uses to ensure their extensions are consistent with their brand across Joomla, WordPress, and standalone PHP software. You’ll learn about creating a design system, writing CSS in a way that’s easily maintained and upgraded, and tips on implementing this system across multiple platforms.

Not Just a Pretty Face: How to design and build a cross-CMS CSS framework

crystalenka

Modeling Rich Narrative Content

Jeff Eaton

An Unexpected Solution to Microservices UI Composition

Dr. Arif Wider

Delivering client sites - KC2015

Ilesh Mistry

Get this Course https://www.udemy.com/javascript-course-projects/?couponCode=SLIDESHARE Portfolio builder loaded with projects and applications that you can use, extend on and enhance to add to your portfolio JUST GOT BIGGER - more updates to come - YOU FOUND IT Grow your portfolio - showcase what you can build with JavaScript Learn JavaScript have fun with interactive and dynamic web applications. Over 529 downloadable resources - 57 articles - 43+ hours on-demand video, 57 Sections Over 614 HD video lessons Over 51+ projects and web applications. Projects can be used as started projects to extend and enhance. All JavaScript focused. 4 downloadable ebook guides 200 pages and 3 x 60 pages - with code and resource links No libraries JUST JAVASCRIPT and JAVASCRIPT DOM This is the course you've been looking for.......... Everything you need to get started with JavaScript, expand your knowledge about using JavaScript, and more included. It’s arrived, and bigger than expected!!! For anyone who wants to supercharge their JavaScript learning - building and applying JavaScript to over 50 projects and challenges… this course is for YOU!!!! From JavaScript beginners to all levels, course is presented in a fun interactive format that will challenge you. Move through the lessons of the course as you want to learn them, variety of ways to benefit from it. Learn alongside, try before you see the solution, try after you view the solution. It’s up to you! Unique format for learning encouraging you to try the code. Of course source code is included in every step of the way. Most often asked for ARE PROJECTS - and this course delivers! Over 50 and will grow over time as more projects and challenges get added. You can select the projects you want to do or take them in order, it’s up to you. Loaded with games and so many mini projects guaranteed to help you learn more about JavaScript and DOM manipulation. All JavaScript code no libraries or short cuts. Explore how to apply JavaScript to create interactive and dynamic web content - that will impress your friends. Extend on the projects and add them to your portfolio, to showcase skills you have learned. Useful real world projects coded with simple JavaScript for developers of all levels. No better way to learn than to try the code and produce something fun and useful with it. Learn to create amazing things with JavaScript bringing your web content to life. This will keep you busy and provide you the opportunity to learn and experiment with code. Try it. All the projects are designed in a starter type format so that you can build on them and customize to make it your own. Portfolio Builder 50+ projects This course includes full introduction to coding with JavaScript, all core syntax and how to apply it to make things happen. Create your own code - loaded with challenges and code snippets.

Monster JavaScript Course - 50+ projects and applications

Laurence Svekis ✔

Performance matters and probably everyone hears that 1-second delay in page response can result in a 7% reduction in conversion, translating it to sales, potentially you are going to lose $2.5 million every year if your store is making $100.000 per day. Even the best-optimized back-end solution can be ruined by the bunch of JavaScript libraries or even just not optimised images. It’s really easy to forget about front-end performance or let you clients ruin it just by adding unoptimized content and tons of tracking scripts. I’ll show you a way to easily measure the Magento 2 front-end performance and how to find and eliminate bottlenecks. The talk will also cover common mistakes and show how different configuration options will affect page load and user experience.

Magento 2 Front-end performance tips & tricks - Meet Magento Romania 2017

Bartek Igielski

The Zachman Framework and enterprise architecture. An enterprise consists of many components. They are categorized and organized into groups like organizations, locations and so on. The components also relate to each other in some manner. Each enterprise has a unique set of components and set of relationships that differentiate one enterprise from another. There needs to be some framework that that provides rules for how the components of an enterprise are organized.

Zachman Framework and the Periodic Table: A Fun Romp Through Some Basic Frame...

KnowledgeConsultants

We take great care in our back end coding workflow, optimising, automating and abstracting as much as is possible. So why don't we do that with our front end code? We'll take a look at some tools to help us take our front end workflow to the next level, and hopefully optimise our load times in the process! We'll be looking at using Twig templates and optimising them for the different areas of your application, integrating Bower and Gulp for managing assets and processing our front-end code to avoid repetitive tasks - looking at how that impacts the typical Symfony workflow.

Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp

Matthew Davis

Highly Maintainable, Efficient, and Optimized CSS

Zoe Gillenwater

CSS Workflow. Pre & Post

Anton Dosov

Ähnlich wie Building a living styleguide using React & Styled-components (20)

The Future is Modular, Jonathan Snook

Slow kinda sucks

EnterJS 2015 - Continuous Integration for Frontend Code

Using a CSS Framework

Magento x codekit x sass x compass x skeleton responsive grid

Understanding the Web Page Layout

Be German About Your Frontend

The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...

Ensuring Design Standards with Web Components

Not Just a Pretty Face: How to design and build a cross-CMS CSS framework

Modeling Rich Narrative Content

An Unexpected Solution to Microservices UI Composition

Delivering client sites - KC2015

Monster JavaScript Course - 50+ projects and applications

Magento 2 Front-end performance tips & tricks - Meet Magento Romania 2017

Zachman Framework and the Periodic Table: A Fun Romp Through Some Basic Frame...

Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp

Highly Maintainable, Efficient, and Optimized CSS

CSS Workflow. Pre & Post

Kürzlich hochgeladen

Foundation models are machine learning models which are easily capable of performing variable tasks on large and huge datasets. FMs have managed to get a lot of attention due to this feature of handling large datasets. It can do text generation, video editing to protein folding and robotics. In case we believe that FMs can help the hospitals and patients in any way, we need to perform some important evaluations, tests to test these assumptions. In this review, we take a walk through Fms and their evaluation regimes assumed clinical value. To clarify on this topic, we reviewed no less than 80 clinical FMs built from the EMR data. We added all the models trained on structured and unstructured data. We are referring to this combination of structured and unstructured EMR data or clinical data.

Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...

harshavardhanraghave

A great deal of attention in medical devices has shifted towards cybersecurity with the ratification of section 524B of the FD&C act. This new law enables the FDA to enforce cybersecurity controls in any medical device that is capable of networked communications or that has software. In this webinar we will recap the process for managing vulnerabilities, identify categories of vulnerabilities and solutions and more.

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...

ICS

Software Quality Assurance Interview Questions

Arshad QA

(Vivek)Call Us, 8448380779,Call girls in Delhi NCr – We Offer best in class call girls. escort Service At Affordable Price At low Rate with Space Night 8000 We Are One Of The Oldest Escort and Call girls Agencies in Delhi. You Will Find That Our Female Escorts Are Full Of Fun, Sexy And They Would Love Enjoy Your Company. We Have A Fantastic Selection Of Escort Ladies Available For In-Calls As Well As Out-Calls. Our Escorts Are Not Only Beautiful But All Have Great Personalities Making Them The Perfect Companion For Any Occasion. In-Call:- You Can Come At Our Place in Delhi Our place Which Is Very Clean Hygienic 100% safe Accommodation. Out-Call:- You have To Come Pick The Girl From My Place We Are Also Provide Door Step Services (Delhi Ncr, Noida, Gurgaon, Faridabad, Ghaziabad Note:- Pic Collectors Time Passers Bargainers Stay Away As We Respect The Value For Your Money Time And Expect The Same From You Hygienic:- Full Ac room And Clean Rooms Available In Hotel 24 * 7 Hourly In Delhi NCR More Details, With WhatsApp Number, +91-8448380779

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

Delhi Call girls

How To Use Server-Side Rendering with Nuxt.js

Andolasoft Inc

Unlocking the Future of AI Agents with Large Language Models

aagamshah0812

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf

VishalKumarJha10

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

Philip Schwarz

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

Delhi Call girls

How To Troubleshoot Collaboration Apps for the Modern Connected Worker

ThousandEyes

Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...

OnePlan Solutions

Craft an AI & Machine Learning Pitch with our Editable Professional PowerPoint Template. Ignite your AI & Machine Learning pitch with our cutting-edge PowerPoint template tailored for the industry. Perfect for AI conferences, investor presentations, sales pitches to tech-focused companies, training sessions, and educational programs. - 20+ editable slides: Get a variety of options to choose from for your presentation. - Time-saving solution: Download, replace text/images with a few clicks. - User-friendly customization: Easy to use and personalize. - Modern and attractive design: Captivating visuals, sleek layout. - Tailored to your requirements: Fully alterable for customization. - Well-organized slides: Complete control over content. - Thematic specificity: Reflects healthcare industry with relevant graphics. - Showcase your business idea: Communicate value proposition effectively.

AI & Machine Learning Presentation Template

Presentation.STUDIO

A Secure and Reliable Document Management System is Essential.docx

ComplianceQuest1

Investing in AI transformation today The modern business advantage: Uncovering deep insights with AI Organizations around the world have come to recognize AI as the transformative technology that enables them to gain real business advantage. AI’s ability to organize vast quantities of data allows those who implement it to uncover deep business insights, augment human expertise, drive operational efficiency, transform their products, and better serve their customers

Microsoft AI Transformation Partner Playbook.pdf

Willy Marroquin (WillyDevNET)

Looking to embark on a digital project in New York City? Choosing the ideal Laravel development partner is pivotal. Begin by defining your project requirements clearly. Assess potential partners' experience, expertise, and technical proficiency, checking portfolios and client testimonials. Effective communication and collaboration are paramount, so evaluate partners' communication styles and project management approaches. Consider long-term scalability and support options, and discuss pricing and contracts transparently. Lastly, trust your instincts when selecting a partner aligned with your vision and values.

How to Choose the Right Laravel Development Partner in New York City_compress...

software pro Development

Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live Booking Contact Details :- WhatsApp Chat :- [+91-9999965857 ] The Best Call Girls Delhi At Your Service Russian Call Girls Delhi Doing anything intimate with can be a wonderful way to unwind from life's stresses, while having some fun. These girls specialize in providing sexual pleasure that will satisfy your fetishes; from tease and seduce their clients to keeping it all confidential - these services are also available both install and outcall, making them great additions for parties or business events alike. Their expert sex skills include deep penetration, oral sex, cum eating and cum eating - always respecting your wishes as part of the experience (29-April-2024(PSS)

Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live

Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure

Looking for an efficient way to manage your finances? Look no further than our money management app. With easy-to-use features, you can track your expenses, create budgets, and monitor your savings goals all in one place. Our app provides real-time updates on your spending habits and helps you make smarter financial decisions. Take control of your finances today with our user-friendly money management app.

Right Money Management App For Your Financial Goals

Jhone kinadey

Diamond Application Development Crafting Solutions with Precision

SolGuruz

5 Signs You Need a Fashion PLM Software.pdf

Wave PLM

HR Software Buyers Guide in 2024 - HRSoftware.com

Fatema Valibhai

Kürzlich hochgeladen (20)

Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...

Software Quality Assurance Interview Questions

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

How To Use Server-Side Rendering with Nuxt.js

Unlocking the Future of AI Agents with Large Language Models

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

How To Troubleshoot Collaboration Apps for the Modern Connected Worker

Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...

AI & Machine Learning Presentation Template

A Secure and Reliable Document Management System is Essential.docx

Microsoft AI Transformation Partner Playbook.pdf

How to Choose the Right Laravel Development Partner in New York City_compress...

Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live

Right Money Management App For Your Financial Goals

Diamond Application Development Crafting Solutions with Precision

5 Signs You Need a Fashion PLM Software.pdf

HR Software Buyers Guide in 2024 - HRSoftware.com

Building a living styleguide using React & Styled-components

1. #KLJS #styled-components #storybook Using React, styled-components & storybook

2. #KLJS #styled-components #storybook Tech Lead & Pixel Pusher, BAE Systems Applied Intelligence vik@ramanuj.am | https://vik.ramanuj.am | @piggyslasher

3. #KLJS #styled-components #storybook

4. #KLJS #styled-components #storybook ● Share code - Logic & UI ● Less duplication, redundancy, code, bugs ● More consistency ● Encapsulate logic into components ● Share components visually ● Reap benefits!

5. #KLJS #styled-components #storybook ● Share code - Logic & UI ● Avoid duplication, redundancy ● Less code, less bugs ● Consistency ● Less work later ● Encapsulate logic into components ● Share components ● Reap benefits! ● Encapsulation ● Sharing I.e. presentational components, not smart components a.k.a containers!

6. #KLJS #styled-components #storybook

7. #KLJS #styled-components #storybook 1994, before CSS

8. #KLJS #styled-components #storybook CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components By Perezpriego

9. #KLJS #styled-components #storybook

10. #KLJS #styled-components #storybook CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components By Perezpriego

11. #KLJS #styled-components #storybook

12. #KLJS #styled-components #storybook SASS

13. #KLJS #styled-components #storybook SASS

14. #KLJS #styled-components #storybook SASS

15. #KLJS #styled-components #storybook

16. #KLJS #styled-components #storybook

17. #KLJS #styled-components #storybook

18. #KLJS #styled-components #storybook CSS is getting better...

19. #KLJS #styled-components #storybook Browsers will be supporting this natively as the CSS specs are implemented.

20. #KLJS #styled-components #storybook

21. #KLJS #styled-components #storybook

22. #KLJS #styled-components #storybook

23. #KLJS #styled-components #storybook Legacy CSS importing...

24. #KLJS #styled-components #storybook Legacy CSS importing… CSS is in external stylesheet

25. #KLJS #styled-components #storybook Inline styling - notice the camelCase.

26. #KLJS #styled-components #storybook ● Allowed tight encapsulation ● Still relied on external stylesheets ● Devs still used SASS, Less, PostCSS to build styles ● Was co-created by Glen Maddern, the co-creator of styled-components...

27. #KLJS #styled-components #storybook Traditional CSS/HTML -> Credit: CSS-Tricks

28. #KLJS #styled-components #storybook Using CSS Modules -> Credit: CSS-Tricks

29. #KLJS #styled-components #storybook The output -> Generated HTML Credit: CSS-Tricks Generated CSS

30. #KLJS #styled-components #storybook

31. #KLJS #styled-components #storybook ● Built on the lessons learnt from CSS Modules ● Doesn’t need an external build toolset ● Conceptually tallies with the Component age - you’ll see why :)

32. #KLJS #styled-components #storybook It’s just a better developer experience

33. #KLJS #styled-components #storybook

34. #KLJS #styled-components #storybook Creating buttons...

35. #KLJS #styled-components #storybook Creating buttons… sorry, wrong talk.

36. #KLJS #styled-components #storybook Nick Babich

37. #KLJS #styled-components #storybook

38. #KLJS #styled-components #storybook

39. #KLJS #styled-components #storybook

40. #KLJS #styled-components #storybook

41. #KLJS #styled-components #storybook

42. #KLJS #styled-components #storybook

43. #KLJS #styled-components #storybook Manipulating the appearance… the traditional way.

44. #KLJS #styled-components #storybook Credit: Max Stoiber

45. #KLJS #styled-components #storybook Credit: Max Stoiber

46. #KLJS #styled-components #storybook Credit: Max Stoiber

47. #KLJS #styled-components #storybook

48. #KLJS #styled-components #storybook

49. #KLJS #styled-components #storybook Credit: Max Stoiber

50. #KLJS #styled-components #storybook Credit: Max Stoiber

51. #KLJS #styled-components #storybook

52. #KLJS #styled-components #storybook

53. #KLJS #styled-components #storybook PDF Styleguide

54. #KLJS #styled-components #storybook

55. #KLJS #styled-components #storybook Aim - Component library, hosted & visible to: ● UX ● Your team ● Your project ● Test / QA ● (OSS && ‘The World’)

56. #KLJS #styled-components #storybook

57. #KLJS #styled-components #storybook

58. #KLJS #styled-components #storybook

59. #KLJS #styled-components #storybook The Storybook knobs addon… lets you play with props!

60. #KLJS #styled-components #storybook A match made in heaven, not just in the React world!

61. #KLJS #styled-components #storybook

62. #KLJS #styled-components #storybook !!

63. #KLJS #styled-components #storybook

64. #KLJS #styled-components #storybook

65. #KLJS #styled-components #storybook ● A github repo & webpackbin for you to play about with. ● Styled-components.com ● An introduction to styled-components with Glen Maddern ● Glen Maddern - Styling React Apps with Styled Components ●

Building a living styleguide using React & Styled-components

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Building a living styleguide using React & Styled-components

Ähnlich wie Building a living styleguide using React & Styled-components (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Building a living styleguide using React & Styled-components