Coder Social home page Coder Social logo

carbon-design-system / carbon-website-archive Goto Github PK

View Code? Open in Web Editor NEW
238.0 12.0 117.0 617.31 MB

The old website for the Carbon Design System. This repo is archived.

Home Page: https://www.carbondesignsystem.com

JavaScript 70.77% CSS 28.76% Shell 0.47%

carbon-website-archive's Introduction

Carbon Design System

This is the Carbon Design System website which is built using GatsbyJS.

๐Ÿ“‚ Structure

src
โ”œโ”€โ”€ components
โ”œโ”€โ”€ content
โ”œโ”€โ”€ data
โ”œโ”€โ”€ layouts
โ”œโ”€โ”€ pages
โ”œโ”€โ”€ styles
โ”œโ”€โ”€ templates

๐Ÿ‘ฉโ€๐Ÿ’ป Development

Install dependencies:

yarn

Build website-addons package:

cd packages/addons-website
yarn build

Run dev environment:

yarn dev

Run internal dev environment:

yarn dev:internal

Add-on development /packages/addons-website uses storybook:

yarn storybook

If you need more detailed information on how to setup your machine to develop locally, please take a look at our wiki.

๐Ÿš€ Build

Runing the build commands generates all the files and places them in the public folder.

Build external site:

yarn build:external

Build internal site:

yarn build:internal

carbon-website-archive's People

Contributors

0xhexe avatar aagonzales avatar aledavila avatar alisonjoseph avatar asudoh avatar cal-smith avatar chrisconnors-ibm avatar claycrenshaw avatar connor-leech avatar dakahn avatar designertyler avatar emyarod avatar janchild avatar jeanservaas avatar jendowns avatar jnm2377 avatar joshblack avatar kuehndaniel avatar laurenmrice avatar lee-chase avatar lovemecomputer avatar marijohannessen avatar mattrosno avatar shinytoyrobots avatar shixiedesign avatar tessarodes avatar tomwaterton avatar tw15egan avatar vincentsnagg avatar vpicone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

carbon-website-archive's Issues

Docs Edit: User Flow

@kuehndaniel commented on Mon Sep 17 2018

Edit User Flow HIG entry for style and content.

http://hig-review-1.stage1.mybluemix.net/your-product-on-ibm-cloud/user-flow


@kuehndaniel commented on Mon Sep 17 2018

original issue closed but found here: https://github.ibm.com/carbon/issues/issues/880


@claycrenshaw commented on Tue Sep 18 2018

User Flow-CC.md.zip
@alisonjoseph Revised copy for this page is attached. Please let me know how to proceed to get this pushed to the Internal site.


@alisonjoseph commented on Tue Sep 18 2018

At this point would make sense to add any new content to the Gatsby site, to avoid having to do the work twice.

You can add the markdown files in that repo and open a PR.
https://github.com/carbon-design-system/carbon-website-gatsby/tree/master/src/content

How to add content wiki: https://github.com/carbon-design-system/carbon-website-gatsby/blob/master/CONTENT.md .

Let me know if you have any questions.


@claycrenshaw commented on Tue Sep 18 2018

@alisonjoseph This content is internal-only. Does that matter in this case?

Create Docs: UI Shell

Write and integrate guidelines for the new UI Shell.

  • Determine placement in Carbon IA
  • Write draft 1
  • Figure out supporting images
  • Publish page to staging server
  • Gather feedback from stakeholders (Anna, Chris, Tyler)
  • Incorporate feedback from internal team, including revised graphics
  • Upload new page to Carbon site

Guidance Page: spacing and CSS box model

A user needs to understand basic layout on a page with spacing guidance and our default CSS box model.

I want to have a page addressing Layout:

DESIGN

  • visual example of spacing and the CSS Box Model
  • written content explanation
  • design of guidelines on page

DEVELOPMENT

  • link to content (v1)
  • inline documentation on page (v2)

Guidance Page: sizing fixed boxes

A user needs to understand the sizing recommendation of fixed boxes.

