From Front Desk to Frontend p.37 Customizing Bootstrap with Sass

Photo by Craig Adderley:

Hi, I'm Tauri!

I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am looking for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects, so thank you for reading!

These past two weeks I pivoted into Bootstrap in order to start implementing accessible projects more quickly, esp to keep within the quick turn over time of the multi-page responsive website that my team and I are building for an organization that provides services for the visually impaired! Bootstrap is really compatible with and customizable with Sass which I'm really excited about, and so happy to apply what I've learned about Accessibility from Jon Kuperman to key in my HTML and any additional functionality I can add. ✨

Thursday 6/29/23:

I know I said I've shipped my accessible toggle for now, but I couldn't help but mess around on a new branch with the media query to read preferred color schemes and override features to allow those with preferences to override their preferences and choose. The media query worked like a charm, but my override features are proving trickier to implement. I'll come back to this.
Read over W3 WAI's guide to building an accessible dropdown with links (there are so many fantastic keyboard shortcuts!), including the original Menu Button Pattern and the corresponding Menu and Menubar Pattern. I read more about any features I didn't recognize, like aria-controls which in this case refers to the menu element that the menu button controls.
The Accessibility Features make note of some considerations for users that are using high contrast mode that I added to my Accessibility notes and that I will be applying to all of my buttons/links that present as buttons from here on:
"Because background color and text color styles can be overridden by operating system high contrast settings, a border is used to ensure the button has a visible boundary when high contrast mode is enabled."
It also explained why the icon styles in Kelly Giraudel's guide to building an accessible toggle had a "current color" value:
"To ensure the arrow icons used to indicate the expanded or collapsed state have sufficient contrast with the background when high contrast settings invert colors, the CSS currentcolor value for the fill and stroke properties of the SVG polygon element is used to synchronize the color with text content. If specific colors are used to specify the fill and stroke properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background."
There's A LOT going on in the JS for this accessible dropdown, so I'll be piecing it apart over the next few days.
So right away I can tell that an object is being made with all the this keywords and key-value pairs, but I don't recognize that constructor method. AH, it initiates creating an object within a Class per mdn docs!
I finally got curious about the "use strict;" expression at the beginning of the accessible components I've been using as templates thru W3C WAI, and it's just as it sounds -JS in strict mode- according to W3 Schools.
I start reading about the bind() method utilized several times, and I have a feeling that it has something to do with preserving this as mentioned by W3 Schools but I need to come back to this after a long day. Going to look over mdn web docs on this as well.

Friday 6/30/23:

One of the designers on our team put together a "Coming Soon!" page lickety split so we can put it up while we work on our client's site. So I used a little time today to make our private repo, look for and find some look-alike fonts compared to the style guide she gave us bc the person who created the design system used fonts that weren't free to use on the internet and our client was open to adjustments so I found some on Google Fonts, and I set up our HTML boiler plate + the barebones HTML for her logo, a little description of what's up, and a form to be able to submit to her for info while the site is down. I'm going to wait on the CSS until I can give my dev teammate a quick run through about coding live together with VS code and we're going to pair program the beginnings of the CSS together.

Wednesday 7/5/23:

I had a really great holiday with my partner and family! 🎆🎆🎆
Now I'm kicking back in action! We are pending our client getting back to us with the hosting she just bought for her domain names. She needs to create an FTP account so that we can upload files to it before we can get our "Coming Soon!" page up, and my dev partner in crime is not feeling well today so we are pending for a moment before we meet up in order to slap together this page.
So today I've been feeling kinda freaked out about the deadline on this big project and the imposter syndrome has been kicking in real hard. Robust accessibility is really important to me, but the complexity of the JS in the accessible dropdown from W3C WAI is pretty overwhelming for me and not something I feel comfortable with implementing in the short timeframe that we have for this project. I'm determined to crack it, but my plan is to take some more advanced JS workshops first- and it's really a great excuse to bc I've been wanting to crack into JS more for sometime.
Enter Bootstrap, which I haven't explored yet. I'm not a big fan of the ungainliness of the multiple CSS sheets and JS scripts and just applying them universally where I probably won't be using all the features for a single website, sooo many classes, and using an external JS library for everything, and honestly while I was in fear mode earlier today it made looking over the Bootstrap docs a little hard for me earlier in the day. But I love how a lot of accessibility features are already built in and that it will allow me to cater to my client with something that looks good and functions well within the requested timeline, which is my M.O. right now. So I utilized a Masterclass from Skillcrush in order to get me oriented and it did wonders to help me feel more grounded and alleviate some of my anxiety about all of this. I did a little practice with basic grid layouts, images, and slapping in a quick nav bar today. It was nice to be able to choose a navbar with the dropdown already built-in which did a lot to appease my worries today, but I will def be messing around a lot more with customization tomorrow!

Thursday 7/6/23:

I finished the little intro workshop to Bootstrap from the bonus materials that Skillcrush gives you in the Break Into Tech program, and I messed with styles for images, their set options for styling buttons and applying these to links as well as designated buttons. The instructor talked about customizing set styles by adding a custom style sheet, but I know there are ways to do this with SCSS so I'm finally ready to crack into the straight documentation!

Bootstrap Globals

