From Front Desk to Front End p.29 Dictionary Web App CSS

Photo by Tanguy Sauvin on Unsplash - I'm a waterbug doing CSS before diving into the depths of JavaScript!

Hi, I'm Tauri!

I am a student with Skillcrush and I finished their Front End Developer track and am now in the midst of building my own projects in order to further practice and solidify APIs and React, and I am also neck deep in the job search!

This week was dedicated to setting up my boilerplate and starting the mobile styles by styling the nav bar. I had some flukes and had to set some fixed widths to get the look I was going for, which I don't think is proper for the responsiveness I want. Looks nice, but I'm going to do more investigation into this next week.

4/10/23:

I set up my CSS boilerplate, started a SASS file and got it compiling live in VS Code, and imported my layout partial in reusing my module from my portfolio. I also started to import in some font styles. I went to check how they're looking in my local file, and none of them are showing! I can see them compiled into my main.css file, so I dunno what's happening there but I have to figure it out! Pretty fizzled out after a long day of job applying (catching up from not applying on Sun so I could catch up on some chores and have some fun by going to a show in the evening) so I'm going to revisit this tomorrow. 30 mins

4/11/23:

I walked away from writing up my blog yesterday and knew exactly what was wrong. So so obvious it's embarrassing and I almost considered not mentioning, but I want y'all to feel reassured that it happens! Not only could I not see the styles when viewing my page, but I couldn't see them when viewing the code with DevTools either. Sooo, what must be happening? The style sheet isn't connecting! And sure enough I had mis-named my style sheet for this project "styles" but I was setting up all my style sheets named "main". Boop, fixed.
I started work on the nav bar today. The book logo is on the other side from all the options to toggle different settings so I flexboxed the whole nave and space-betweened them apart from each other. Each setting includes two elements to be more descriptive (font words plus down arrow for the drop down, and toggle plus an image for the dark-mode toggle). I took into consideration that I want the words and arrow for the dropdown to all be clickable so put that all in a button zone, but the toggle itself is where someone will click to switch between the modes. For now I copy-pasted the toggle properties from W3 schools, altered the colors + adjusted the size of the toggle background. After adjusting the toggle-ball size, it's not quite switching within the boundaries of the switch like I would like. I need some time to research some of the different properties before I finish with this, then fiddle with the margins around everything to get the mobile layout down. 30 mins

4/12/23:

Doing some research on the code I lifted from W3 schools yesterday, and according to MDN -webkit-transition: is deprecated and not recommended for use bc only Safari-based browsers support it. transitions: without any prefixes is supported by all browsers tho. I can't figure from this why both were included in the code from w3, but I removed the webkits on and it's still working in my Chrome browser but I'll do a cross-browser check soon.
I did some experimentation to figure out what the transitions affect. The toggle has been named with a span class of slider. Updating this transition rate under the slider class in my CSS changes when I extend to a longer rate (like from .4s to 4s) it takes longer for the gray slider to transition to the 'checked' color purple! Updating the transition rate under slider:before changes the rate at which the toggle moves from one side to the other. So I kept those as is at .4s.
I adjusted the bottom and left properties so that the ball sat more neatly within the slider space.
Same thing with the transform property that is given an -ms and -webkit prefix when transform is supported across all browsers, so I removed those as well. Adjusting the property value of this under input:checked + .slider:before allowed me to keep the toggle within the slider space whenever it is checked so now it's perfect! 30 mins

4/13/23:

Today was a success with keeping up my schedule of job applications and prospecting, but a crapshoot for code. Once I centered my nav horizontally with flexbox, all the elements got smooshed into the center when I wanted them to spread across the width of the page. No amount of playing with all related divs and their widths allowed it to stretch. I was pretty bummed and feeling the imposter syndrome, but I read this article on CSS Tricks about getting width and flexbox to play nice and it doesn't quite apply to my situation. 30 mins

4/14/23:

I had to force the min-width of my nav bar to be a specific set of px to get my nav to spread properly. That feels wrong, but cooouuld work.
I wanted the background and the border of of the drop-down to select different fonts button gone. Setting it to be the same color as the background did it. This is a great article tho about default button settings from CSS Tricks.
Then I took some extra time today to set up the border-line between the font drop down and dark mode toggle settings and mess with the paddings and margins a bit so I was able to bring it just a bit closer to the design comp for now in the nav bar (not including the search bar) 1 hr

This is my nav bar draft:

And this is from the design comp:

Check out my code on Github here.

And it's of course as I walk away from a problem that I always have my best ideas: I'll be referencing an older project I did with a similar nav set-up next week, my single page responsive website for the restaurant Rogue Pickings.