CSS Frameworks & Preprocessors Flashcards
Why use CSS Frameworks?
1) focus
2) cross-browser solutions
3) Write less, think more!
4) common knowledge base, standards and problem solving methodology
5) Best of breed solution.
1) allow you to focus on your specific problem and not re-create solutions for common problems that have already been solved.
2) come with Cross-browser solutions. However, browser support varies. Review the specific framework documentation for browser support.
3) Write less, think more! Think about solving issues unique to your own problem.
4) Allows team members to share a common knowledge base, standards and problem solving methodology
5) Best of breed solution.
Few major issues that CSS Frameworks should address:
1) Reset or normalize
2) Grid system
3) Base styling and typography
4) Icon sets and glyphicons
5) Responsive solutions
6) Widgets
7) Complexity
8) Customization, tools and documentation
1) Reset or normalize
Frameworks make use of a this popular technique. At the time of this writing, most modern frameworks make use of normalize.css
2) Grid system
Grid systems are responsible for determining the widths of columns of content and how they behave when resized.
3) Base styling and typography
Base styling refers to the default look and feel of the framework. While it’s convenient to have a pre-styled application, base styling is also responsible for the “cookie-cutter” look. It is the developer’s responsibility to properly customize/overwrite the framework’s default styles.
4) Icon sets and glyphicons
Frameworks may come pre-packaged with a set of common image-based icons or font-based icons.
5) Responsive solutions
Content may be moved around or hidden/shown. Many frameworks have responsive solutions built in. This means that things like media query breakpoints and ranges are also built in. They provide a solution to the problem. However it may not be the ideal solution for your project.
6) Widgets
As front-end frameworks evolved, common UI elements that included JavaScript were included by framework authors and contributors. These “widgets” include:
- navigational elements, such as dropdown menus and breadcrumbs,
- callouts such as popups and tooltips
- content presentation elements such as accordions and tabbed navigation
Knowledge of the framework’s JavaScript API would be necessary.
7) Complexity
Some frameworks may make use of other technologies or libraries that you may not be familiar with and learning curves vary. For example, knowledge or SASS or LESS may be necessary.
8) Customization, tools and documentation
Framework authors and contributors may provide customization tools (pick and pack options) or tools such as automation and skinning tools.
The quality of documentation and technical support vary. This is typically a reflection of the community culture, support and goals of the people behind the framework. Prebuilt templates and themes may be easily available.
CSS Preprocessors takes a file that is written in non-standard CSS and compiles it into regular standard CSS that browsers can understand.
CSS Preprocessors takes a file that is written in non-standard CSS and compiles it into regular standard CSS that browsers can understand. The languages that these pre-processed files uses has many advantages.
The languages that these pre-processed files uses has many advantages:
- They extend the language of CSS to include variables, nesting, mixins, logic and functions in your CSS code
- The aim to reduce repetition, improve organization and maintainability and save time.
Two popular preprocessors are _____ and _____.
Two popular preprocessors are SASS and LESS.
Top CSS Methodologies:
OOCSS, BEM, SMACSS
