SlideShare una empresa de Scribd logo
1 de 75
Descargar para leer sin conexión
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
StyleDocco     examples     source code




  StyleDocco
  StyleDocco generates documentation and style guide documents from your stylesheets.

  Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML
  code prefixed with 4 spaces or between code fences ( ``` ) in your comments, and StyleDocco shows a preview with the styles
  applied, and displays the example HTML code.

  The previews are rendered in resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes.

  Suggestions, feature requests and bug reports are very welcome, either at GitHub or on Twitter (@jacobrask).



  Installation
  StyleDocco requires Node.js. After installing Node.js, run npm install -fg styledocco or clone this repository.

  StyleDocco is free software, released under the MIT license.




  Examples
Stylesheet
The following is the code you would write in your stylesheet, and the Output is what you would see in the documentation.

/* Provides extra visual weight and identifies the primary action in a set of buttons.


     <button class="btn primary">Primary</button>
*/
.btn.primary {
     background: steelblue;
     color: snow;
     border: 2px outset steelblue;
}




Output
Kalei
 -
 Style
 guide
                                   Kalei
 -
 Style
 guide
 styles.css



Kalei
 theme

 theme.css
                                   Generates
 bootstrap-like
 documentation
                                   for
 your
 own
 CSS!
Examples                           This project aims at making sure your style sheets are fully documented whilst being
                                   synchronized with your webpages styles. To do this it actually uses your live stylesheets in so
                                   that at anytime you can review how your styleguide looks.
 buttons.css
                                   This website is a live example generated from Kalei's style.css
 fixie-­demo.css

                                         Star       168                      Fork       24
Third
 Party

 highlight/styles/googlecode.css


                                   Getting
 started
                                   1. Download the repository (git clone
                                      git://github.com/thomasdavis/kaleistyleguide.git)
                                   2. Serve it on a HTTP server and it should work!
                                   3. Edit js/config.js to point at your own styles.css
Example
Easily show off examples of your components and the HTML to generate them

Example


       Compose new            Archive   Report spam   Delete

          Move to    Labels




Code

   <div class="actions button-container">
       <a href="#" class="button primary">Compose new</a>
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
/*
## Typographic components

### Hero Unit

A lightweight, flexible component to showcase key conte
nt on your site. It works well on marketing and content
-heavy sites.

```
<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
/*

### Nav Bar

The nav bar is one of the most important components of
the site, it needs to:
- Allow an easy usable way to get around
- Convey where the user currently is

- On **small screens** the items are *hidden* and a tog
gle link is *displayed as an iconfont*, unless **`.font
face`** is not detected in which "menu" text is *a fall
back*.
  - If **`.no-js`** is detected a fallback nav in the f
ooter should *be displayed* and the toggle anchor link
will point to that.
  - The navigation should *animate a slide down* on tog
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides
Improving your responsive workflow with style guides

Más contenido relacionado

La actualidad más candente

MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap IntroductionAndrea Tarr
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
Create rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsCreate rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsTassos Koutlas
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
 
Plugins at WordCamp Phoenix
Plugins at WordCamp PhoenixPlugins at WordCamp Phoenix
Plugins at WordCamp PhoenixAndrew Ryno
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.Vladimir Roudakov
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
光速テーマ開発のコツ
光速テーマ開発のコツ光速テーマ開発のコツ
光速テーマ開発のコツHishikawa Takuro
 
Twitter bootstrap tutorial
Twitter bootstrap tutorialTwitter bootstrap tutorial
Twitter bootstrap tutorialManinder Singh
 
Don't sh** in the Pool
Don't sh** in the PoolDon't sh** in the Pool
Don't sh** in the PoolChris Jean
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide GeneratorVarya Stepanova
 
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Julien Renaux
 
Bootstrap Framework and Drupal
Bootstrap Framework and DrupalBootstrap Framework and Drupal
Bootstrap Framework and DrupalJim Birch
 
DNN Database Tips & Tricks
DNN Database Tips & TricksDNN Database Tips & Tricks
DNN Database Tips & TricksWill Strohl
 

La actualidad más candente (18)

MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 
Twitter bootstrap 101
Twitter bootstrap 101Twitter bootstrap 101
Twitter bootstrap 101
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Create rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphsCreate rich web stories with Drupal 8 and paragraphs
Create rich web stories with Drupal 8 and paragraphs
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
Plugins at WordCamp Phoenix
Plugins at WordCamp PhoenixPlugins at WordCamp Phoenix
Plugins at WordCamp Phoenix
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
光速テーマ開発のコツ
光速テーマ開発のコツ光速テーマ開発のコツ
光速テーマ開発のコツ
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
Twitter bootstrap tutorial
Twitter bootstrap tutorialTwitter bootstrap tutorial
Twitter bootstrap tutorial
 
Don't sh** in the Pool
Don't sh** in the PoolDon't sh** in the Pool
Don't sh** in the Pool
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
 
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2
 
Bootstrap Framework and Drupal
Bootstrap Framework and DrupalBootstrap Framework and Drupal
Bootstrap Framework and Drupal
 
DNN Database Tips & Tricks
DNN Database Tips & TricksDNN Database Tips & Tricks
DNN Database Tips & Tricks
 

Similar a Improving your responsive workflow with style guides

Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBlog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateSean Burgess
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Anupam Ranku
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Thomas Daly
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Paxcel Technologies
 
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartExtreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartScott DeLoach
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
CrowdFusion: The Front-End Edition, Part I: Presentation Layer
CrowdFusion: The Front-End Edition, Part I: Presentation LayerCrowdFusion: The Front-End Edition, Part I: Presentation Layer
CrowdFusion: The Front-End Edition, Part I: Presentation Layergraybill
 
X tag with web components - joe ssekono
X tag with web components - joe ssekonoX tag with web components - joe ssekono
X tag with web components - joe ssekonoJoseph Ssekono
 
Joomla Beginner Template Presentation
Joomla Beginner Template PresentationJoomla Beginner Template Presentation
Joomla Beginner Template Presentationalledia
 
Turku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsTurku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsJames Stone
 
Introduction to-concrete-5
Introduction to-concrete-5Introduction to-concrete-5
Introduction to-concrete-5Ketan Raval
 
Introduction to-concrete-5
Introduction to-concrete-5Introduction to-concrete-5
Introduction to-concrete-5ketanraval
 
Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)
Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)
Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)Mark Hamstra
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB
 

Similar a Improving your responsive workflow with style guides (20)

Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBlog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 
Html5
Html5Html5
Html5
 
Fewd week1 slides
Fewd week1 slidesFewd week1 slides
Fewd week1 slides
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStartExtreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
CrowdFusion: The Front-End Edition, Part I: Presentation Layer
CrowdFusion: The Front-End Edition, Part I: Presentation LayerCrowdFusion: The Front-End Edition, Part I: Presentation Layer
CrowdFusion: The Front-End Edition, Part I: Presentation Layer
 
X tag with web components - joe ssekono
X tag with web components - joe ssekonoX tag with web components - joe ssekono
X tag with web components - joe ssekono
 
Joomla Beginner Template Presentation
Joomla Beginner Template PresentationJoomla Beginner Template Presentation
Joomla Beginner Template Presentation
 
Turku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-componentsTurku loves-storybook-styleguidist-styled-components
Turku loves-storybook-styleguidist-styled-components
 
Introduction to-concrete-5
Introduction to-concrete-5Introduction to-concrete-5
Introduction to-concrete-5
 
Introduction to-concrete-5
Introduction to-concrete-5Introduction to-concrete-5
Introduction to-concrete-5
 
Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)
Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)
Solving the Workflow - Building MODX.today with Gitify (2015-05-21, Alkmaar)
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 

Más de Luke Brooker

Thinking Outside the Box that Keeps Moving
Thinking Outside the Box that Keeps MovingThinking Outside the Box that Keeps Moving
Thinking Outside the Box that Keeps MovingLuke Brooker
 
Designing Delightful Experiences, Responsively
Designing Delightful Experiences, ResponsivelyDesigning Delightful Experiences, Responsively
Designing Delightful Experiences, ResponsivelyLuke Brooker
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly WorkflowLuke Brooker
 
Future Friendly Style Guides
Future Friendly Style GuidesFuture Friendly Style Guides
Future Friendly Style GuidesLuke Brooker
 
Future Friendly Design
Future Friendly DesignFuture Friendly Design
Future Friendly DesignLuke Brooker
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile FirstLuke Brooker
 
Seductive Design (Psychology in Design)
Seductive Design (Psychology in Design)Seductive Design (Psychology in Design)
Seductive Design (Psychology in Design)Luke Brooker
 

Más de Luke Brooker (8)

Craft as in Beer
Craft as in BeerCraft as in Beer
Craft as in Beer
 
Thinking Outside the Box that Keeps Moving
Thinking Outside the Box that Keeps MovingThinking Outside the Box that Keeps Moving
Thinking Outside the Box that Keeps Moving
 
Designing Delightful Experiences, Responsively
Designing Delightful Experiences, ResponsivelyDesigning Delightful Experiences, Responsively
Designing Delightful Experiences, Responsively
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
 
Future Friendly Style Guides
Future Friendly Style GuidesFuture Friendly Style Guides
Future Friendly Style Guides
 
Future Friendly Design
Future Friendly DesignFuture Friendly Design
Future Friendly Design
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile First
 
Seductive Design (Psychology in Design)
Seductive Design (Psychology in Design)Seductive Design (Psychology in Design)
Seductive Design (Psychology in Design)
 

Último

Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 

Último (20)

Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 

Improving your responsive workflow with style guides

  • 43. StyleDocco examples source code StyleDocco StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences ( ``` ) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes. Suggestions, feature requests and bug reports are very welcome, either at GitHub or on Twitter (@jacobrask). Installation StyleDocco requires Node.js. After installing Node.js, run npm install -fg styledocco or clone this repository. StyleDocco is free software, released under the MIT license. Examples
  • 44. Stylesheet The following is the code you would write in your stylesheet, and the Output is what you would see in the documentation. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; } Output
  • 45. Kalei - Style guide Kalei - Style guide styles.css Kalei theme theme.css Generates bootstrap-like documentation for your own CSS! Examples This project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks. buttons.css This website is a live example generated from Kalei's style.css fixie-­demo.css Star 168 Fork 24 Third Party highlight/styles/googlecode.css Getting started 1. Download the repository (git clone git://github.com/thomasdavis/kaleistyleguide.git) 2. Serve it on a HTTP server and it should work! 3. Edit js/config.js to point at your own styles.css
  • 46. Example Easily show off examples of your components and the HTML to generate them Example Compose new Archive Report spam Delete Move to Labels Code <div class="actions button-container"> <a href="#" class="button primary">Compose new</a>
  • 49. /* ## Typographic components ### Hero Unit A lightweight, flexible component to showcase key conte nt on your site. It works well on marketing and content -heavy sites. ``` <div class="hero-unit"> <h1>Heading</h1> <p>Tagline</p> <p> <a class="btn btn-primary btn-large"> Learn more </a>
  • 68. /* ### Nav Bar The nav bar is one of the most important components of the site, it needs to: - Allow an easy usable way to get around - Convey where the user currently is - On **small screens** the items are *hidden* and a tog gle link is *displayed as an iconfont*, unless **`.font face`** is not detected in which "menu" text is *a fall back*. - If **`.no-js`** is detected a fallback nav in the f ooter should *be displayed* and the toggle anchor link will point to that. - The navigation should *animate a slide down* on tog