Frontend Mentor - FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

---

Overview

The challenge

Users should be able to:

• ✔️ View the optimal layout for the component depending on their device's screen size
• ✔️ See hover states for all interactive elements on the page
• ✔️ Hide/Show the answer to a question when the question is clicked

➕ Dynamic element animation

In plus, I add a small animation in the box illustration to add more dynamism.

Screenshot

📱 Mobile

💻 Desktop

Links

• Solution URL: GitHub Repository
• Live Site URL: GitHub Pages

---

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• CSS3 custom properties
• Flexbox Layouts
• Powered by Sass/SCSS
• BEMIT Arquitecture
  • ITCSS
  • BEM

What I learned

Breaking Change: CSS Variable Syntax

I use Sass variables in conjunction with CSS variables to work with the best of both worlds.

To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.

Read more about Breaking Change: CSS Variable Syntax

/* SCSS Variables*/
@use "sass:meta";

/* Font-family */
$font-family: "Kumbh Sans", sans-serif;

/*	Colors	*/
$dark-blue: hsl(238, 29%, 16%);
$soft-red: hsl(14, 88%, 65%);
$soft-violet: hsl(273, 75%, 66%);
$soft-blue: hsl(240, 73%, 65%);

/* CSS Custom properties */
:root {
	/* Font-family */
	--font-family: #{$font-family};

	/* Colors */
	--dark-blue: #{$dark-blue};
	--soft-red: #{$soft-red};
	--soft-violet: #{$soft-violet};
	--soft-blue: #{$soft-blue};
}

JS - Elemet.scrollHeight

With this attribute, Elemet.scrollHeight we achieve the animation to expand and collapse the FAQ answers.

// ./js/behaviour.js
53. articleAnswer[0].style.height = `${articleAnswer[0].scrollHeight}px`;

HTML - FAQ element component (WIP)

This is the skeleton for creating a component for the new FAQ articles:

<article id="article__01" class="faq__article" tabindex="1" accesskey="1">
	<h2 class="faq__article-title">How many team members can I invite?</h2>
	<div class="faq__article-answer">
		<p>
			You can invite up to 2 additional users on the Free plan. There is
			no limit on team members for the Premium plan.
		</p>
	</div>
</article>

---

Continued development

The next step is to convert this FAQ accordion into a web component with the help of LIT, a simple library for building fast, lightweight web components.

Useful resources

• Sass - A stylesheet language that’s compiled to CSS

• ITCSS - Managing CSS Projects with ITCSS

• BEM - Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

• LIT element - Simple & Fast Web Components.

• Responsive Accordion - Video to inspire a Responsive Accordion Ui Design Using HTML CSS & JavaScript. - THX 2 Bedimcode

---

Author

• Frontend Mentor - @terremotoBCN
• Github - @terremotoBCN
• Twitter - @terremotoBCN
• WordPress - @terremotobcn
• Tumblr - @terremotobcn

Acknowledgments

Many thanks to Frontend Mentor and its fantastic community that allows us to grow and improve as Frontend developers.