DESIGN

  • Sizing Fixed Boxes using Size Scales (box equivalent to Type Scales) and Aspect Ratios
  • written content explanation
  • design of guidelines on page

DEVELOPMENT

  • link to content (v1)
  • inline documentation on page (v2)

Designs to surface Experimental Components in the Carbon site

Design a way that allows the user to view experimental components in the Carbon website.

To Do:

  • Define behavior of toggle. (Controls whole site, page, or container?)
  • Visual style of any toggle or control.
  • Location on page
  • Add experimental status column on component status page.
  • If the user toggles off the experimental view, what happens when they navigate to a component that is only experimental?

Guidance Page: page geometry

A user needs to understand an abstracted shell showing high level regions (header, navigation, panels etc.).

DESIGN

  • reference Page Geometry (Regions) design work
  • written content explanation
  • design of guidelines on page

DEVELOPMENT

  • link to content (v1)
  • inline documentation on page (v2)

Guidance Page: layering

A user needs to understand the recommended layering approach.

DESIGN

  • Layer (Z Index)
  • written content explanation
  • design of guidelines on page

DEVELOPMENT

  • link to content (v1)
  • inline documentation on page (v2)

Guidance Page: sizing liquid boxes

A user needs to understand the recommended sizing of liquid boxes.

DESIGN

  • Sizing Liquid Boxes using Column Grid
  • written content explanation
  • design of guidelines on page

DEVELOPMENT

  • link to content (v1)
  • inline documentation on page (v2)

Navigation Issue - Can't set active class

Active class on nav items only works in dev mode.

This is because it is using window.
window... isn't supported in prod mode.

Setting activeClass on <Link... doesn't work for the pages with tabs because we are using a redirect to the tab page.

Possible solution is to try and use props.window.location.pathname however this only seems to be passed through to pages/ files which only the homepage is using. Can't figure out how to pass location prop to nav component.

https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#4-pass-history-location-and-match-props-to-layout
gatsbyjs/gatsby#1875
https://spectrum.chat/thread/9d834942-678c-4ff4-80fd-5a84bc2acdea

Comments from https://github.ibm.com/carbon/issues/issues/1031
@lovemecomputer
shared this with u via slack, but posting here just in case :) on suggestion to try is leveraging reach router: gatsbyjs/gatsby#1875 (comment)

Responsive Page: Adjust Breakpoint Behavior

At the ~860px breakpoint and narrower, the left-side page content becomes hidden under the left nav. Recommend changing page behavior so that the nav menu gets auto-collapsed at this breakpoint.

Rationale: The user needs to hide this menu anyway in order to see the page content, so we can save the user a step by collapsing it automatically. This is a widespread, standard responsive behavior.

Layout page

@shinytoyrobots commented on Thu Sep 13 2018

I want to have a page addressing Layout that combines these things, in this sequence:

  • Spacing and the CSS Box Model
  • Sizing Fixed Boxes using Size Scales (box equivalent to Type Scales) and Aspect Ratios
  • Sizing Liquid Boxes using Column Grid
  • Layer (Z Index)
  • Page Geometry (Regions)

@alisonjoseph @designertyler (need to add Pete Garvin and Jean Servaas)

Verify content is up to date with latest before going live

Content has been copied over, need to go through before site goes live and make sure all the updates to the current site have been accounted for.

This can't be done until the website is 99% ready to go live.

Specifically, check

  • A11y section
  • All the angular docs that were added
  • IBM Design Language page

Page: Component Pages

Get vanilla component example javascrtipt loading and working in the browser. Currently loading, but any javascript doesn't load/interactive components don't work.

Install Hotjar Tracking Code on Internal Site

@claycrenshaw commented on Mon Sep 17 2018

