CSS FRAMEWORK 1: What is the name of this framework? Bulma What company maintains this framework?
- Jeremy Thomas / Source code licensed by MIT What does it advertise about itself to appeal to potential users?
- Free, open-source grid system used by many people
- Known for simple use and customize for your site How do you include this framework on your own site if you want to use it? Does it have a CDN?
- npm, CDN, and GitHub repository Does it have a grid system? If yes, describe how that grid system works.
- Yes, a CSS framework based on Flexbox
- Adding columns and they resize themselves based on number of columns
- You can have nested columns
- Adjust the width and height
- Change the size and responsiveness Find an example of a website that uses this framework. How much does it differ from the default appearance? Mythril.io
- it differs a lot from the basic columns I see in the Bulma homepage
- It isn’t just basic columns but looks like one column at the top is floating on its own
- Also has effects for the side scrolling with arrows
- Picture and text within the container Does this framework have an icon set? If yes, include a code snippet of how you’d use one.
- Bulma is compatible with all icon font libraries.
- icon class is a reliable square container
- icon sized accordingly to the icon library you are using
- the icons can be customized Take a look at the buttons section of the docs. How do this framework’s buttons compare to a plain HTML button?
- different colors, light version, various sizes, inverted, rounded
- pseudo-class for the buttons
- disabled
- fonts and icons within button Take a look at some of the default menu options (such as for page headers and footers) and pick one you think looks the best. How difficult are these to implement? Are they responsive? How difficult do you think something like this would be to implement without the help of the framework?
- navigation bar or sidebar
- it would be difficult to implement without a framework as we would have to create a menu/nav bar from scratch and define each element/style
CSS Framework #2 What is the name of this framework? Materialize What company maintains this framework?
- google What does it advertise about itself to appeal to potential users?
- Free, open-source grid system used by many people, very popular, has everything you need, very custom
How do you include this framework on your own site if you want to use it? Does it have a CDN?
- copy and paste the CDN into my HTML filw and upload the repository. Does it have a grid system? If yes, describe how that grid system works.
- Yes, standard 12 column fluid responsive grid system -It is a grid system based on columns that can then be moved around and customized using the tools given by materialize. You can also create columns within columns. Find an example of a website that uses this framework. How much does it differ from the default appearance? Painting with a twist.com
- Basic columns are now gone, its more custom to fit the feel of the company
- no animations or icons on the page, they kept it bare.
- basic list items
Does this framework have an icon set? If yes, include a code snippet of how you’d use one.
- Materialize uses google based icon library