Building a living styleguide using React & Styled-components

•

0 likes•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
●

Page Builders can sometimes get a bad rap, from being bloated and slowing sites down, to breaking sites and causing problems, or just not cool enough for real coders to use. In this presentation I will show you how Page Builders are becoming more accepted, from novices to seasoned professionals, and use cases that demonstrate ways page builders can speed up development and make you more efficient. Presented by Ricky Blacker @rickyblacker69 at WordCamp Sydney 2018

BDD for Rails Legacy CodeWei Jen Lu

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.

Slow kinda sucks

Tim Wright

EnterJS 2015 - Continuous Integration for Frontend Code

Marcel Birkner

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.

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 FrontendArush 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

Ensuring Design Standards with Web Components

John Riviello

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!

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

crystalenka

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.

Modeling Rich Narrative Content

Jeff Eaton

An Unexpected Solution to Microservices UI Composition

Dr. Arif Wider

Delivering client sites - KC2015Ilesh Mistry

Monster JavaScript Course - 50+ projects and applications

Laurence Svekis ✔

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.

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

Bartek Igielski

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.

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

KnowledgeConsultants

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.

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

Matthew Davis

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.

Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater

CSS Workflow. Pre & Post

Anton Dosov

How to Position Your Globus Data Portal for Success Ten Good Practices

Globus

Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.

Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf

AMB-Review

Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos https://www.amb-review.com/tubetrivia-ai Exclusive Features: AI-Powered Questions, Wide Range of Categories, Adaptive Difficulty, User-Friendly Interface, Multiplayer Mode, Regular Updates. #TubeTriviaAI #QuizVideoMagic #ViralQuizVideos #AIQuizGenerator #EngageExciteExplode #MarketingRevolution #BoostYourTraffic #SocialMediaSuccess #AIContentCreation #UnlimitedTraffic

Similar to Building a living styleguide using React & Styled-components

The Future is Modular, Jonathan Snook

Future Insights

Slow kinda sucks

Tim Wright

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 FrontendArush 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

Ensuring Design Standards with Web Components

John Riviello

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 - KC2015Ilesh Mistry

Monster JavaScript Course - 50+ projects and applications

Laurence Svekis ✔

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

Bartek Igielski

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

KnowledgeConsultants

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

Matthew Davis

Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater

CSS Workflow. Pre & Post

Anton Dosov

Similar to 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

Recently uploaded

How to Position Your Globus Data Portal for Success Ten Good Practices

Globus

Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf

AMB-Review

Enterprise Resource Planning System in Telangana

NYGGS Automation Suite

Enterprise Resource Planning System includes various modules that reduce any business's workload. Additionally, it organizes the workflows, which drives towards enhancing productivity. Here are a detailed explanation of the ERP modules. Going through the points will help you understand how the software is changing the work dynamics. To know more details here: https://blogs.nyggs.com/nyggs/enterprise-resource-planning-erp-system-modules/

Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf

Jay Das

Orion Context Broker introduction 20240604

Fermin Galan

Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...

Anthony Dahanne

Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ? Venez le découvrir lors de cette session ignite

Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...

informapgpstrackings

How Recreation Management Software Can Streamline Your Operations.pptx

wottaspaceseo

Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.

Lecture 1 Introduction to games development

abdulrafaychaudhry

In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...

Juraj Vysvader

First Steps with Globus Compute Multi-User Endpoints

Globus

In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.

Globus Compute wth IRI Workflows - GlobusWorld 2024

Globus

As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.

Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL

Natan Silnitsky

In software engineering, the right architecture is essential for robust, scalable platforms. Wix has undergone a pivotal shift from event sourcing to a CRUD-based model for its microservices. This talk will chart the course of this pivotal journey. Event sourcing, which records state changes as immutable events, provided robust auditing and "time travel" debugging for Wix Stores' microservices. Despite its benefits, the complexity it introduced in state management slowed development. Wix responded by adopting a simpler, unified CRUD model. This talk will explore the challenges of event sourcing and the advantages of Wix's new "CRUD on steroids" approach, which streamlines API integration and domain event management while preserving data integrity and system resilience. Participants will gain valuable insights into Wix's strategies for ensuring atomicity in database updates and event production, as well as caching, materialization, and performance optimization techniques within a distributed system. Join us to discover how Wix has mastered the art of balancing simplicity and extensibility, and learn how the re-adoption of the modest CRUD has turbocharged their development velocity, resilience, and scalability in a high-growth environment.

OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam

takuyayamamoto1800

Accelerate Enterprise Software Engineering with Platformless

WSO2

Key takeaways: Challenges of building platforms and the benefits of platformless. Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience. How Choreo enables the platformless experience. How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo. Demo of an end-to-end app built and deployed on Choreo.

Cracking the code review at SpringIO 2024

Paco van Beckhoven

Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production. Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process? In this session we will cover: - The Art of Effective Code Reviews - Streamlining the Review Process - Elevating Reviews with Automated Tools By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces

GlobusWorld 2024 Opening Keynote session

Globus

top nidhi software solution freedownload

vrstrong314

This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.

Quarkus Hidden and Forbidden Extensions

Max Andersen

A Sighting of filterA in Typelevel Rite of Passage

Philip Schwarz

Recently uploaded (20)

How to Position Your Globus Data Portal for Success Ten Good Practices

Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf

Enterprise Resource Planning System in Telangana

Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdf

Orion Context Broker introduction 20240604

Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...

Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...

How Recreation Management Software Can Streamline Your Operations.pptx

Lecture 1 Introduction to games development

In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...

First Steps with Globus Compute Multi-User Endpoints

Globus Compute wth IRI Workflows - GlobusWorld 2024

Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL

OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam

Accelerate Enterprise Software Engineering with Platformless

Cracking the code review at SpringIO 2024

GlobusWorld 2024 Opening Keynote session

top nidhi software solution freedownload

Quarkus Hidden and Forbidden Extensions

A Sighting of filterA in Typelevel Rite of Passage

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

Recommended

Recommended

More Related Content

Similar to Building a living styleguide using React & Styled-components

Similar to Building a living styleguide using React & Styled-components (20)

Recently uploaded

Recently uploaded (20)

Building a living styleguide using React & Styled-components