+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+ Light theme
+
+
+
+ System theme
+
+
+
+ Dark theme
+
+
+
+ Global header reverse theme
+
+```
+
+This adds a content switcher and checkbox to our user profile side panel. If you
+view it now it works but is in need of some styling.
+
+These styles import the Carbon typography features, define a layout for our
+panel, and set the title size.
+
+```scss path=style.scss
+@use '@carbon/styles/scss/type' as *; /* place at top of file */
+
+.header-panel__content {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-05;
+ padding: $spacing-05;
+}
+
+.header-panel__title {
+ @include type-style('productive-heading-02');
+}
+```
+
+As per the global actions we will use additional styling to add icons to our
+content switcher.
+
+```scss path=style.scss
+.theme-selector__icon {
+ width: 1.25rem;
+ height: 1.25rem;
+ background-color: $text-primary;
+}
+
+cds-content-switcher-item[selected] .theme-selector__icon {
+ /* switch icon color when selected */
+ background-color: $background;
+}
+
+.theme-selector__icon--light {
+ mask: url('/sun.svg') no-repeat center;
+}
+
+.theme-selector__icon--system {
+ mask: url('/brightness-contrast.svg') no-repeat center;
+}
+
+.theme-selector__icon--dark {
+ mask: url('/moon.svg') no-repeat center;
+}
+```
+
+Currently the theme switcher looks good but needs the following Javascript to
+switch themes.
+
+```javascript path=main.js
+const handleSwitch = (ev) => {
+ // Applies new theme or defers to system preferences by removing theme
+ switch (ev.detail.item.value) {
+ case 'light':
+ bodyEl.classList.remove('g100');
+ bodyEl.classList.add('g10');
+ break;
+ case 'dark':
+ bodyEl.classList.remove('g10');
+ bodyEl.classList.add('g100');
+ break;
+ default:
+ bodyEl.classList.remove('g10');
+ bodyEl.classList.remove('g100');
+ }
+};
+document
+ .querySelector('.theme-selector')
+ .addEventListener('cds-content-switcher-selected', handleSwitch);
+
+const handleHeaderCompliment = (ev) => {
+ document
+ .querySelector('cds-header')
+ .classList.toggle('compliment', ev.target.checked);
+};
+document
+ .querySelector('.theme-header__compliment')
+ .addEventListener('cds-checkbox-changed', handleHeaderCompliment);
+```
+
+At this point our theme switcher is mostly working, only the checkbox
+`Global header reverse theme` appears to do nothing. In the script above the
+class `compliment` is being toggled on and off in the `User profile Panel
+ +
+
+
+```
+
+
+
+
+
+
+ 7/16
+
+
+ 8/16
+
+
+
+
+
+
+ 1/4
+
+
+ 1/4
+
+
+ 1/4
+
+
+ 1/4
+
+ ` means the
+column will start at column 9 and span 8 columns when the large (lg) breakpoint
+is active. large breakpoint.
+
+https://carbon-elements.netlify.app/grid/examples/css-grid/
+
+We've included the designs for this tutorial app in the `design.figma` file
+found as a top-level file in the `carbon-tutorial` repository. But, if you don't
+have Figma installed and available to inspect the design, we'll provide
+screenshots.
+
+
+
+Landing page grid
+
+
+
+**Pro tip:** `SHIFT-G` toggles the layout in Figma.
+
+
+
+## Build landing page
+
+We'll start adding HTML elements and components by row.
+
+### First row
+
+
+
+
+
+
+Banner vertical spacing
+
+
+
+
+In our first row we'll need a `Breadcrumb` component. First, let's import the
+components we need.
+
+```javascript path=main.js
+import '@carbon/web-components/es/components/breadcrumb/index';
+```
+
+We can now add our component to the first row, replace the content of the `div`
+with class `page-landing__banner` with:
+
+```html path=index.html
+
+
+ Getting started
+
+
+
+ About
+ Design
+ Develop
+
+```
+
+Each of the `cds-tab` components has a `target` attribute. This is used to
+identify the content visible when that tab is selected.
+
+Wrap the subgrid element immediately after the closing `` with the
+following. This is where we will place our first tab panel.
+
+```html path=index.html
+Learn more
+```
+
+The second column content `8/16` is replaced with:
+
+```html path=index.html
+
+```
+
+The `tab-illo.png` image is already located in the `public` folder.
+
+After the closing `
` of `id="panel-about"`, still inside
+`page-landing__r2` we add two further tab panels. This one
+
+```html path=index.html
+Design & build with Carbon
+``` + +### Second row + +In our second row we'll need `Tabs` and `Button` components. Add the following +import: + +```javascript path=main.js +import '@carbon/web-components/es/components/tabs/index'; +``` + +The tabs come next going inside `page-landing__r2` and before the sub +`cds--subgrid`. + +```html path=index.html +
+ ... grid element is here
+
+```
+
+Replace the content of the first column `7/16` with:
+
+```html path=index.html
+What is Carbon?
++ Carbon is IBM’s open-source design system for digital products and + experiences. With the IBM Design Language as its foundation, the system + consists of working code, design tools and resources, human interface + guidelines, and a vibrant community of contributors. +
+
+```
+
+The `tab-illo.png` image is already located in the `public` folder.
+
+After the closing `
+
+```
+
+and
+
+```html path=index.html
+
+
+
+
+
+
+ + Rapidly build beautiful and accessible experiences. The Carbon kit + contains all resources you need to get started. +
+
+
+```
+
+### Third row
+
+Here we replace all four columns entirely adding some offsets for medium and
+large column sizes after the first column.
+
+```html path=index.html
+
+
+
+
+
+
+ + Carbon provides components and styles for all. Whether using Vanilla, + Web Components, React, or another reactive library, you can build with + Carbon. +
+
+ The principles
+
+
+ Carbon is open
+
+
+ Carbon is modular
+
+
+ Carbon is consistent
+
+```
+
+## Style landing page
+
+### First row
+
+Row one styling is fairly straight forward with some typography and positional
+adjustment so to align it with our other content.
+
+```scss path=style.scss
+.page {
+ padding: 0;
+
+ > * {
+ padding-inline: $spacing-06;
+ margin: 0;
+ }
+}
+
+.page-landing__banner {
+ padding-block: $spacing-05 $spacing-13;
+ background: $layer-01;
+ box-shadow: $spacing-06 0 0 $layer-01, -1 * $spacing-06 0 0 $layer-01;
+}
+
+.page-landing__heading {
+ @include type-style('productive-heading-05');
+
+ margin: 0;
+}
+```
+
+### Second row
+
+The styling for the second row adds further layout and typography changes. It
+also positions the image and prevents it from causing horizontal overflow. In
+order to make use of the Carbon SCSS mixin `breakpoint-down` we also add the
+breakpoint import to our list of `@use` near the top of the file.
+
+```scss path=style.scss
+@use '@carbon/styles/scss/breakpoint' as *; /* add near top of file */
+
+.page-landing__illo {
+ max-width: 100%;
+ float: inline-end;
+ height: auto;
+}
+
+@include breakpoint-down(md) {
+ .page-landing__illo {
+ max-width: 528px;
+ width: 100%;
+ height: 100%;
+ float: inline-start;
+ }
+}
+
+.page-landing__tabs {
+ margin: (-1 * $spacing-08) 0 $spacing-08;
+}
+
+.page-landing__tab-content {
+ padding-block: $spacing-06;
+}
+
+.page-landing__subheading {
+ @include type-style('productive-heading-03');
+
+ font-weight: 600;
+}
+
+.page-landing__p {
+ @include type-style('productive-heading-03');
+ margin-top: $spacing-06;
+ margin-bottom: $spacing-08;
+}
+```
+
+### Third row
+
+```scss path=style.scss
+.page-landing__r3 {
+ padding-block: $spacing-09;
+ background: $layer-01;
+}
+```
+
+Ta-da! You should see a step 2 complete landing page! Now we can move on to the
+repo page.
+
+## Build repo page
+
+### Add a grid to contain our content
+
+Now in our `repositories` page we will first add a grid wrapping
+`REPOSITORIES PAGE`
+
+```html path=repositories.html
+
+
+```
+
+Add a minimal amount of styling to move our content away from the edge of the
+page in `style.scss`.
+
+```scss style.scss
+.repo-page__r1 {
+ padding-block: $spacing-05;
+}
+```
+
+### Adding a table
+
+Before we can add the table we need to import the web component. As this is only
+used in our `repositories.html` page lets create a new script file `repos.js`
+and then add.
+
+```javascript path=repos.js
+import '@carbon/web-components/es/components/data-table/index.js';
+```
+
+We need to include this file in `repositories.html` which we can do by adding
+the following next to the script tag that includes `main.js`.
+
+```html path=repositories.html
+
+```
+
+Next we add the table header and column titles to replace the text
+`REPOSITORIES PAGE`
+
+```html path=repositories.html
+
+ REPOSITORIES PAGE
+
+-
+
-
+
GitHub +
+ -
+
Homepage +
+
+
+```
+
+Style the `info-section__heading` with:
+
+```scss path=style.scss
+.info-section__heading {
+ @include type-style('heading-01');
+
+ padding-block-end: $spacing-08;
+}
+```
+
+## The info card
+
+At the bottom of `index.html` between the closing body and html tags add the
+info card template.
+
+### The template
+
+```html path=index.html
+
+ The Principles
+
+
+
+```
+
+Before we make use of the template we need to remove the column settings from
+the remaining three elements `page-landing__title` and replace with `info-card
+to leave:
+
+```html index.html
+
+
+
+ + Carbon is + thing goes here +
+Body goes here
+Carbon is open
+Carbon is modular
+Carbon is consistent
+```
+
+### The script
+
+As the script in this file only affects our landing page, first lets create
+`landing.js`. Kicking things off by moving the breadcrumb and tabs import from
+`main.js`.
+
+```javascript path=landing.js
+import '@carbon/web-components/es/components/breadcrumb/index';
+import '@carbon/web-components/es/components/tabs/index';
+```
+
+Then add a script tag to `index.html` to import `landing.js`
+
+```html path=index.html
+
+```
+
+After making sure everything add, to `landing.js`, the script to create the info
+card elements. First adding the data we will use to construct the info cards
+from.
+
+```javascript path=landing.js
+const infoCardDetails = [
+ {
+ strongMsg: 'Open',
+ bodyMsg: `It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute.`,
+ pictogramName: 'advocate',
+ },
+ {
+ strongMsg: 'Modular',
+ bodyMsg: `Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.`,
+ pictogramName: 'accelerating-transformation',
+ },
+ {
+ strongMsg: 'Consistent',
+ bodyMsg: `Based on the comprehensive IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences.`,
+ pictogramName: 'globe',
+ },
+];
+```
+
+Then create the utility function `updateInfoCard`
+
+```javascript path=landing.js
+const updateInfoCard = (here, { strongMsg, bodyMsg, pictogramName }) => {
+ const infoCardTemplate = document.querySelector(
+ 'template#template--info-card'
+ );
+
+ if (here && infoCardTemplate) {
+ const newInfoCard = infoCardTemplate.content.cloneNode(true);
+
+ const strongEl = newInfoCard.querySelector('.info-card__heading--strong');
+ strongEl.innerHTML = strongMsg;
+
+ const infoBodyEl = newInfoCard.querySelector('.info-card__body');
+ infoBodyEl.innerHTML = bodyMsg;
+
+ const pictogramEl = newInfoCard.querySelector('.info-card__pictogram');
+ pictogramEl.classList.add(`info-card__pictogram--${pictogramName}`);
+
+ here.innerHTML = '';
+ here.replaceWith(newInfoCard);
+ }
+};
+```
+
+Followed by a query to find the info card elements and a loop to add our data.
+
+```javascript path=landing.js
+const infoCards = document.querySelectorAll('.info-card');
+[...infoCards].forEach((infoCard, index) => {
+ updateInfoCard(infoCard, infoCardDetails[index]);
+});
+```
+
+### The styles
+
+
+
+Looking at the landing page you should see the updated information where
+previously only the title was rendred. In order to complete our info card we
+need to add some styling.
+
+First up let's make the picograms visible with the following.
+
+```scss path=style.scss
+.info-card__pictogram {
+ width: $spacing-10;
+ height: $spacing-10;
+ background-color: $text-primary;
+}
+
+.info-card__pictogram--accelerating-transformation {
+ mask: url('/accelerating-transformation.svg') no-repeat center;
+}
+
+.info-card__pictogram--advocate {
+ mask: url('/advocate.svg') no-repeat center;
+}
+
+.info-card__pictogram--globe {
+ mask: url('/globe.svg') no-repeat center;
+}
+```
+
+The remaining styling is to make the info cards pleasing on the eye. Use of
+Carbon breakpoints, which also control the number of grid columns, keeps our
+page looking great even on the narrowest of devices.
+
+```scss path=style.scss
+.info-card {
+ display: flex;
+ height: 300px;
+ flex-direction: column;
+ justify-content: space-between;
+ padding-inline: $spacing-05;
+ border-left: 1px solid $border-subtle;
+
+ @include breakpoint-down(xlg) {
+ &:nth-of-type(2) {
+ border-left: none;
+ padding-left: 0;
+ }
+ }
+
+ @include breakpoint-down(lg) {
+ flex-direction: row-reverse;
+ border-left: none;
+ padding-inline: 0;
+ gap: $spacing-07;
+ padding-top: $spacing-10;
+ height: initial;
+
+ &:nth-of-type(2) {
+ padding-top: 0;
+ }
+ }
+}
+
+.info-card__heading {
+ @include type-style('heading-03');
+
+ margin-top: 0;
+}
+
+.info-card__body {
+ @include type-style('body-long-01');
+
+ margin-top: $spacing-06;
+}
+```
+
+## Check accessibility
+
+We've added new markup and styles, so it's a good practice to check
+[Equal Access Checker](https://www.ibm.com/able/toolkit/tools/) and make sure
+our rendered markup is on the right track for accessibility.
+
+With the browser extension installed, Chrome in this example, open Dev Tools and
+run Accessibility Assessment.
+
+## Push to GitHub
+
+That is it you are done. Just one more push to save your completion of step 4.
+
+### Git commit and push
+
+First, stage and commit all of your changes:
+
+```bash
+git add --all && git commit -m "feat(tutorial): complete step 4"
+```
+
+Then, push to your repository:
+
+```bash
+git push -u origin step-4
+```
+
+