Vis Ix Des1 Learning Diary 03

Some Basics of CSS and Bootstrap.

Browsing through the basic tutorial of Bootstrap, I realized some of the really interesting features of this CSS library. Comparing to the basic CSS components that the browser natively provides, Bootstrap give the designers the ability to access components that are way more advanced and complex than the original one. Just like buttons. In regular CSS, if the designers want to give different buttons different hierarchy for various usage such as warning, primary or secondary or even links, the designers must customize each level of these buttons, from the background color to font. But in Bootstrap, all of these styles are natively created and can be utilzed by the designers using one single, simple code. Also, other button style like outline button can also be found in Bootstrap. These uniquely unified library can help the designers to create elegant and beautiful website using the elements that have coherent design style. Besides the previous benefits, Bootstrap is also providing more advanced method to control the typeset of the website. Besides the basic percentage of the width of a button, Bootstrap allow the designers to use columns to control the layout of different elements, which is pretty fascinating.

Also from the CSS cheat sheet as well as the w3school, I learned more basic attributes of CSS anmation and button itself. I tried to mimic a specific animation when the user move its cursor on the button, yet there is still a tiny problem with the height of the button. I will look further into the more adaptive and accurate layout guidlines of CSS without Bootstrap.

CSS Cheat Sheet
Buttons - Bootstrap
CSS Buttons

See the Pen OByRgG by Clyde (@ClydeSHenry) on CodePen.

Write a Comment