I observed that the HTML5 Boilerplate that Skillcrush had us working with in our classes when building projects from scratch and Bootstrap both use the responsive viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
All box sizing is done with border-box which the docs pointed out can get weird with some third-party softwares like Google Maps, and this was great to know bc our client wants a map to the location of her company so we can override this by applying content-box box-sizing to specific widgets instead.
The Reboot that Bootstrap utilizes has many of the opinionated defaults HTML5 Boilerplate does, and also does things that I have just considered best after building a number of projects, like using margins horizontally, using rems for margins, and setting font to 1 rem in the body to go with the standard 16px but allow for customization by the user. Also, only resizing text inputs in forms vertically, and <label> tags are set to inline-block to allow for margins.
This comment about CSS and HTML validation cracked me up and let me know to be selective in getting the CSS and HTML I've set up validated when looking for the green lights.

Friday 7/7/23:

Met with my partner on my dev team today! I added her a collaborator on our private repo for the page, and showed her how to install the Live Share extension so we could code together on VS Code. There were a lot of little hiccups along the way, generally bc of blocked permissions on her end that she needed to find and clear up. Then we got to setting up the general styles for our Coming Soon! page. She had to leave after an hour, so I worked on it for another hour and got everything looking pretty good and generally responsive so we wouldn't have to use media queries for this simple page with only one column of elements, including a basic form for anyone that wants to contact our client while her site is down.
I tried to learn about Bootstrap customization today, and was just reading straight without trying out anything for myself. So understandably, it all totally flew over my head. I'm pretty fried by the end of the week, so I'll start fresh again next week and walk myself through the example. The Masterclass on Bootstrap at Skillcrush directed me towards Tutorial Republic which has some nice breakdowns of the code snippets, so I know this will really help me when implementing components in my own projects with Bootstrap.

Monday 7/10/23:

Code I pushed was all to our private repo. Over the weekend my teammate validated the code and made a few changes, including adding a title which I always forget until I run it through a validator. shakes fist So I took some time to update my HTML Boilerplate to include a note to myself to insert the title (then remove that comment of course). She also stylized the text area of our form, which I couldn't get to on Friday night, and edited the image file and img tag in the HTML to eliminate spaces in the original name the client had the image sent under. Such small but powerful changes! I further added a hover style to our button in addition to the focus style, removed all the notes in commentary that she had left me including commenting out my old code which was very nice of her but not necessary in the final so I cleaned that up.
I also kept trying to dissect the Bootstrap docs in order to understand how to properly customize with their Sass files. It wasn't quite lining up for me, so I looked for more resources. After going through a few, I found this great straight to the point guide from freeCodeCamp. This is the guide I'll be practicing with tomorrow.
I've also been working with our designers for our project all day to make sure that contrast is really solid on the mock-up of the home page (and all future pages of course). Bc this is a website about services for the visually impaired, WebAIM AA ratings are not good enough! So we are aiming for AAA in all areas, and there was definitely some tweaking necessary and creative problem solving with me and one of the designers. Tomorrow we are going to meet with the client and get her feedback, so by Friday the dev and I will be ready to receive the homepage once they can implement any feedback to get developing!

Tuesday 7/11/23:

Our client loved the design!! Her feedback was for very small doable changes, and it was wonderful hearing her excitement at everything we've been doing thus far! We've almost got her Coming Soon! page going, but she uses Dubsado for her CMS and we've hit some snags in access regarding having it allow us to access the pathway through which we can link in the form so that all info sent in will receive a profile through her CMS. But we are pushing through with her to get this up ASAP!!
I finally sent out my email to WAI today in order to let them know I used WAI material in order to build my darkmode toggle, and also to share with them what I found out about the deprecated event.keyCode feature from MDN docs in hopes this is helpful to them.
I used this guide by Joe Galley to install Dart Sass and I added it to my Path. This honestly took me forever. I thought I could set it up wherever I liked, but my PATH is specified to a specific folder so I eventually moved my dart-sass folder to there and specified this in my path. I also realized Git Bash did not allow me to check for the the Sass version to see if it had been installed correctly, but the Command Prompt I could use through Windows does allow me to check for it. I didn't know the command line I accessed thru Git Bash was different than the one I can access through Command Prompt so this is definitely adding to my list of things I wish I understood better... Then I manually created a file structure like Bootstrap recommends for customization bc I had downloaded the Source Files by themselves. I made this into a new repo I'm hoping to practice some Bootstrap customization in!

Wednesday 7/12/23:

Finally saw some pay off for all the learning I've been doing regarding customization of Bootstrap with Sass! I installed Sass Dart today, and used it to create a custom.scss file in my project in which I successfully overrode the Bootstrap primary and secondary colors with custom test colors that I could see change within a "primary" colored button!

Thursday 7/13/23:

I began to customize a Bootstrap navbar with a dropdown for links today according to the styles given to me by our designers! It's a tricky job of finding out what variables each part is referring to before overriding it with my custom styles. It's interesting styling this way, bc I start with a working product and then adjust the details until it suits the design by either substituting completely or referring to other set variables so that it feels more like sculpting than building from scratch! My test subject is for the project so it's all under wraps for now, but trust that the navbar elements are all in order and the font sizes and colors for the various parts are looking spiffy.