Creating an appealing visual component can be an effective way to draw someone towards a part of your web application. In part 1 and part 2 of this series, we explored the logic behind the dates to display and the React code that used a set of dates to render a visible component in the browser. In this next part, we will explore the code that gives our component the visual appeal.
When I first began coding, I never enjoyed CSS as much as the other aspects of development. My first job had a singular CSS file controlling the entire web application’s styling. Having limited experience with CSS at the time, this was an absolute nightmare. However, that experience is what drove me to further explore the best way to structure my CSS code moving forward and in future projects. Much like other parts of development, CSS has its own design patterns and practices which were further enabled by technologies such as SASS and Styled Components.
Before we begin, the following examples will be in SASS which is a superset of CSS. SASS is compiled into CSS, but allows functionality which make organizing styling code easier. My 3 favorite aspects of SASS is that it allows nesting of CSS for specificity, creating variables for reusability, and importability of SASS files into each other. Let’s do a breakdown of what we’ll be taking a look at today:
- Styling the calendar header using Flexbox
- Styling the month indicators using Flexbox
- Styling the weekday indicators using Grid CSS
- Styling the date indicators using Grid CSS
- Adding in themes
#sass #web-development #react #css
