Investigate CSS Frameworks

[westgards]

Description

Our team needs to pick a CSS framework. Please comment and add your choice

https://hackr.io/blog/best-css-frameworks

[mlhalbert]

Tailwind

• Highly Customizable: Tailwind CSS comes with a default configuration, but it can be overridden with a tailwind.config.js file. This enables easy customization of styling, themes, spacing, palettes, etc. Use Tailwind’s utilities to enable easy project management and develop a website that delights customers.

• Carries Commonly used Utility Pattern: With Tailwind CSS, users can cut down on having to name too many classes. It comes with common utility patterns to deal with standard requirements: specifying and organizing classes, cascading classes, etc. In simple terms, creating custom components become so much easier. Instead of hard-coding, just use the theme() function to derive values from configuration files.

• PurgeCSS Optimization: PurgeCSS reduces file size by scanning HTML code and eliminating unused classes. In combination with Tailwind CSS, this is particularly useful. As a project expands, so does the size of accompanying CSS files. Optimizing via PurgeCSS reduces and cleans up CSS file size, making it infinitely more manageable, especially before deployment.

• Responsiveness Made Easy: By default, Tailwind CSS utilizes a mobile-first approach. To quote the website, “Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.”Utility classes simplify the creation of complex responsive layouts but allowing them to be used across multiple breakpoints. The result? Hassle-free implementation of responsive design.

• Effortless Community Interaction: Tailwind’s active community is an excellent place for users to get their questions answered, especially when dealing with stubborn issues. Get CSS-related queries solved and create excellent websites faster.

[mlhalbert]

Bulma

• Easy to use: Bulma’s modular design approach and highly customizable nature make it a preferred tool among devs and designers. Its responsive templates cut down on design effort, and it has a rich catalog of components to choose from – nav bars, tables, panels, dropdown menus, etc. Bulma also comes with starter templates and interactive tutorials. It also has a robust Stack Overflow community that is greatly helpful for having questions answered.

• Easy to learn: Bulma’s modular nature is meant to solve practical problems that individual developers may encounter. Bulma is designed to be easily navigable, and individuals can quickly figure out how it works.

• Browser-Agnostic: Bulma-designed websites are compatible with most major browsers. This makes life easier for testers, especially when conducting cross browser testing.

• Robust Update Schedule: Bulma might be new on the scene, but new features are added almost constantly. Additionally, updates are implemented to address existing bugs or issues users may be dealing with.

[westgards]

#1 Choice

Tailwind Github Link: https://github.com/tailwindlabs/tailwindcss PROS:

• Pre-designed utility classes & modular components(like bootstrap)
• beginner-friendly, least amount of learning to get started (works with our timeframe)
• Recommended by our TAs

CONS:

• can't think of any atm

#2 Choice For a challenge.....

[Foundation](Foundation: Open-Source, Advanced UI Framework Github Link: https://github.com/foundation/foundation-sites PROS:

• opensourced, lots of community support
• Supports JavaScript with tons of components
• Super customizable, semantic so it is easy to read and understand what is happening in the code
• Used by the following companies Ford, Disney, Adobe, PIXAR

CONS:

• advanced, would take more time to learn

[westgards]

Team settled on a hybrid of Tailwinds CSS and traditional CSS