Tag: bootstrap

I Have No Idea What I’m Doing – An Introduction To CSS Grid

Jenn Clore

In my most recent class assignment, I was introduced to CSS grid. I read articles by Jen Simmons on the topic and watched instructional videos by Rachel Andrew. As I read along and watched the examples in action, it seemed easy and straight-forward. It couldn’t get any easier than actually writing out exactly how you wanted divs to be laid out.

As I watched the tutorial videos assigned and followed along, I thought to myself, “ok, finally something I can do.” But as with all of my projects so far, it’s never as easy as it seems. I often tell myself that I have no idea what I’m doing. This project was no different.

I was tasked with redesigning the index page of my Discography project and do the same thing but using CSS grid. In the original assignment, I used Bootstrap.

It was easier to layout most of my page in CSS grid. It turned out I was already using the Holy Grail layout, and I didn’t even know it. Way to be original. So that helped a lot with positioning and naming my elements.

I struggled with getting my header nav links to align to the left and be responsive. I was able to accomplish that using a bit of flexbox. Part of the assignment was to add a feature query. I tried out the initial-letter rule to add a bit of flare to the band description in the center of the page.

Caniuse says initial-letter is a no-go on Chrome, but with the @support rule, it should be seen in Safari browser and be skipped over in other browsers that don’t support the feature.

I can say that by the end of the project, I had a better grasp on CSS grid and its capabilities. CSS grid and flexbox seem easier to use than Bootstrap, in my opinion.

Check out my design using Bootstrap – http://www.clorecreative.com/PanicDisco/index.html

Check out my design using CSS grid – http://www.clorecreative.com/cssgridpatd/index.html

Overall, can say I spent more time on the site using Bootstrap so it has a more polished look. But the CSS grid site took less time to put together. If I had to choose one or the other going forward, I think I would lean toward CSS grid and flexbox.

 

 

When Should You Bootstrap?

Jenn Clore

The framework Bootstrap seems to be a controversial subject with web designers and developers alike. According to W3Cschools.com, Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Doesn’t sound too controversial, does it? However, if you dig deeper into what Bootstrap is, you’ll find various articles from people in the industry who aren’t fans of the product.

“The main one being that all Bootstrap websites tend to look the same.” – CSS Guy

“Bootstrap was never meant to be used as a website development framework per se…The thing is that Bootstrap was built at Twitter, so that the developers could work faster by using a standardized interface to present their creations…A purpose that’s not entirely in line with the standard concept of web development.” – HTML Center

“One of the major issues I have with Twitter Bootstrap is that you end up with a whole lot of DOM elements crammed full of classes.” – Zing Designs

Despite the naysayers, Bootstrap IS one of the most powerful frameworks available and that didn’t happen without a majority of front-end developers having successful experiences. Bootstrap continues to be a mainstay in the market because of extensively developed features such as:

  • Easy start-up
  • Great grid system
  • Base styling for most HTML elements (Typography, Code, Tables, Forms, Buttons, Images, Icons)
  • Extensive list of components
  • Cross-browser compatibilities
  • Responsive design

While it’s true that Bootstrap, straight out of the box, will have cookie-cutter templates and a lot of unnecessary code, it’s important to understand that Bootstrap is completely customizable. You are not limited to un-editable themes or code-heavy features. You can pick and choose what features you want to utilize for your project and if you are willing to spend the extra time, you can design your website to look exactly how you want it.

For me, when it comes time to develop a mobile-ready website quickly for a client without having to incorporate it into an existing project, I would consider using Bootstrap. However, as my web design instructor said, “You will always need to learn how to deal with tons of code that you didn’t write. Your Bootstrap experience will teach you some things about that.”

If to Bootstrap or to not Bootstrap is still the question, check out this flowchart by ZingDesigns to help make your decision.