Install the Hotjar tracking code into the HEAD tag on every page of the "internal" Carbon site, so that we can gather feedback, track usage, etc. (http://design-system.stage1.mybluemix.net/)

The internal site will serve as the test site for Hotjar functionality, and once we have things working correctly, we can move to install on the primary site.

CODE:

<script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:1017535,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script>

@joshblack commented on Tue Sep 18 2018

What kind of insights are we hoping to get from the tool? Definitely hesitant to do more data collection since we'd have to go through GDPR regulations (https://www.hotjar.com/legal/compliance/gdpr-commitment)


@claycrenshaw commented on Tue Sep 18 2018

This is being used as a user feedback collector. Completely opt-in.


@claycrenshaw commented on Tue Sep 18 2018

We can table any analytics gathering until we can dig in to the GDPR regs.


@shinytoyrobots commented on Tue Sep 18 2018

I think tabling makes sense, to dig into those.

Do we have any data about internal site usage at all? My gut is that internal site usage is minimal compared to the open source site, so I'm not sure of the value of focusing on internal only analysis.


@claycrenshaw commented on Tue Sep 18 2018

To clarify, I'm saying we table any ANALYTICS gathering which might touch on GDPR. But the feedback-gathering function is something I need right away. It's all the same code snippet.


@claycrenshaw commented on Tue Sep 18 2018

In case the need is confusing . . .
I (Clay) need a way to gather feedback on individual pages from internal users, so I can adjust the content based on that feedback.

This tool enables me to do that.


@shinytoyrobots commented on Tue Sep 18 2018

Sure, but why does that need to be specific to the internal site? What internal only content are we talking about?


@claycrenshaw commented on Tue Sep 18 2018

I want to test this new tool on the internal site before we take it to the main site. It's not for internal-only content, but for an internal-only audience for now.

Guidance Page: page geometry

A user needs to understand an abstracted shell showing high level regions (header, navigation, panels etc.).

DESIGN

  • Page Geometry (Regions)
  • written content explanation
  • design of guidelines on page

DEVELOPMENT

  • link to content (v1)
  • inline documentation on page (v2)

Create content describing and pointing to "Experimental" components and functionality

A user needs to discover and understand what experimental components (and other resources) are available and how to use them.

DESIGN

  • replicate the existing method Carbon site uses to show components, for subset of experimental components

WEBSITE

Carbon Site Feedback Loop Overhaul

@kuehndaniel commented on Mon Sep 17 2018

Overhaul of the user feedback loop of the Carbon site.

Opened by @claycrenshaw (as an epic):

Hypothesis: A well-designed user feedback loop on the Carbon site will dramatically improve the Carbon team's ability to respond quickly and effectively to the needs of our users.

  • As a Carbon user, I can quickly and easily provide feedback on any portion of the Carbon site, without going through the Github new ticket workflow.

  • As a member of the Carbon team, I can easily see and address all user feedback coming from the site.

UI Shell: Need images for Docs

@kuehndaniel commented on Mon Sep 17 2018

From @claycrenshaw

We need web-ready images to go inline with the documentation on the Carbon site.

See https://github.ibm.com/carbon/issues/issues/879#issuecomment-7279245 for the draft.

Let me know if you have any questions!


@kuehndaniel commented on Mon Sep 17 2018

From @aagonzales

๐Ÿค” dang ... did I not commit my comment from last week. Anyways I worked on some new images last week to sort of demonstrate what I was thinking: https://ibm.box.com/s/e0u51m9x9xsz1xorreu9f7fcug4l4trt

@trtate @Clay-Crenshaw


@kuehndaniel commented on Mon Sep 17 2018

Comment from @claycrenshaw

I'm declaring a temporary freeze on new versions of this Shell guidance while I try to consolidate all the existing versions. :)

Define requirements/desires for Carbon X website

Begin exploring navigation for the Carbon X website.

Questions to answer:

Does it make sense to use the product Shell? Northstar? Something new?

  • How is internal and external information organized and handled?
  • How are larger sections like A11y handled when there may be a need for deeper levels of navigation?
  • How will platform guidance live with carbon guidance.
  • How are users navigating the current site

Outcomes:

  • Requirements for updated site.
  • New features, controls, views, etc.
  • First idea sketches out for IA and nav out and on paper.
  • Alignment with IBM design.

Steps to complete:

  • Look at site analytics.
  • User interviews
  • Card sort w/ users

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.