Grow

[SamPatt]

On our front end documentation page, our design was not responsive and the layout could be improved. These steps could have be made into components.

JSX snippet

    return (
        <div className="docs-container">
            <div id='preview-container'>
                <div 
                    className={showComponent 
                        ? 'preview-button red' 
                        : 'preview-button green'} 
                    onClick={handleAdd}> 
                        { showComponent 
                            ? 'Remove'
                            : 'Click to add auto-component here'
                        }
                </div>
                {showComponent ? <AutoComponent /> : ''}
            </div>
            <h1>Documentation</h1>
            <div className="flex-container">
                <div className="steps-container">
                    <section className="step">
                        <h2>1. Install auto-component</h2>
                        <p>Install `auto-component` from npm as a developer dependency within your project directory.</p>
                    </section>
                </div>
                <div className="code-container">
                    <CodeBlock code={devInstall} />
                </div>
            </div>
            <div className="flex-container">
                <div className="steps-container">
                    <section className="step">
                        <h2>2. Import AutoComponent</h2>
                        <p>Import inside the file where you're building the new component.</p>
                    </section>
                </div>
                <div className="code-container">
                    <CodeBlock code={devImport} />
                    <img
                    src="step2.png"
                    alt="step2" style={{maxWidth: '100%', height: 'auto'}} />
                </div>
            </div>

CSS

.docs-container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin-top: 80px;
}
.flex-container {
  display: flex;
  margin-top: 20px;
}
.steps-container {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20px;
}
.code-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.step {
  width: 100%;
  background: #1a1a1a; /* Dark background for the step section */
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid #4fd1c5; /* Tailwind CSS brand color for example */
}

.code-block {
  position: relative;
  margin-bottom: 10px;
}
.code-block button {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 10px;
  background: #333;
  color: #ccc;
  border: none;
  cursor: pointer;
}

#preview-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 100%;
}
.preview-button {
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding: 5px 10px;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
}
.green {
  color:#9ec79b;
  border: 3px solid green;
  background: rgb(57, 86, 57);
}
.red {
  width: 100px;
  color:#d3a7a2;
  border: 3px solid rgb(226, 73, 59);
  background: rgb(125, 98, 92);
}
.green:hover {
  color: rgb(2, 38, 2);
  background:rgb(74, 175, 91);
}
.red:hover {
  color: rgb(138, 9, 0);
  background:rgb(181, 83, 68);
}

[valenium]

I appreciate how you used CSS to have more consistent styling across your UI - all your elements look fairly aligned and neat.

I have found that using a combination of Tailwind and CSS extremely beneficial for elements that require specific styling like hover functionality: .green:hover { color: rgb(2, 38, 2); background:rgb(74, 175, 91); } .red:hover { color: rgb(138, 9, 0); background:rgb(181, 83, 68); } As the general dimension and display of that element already pre-exists within it's original element, adding a Tailwind tag can help make your CSS files more DRY. On the other hand, you are separating your styling for one element into two different documents so it could deter the feasibility in someone reviewing your code.

[smackeem]

From experience I know all too well how challenging and time consuming it can be to get your web application responsive when using only CSS.

Maybe combine CSS with other libraries such as SASS or Tailwind. SASS is like writing JavaScript which helps a great deal when managing and organizing media queries using features like variables and mixins.

My group and I used it for the design of our Project 2 application and it helped with handling responsive design, maintainability and readability of the stylesheet. So I would suggest getting familiar with it and see if it's something you would want to use.

Here is a link to a youtube video I watched to learn SASS last unit : https://www.youtube.com/watch?v=_a5j7KoflTs