This is my final blog post as a Flatiron school student, it won't be my last blog though. I hear all over how blogging is a good thing, so I plan on sticking with it, plus its kinda fun and super helpful for me to organize my thoughts on the topic I just binged.This post is fitting to be my last as a bootcamp student, probably a bit rushed and crammed in during a crazy project week. And to stay on that sort of theme I'm going to be talking about some of the options around to style your projects. In my cohort it seemed to be a common thing that we would all have big dreams and high hopes about having time to make my our apps look exactly how we invision, then we get into it and we generally had to put styling and UI on the back burner in order to ensure all the functionality we could dream up.
From the start of bootcamp I had been thinking about what I would possibly make for my capstone project, I decided to make something to try to help my grandmother with the animal rescue she runs. The project takes place during the final 3 weeks of the program, and I thought I would be able to have all of week 3 for styling...lol; I really wanted to make this LOOK great for her as well as function well. I ended up with about 24 hours. After panicking I decided to dive right into using Material UI, I used it for a simple table, and everything broke. So, I switched gears to Semantic ui React, one of my cohort mates was having good luck with it. I ended up getting the table to work. I wish I could tell you what was breaking things, but it was something infuriating like a curly brace in the wrong spot. Anyway here's a little information on a few of the things I used, considered using or want to dig into a bit more.
Semantic UI React- A frontend framework used for designing and theming. I see a lot of people comparing this to bootstrap, I opted to not look into bootstrap, simply because other options were more strongly recommended. I found that Semantic was really easy to begin to implement. The installation to use their theming options is different from the basic start up and was giving me issues, so this is something I want to get sorted out so I can really dive in. I loved how easy this framework was to pick up and made some impactful changes very quickly which is exactly what I needed. I had a card style layout and forms looking more intentional and legible for the user within an hour or so of picking it up. This framework uses a grid layout that was much easier to implement and work with than classic CSS, I only had to fight with centering a div for a min before I had a better grasp on it. Semantic ui React is a great place to start to get forms, tables, layout and buttons into your project quickly, you import components right where you need them and you've got the ball rolling, and your page is looking less like it was made in the early 90's and more intuitive to use. Something to consider that was a brief gotcha for me was with Grid, you want to use that in the closest parent component so you can render the child component on the grid that's passed down. Another note for Semantic UI React grids is that it is based on a 16 column layout versus the 12 column for many other styling and UI options.
Here is some Semantic UI React used to make a form.
Material UI- is another option for styling frameworks. Oh boy, I was so stoked to get into this but I was a little worried about having the time to get a handle on it. From what I can see Material Ui is a little more widely used and better maintained than Semantic. I found that both options had pretty solid documentation. Material UI also allows you to import the components you need to use right where you need them. As I was just beginning to use Material UI then switched to another option, my experience with it is limited. But I was getting rolling with a custom theme and had a semi styled simple table working. I am going to drop a youtube series that made me want to get lost in styling the hell out of everything, as well as a resource for planning out a custom theme. This is something I plan on getting familiar with when I start my next project. An example of the table i used with Material UI-
Styled Components is another popular choice but rather than being a framework its defined as Automatic Critical CSS: keeping track of which components are rendered on a page and automatically injects the styles there, this means the user has to load far less code since it's only going to go with what's actually being rendered. Styled Components was about to make its way into this same project, but I thought using three different options would be a little wild, and I wasn't trying to break something else late the night before I was due to present. I think this is another way I will continue to work on the styling and user experience for my grandmother's rescue app and my next project. This seems like a nice way to compliment the more UI focused aspects of Semantic and Material, with a more up to date way to use CSS.
What I loved is that I was able to pick up the basics for these frameworks and quickly implement some things. I also loved that there were no issues in using multiple options together which I think is great seeing as there are subtle differences in the options available for certain things like buttons and forms. I encourage you to try all three out in your next project and see what works, I would love to hear what other beginners used and the thoughts around it. I had a hard time finding a sort of review of these to compare what they could actually do. (the docs for Material UI and Semantic UI React were an easy place to start)
Material UI, this guys covers so much stuff, found it super helpful.
Top comments (0)