Journal of Global Research in Computer Sciences
MenuISSN: 2229-371X
ISSN: 2229-371X
| Nilesh Jain Lecturer, Mandsaur Institute of Technology,Mandsaur |
| Related article at Pubmed, Scholar Google |
Visit for more related articles at Journal of Global Research in Computer Sciences
In this article we have compare different responsive CSS frameworks and found that Bootstrap having more flexibility and more stability. Bootstrap framework is actively maintained by the community.
INTRODUCTION |
| Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly. |
| Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display. |
| Media queries, a feature of cascading style sheets (CSS), allow the developer to specify when a certain style takes effect. With CSS2, for example, a media query will serve printer-friendly style sheets if requested. CSS3 has expanded query capabilities that allow style sheets to be targeted to a device’s display and serve a desktop, tablet or smartphone style sheet depending on the query response. |
| This capacity means that instead of having to build a special mobile version of a website -- which often requires writing new code from scratch -- developers can simply build multiple style sheets for the same web page and perhaps even associate different images with each of the style sheets. As a result, HTML code can be repurposed instead of having to be rewritten, which saves considerable development time. |
CSS FRAMEWORK |
| A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature. In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site. |
FRONT-END FRAMEWORKS (OR CSS FRAMEWORKS) |
| Frontend frameworks usually consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) |
| The usual components are: |
| CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion. |
| Typography style definitions for HTML elements. |
| Solutions for cases of browser incompatibility so the site displays correctly in all browsers. |
| Creation of standard CSS classes which can be used to style advanced components of the user interface. |
| About responsive frameworks: Currently the rise of responsive web design techniques, which facilitate the development of websites that can adapt to various resolutions for different mobile and desktop devices, is leading to the emergence of responsive frameworks. That is, they solved the common problem of making a responsive site. These frameworks...to offer a responsive solution from the point of installation. |
Selection of frameworks |
| Within CSS frameworks, we can draw a distinction between two types of framework according to their complexity: simple frameworks and complete frameworks. This distinction is subjective, and doesn’t mean one is better than the others but rather that they give different solutions depending on the level of complexity and/ or flexibility required. |
COMPLETE FRAMEWORKS |
| They usually offer complete frameworks with configurable features like styled-typography, sets of forms, buttons, icons and other reusable components built to provide navigation, alerts, popovers, and more, images frames, HTML templates, custom settings, etc. |
Bootstrap |
| Sleek, intuitive, and powerful front-end framework for faster and easier web development. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. |
| twitter.github.com/bootstrap |
Foundation 3 |
| An advanced responsive front-end framework. Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation. |
| foundation.zurb.com |
Skeleton |
| A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. |
| getskeleton.com |
YAML 4 |
| A modular CSS framework for truly flexible, accessible and responsive websites. YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer. |
| yaml.de |
Tuktuk |
| Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully extensible sites easily. |
| tuktuk.tapquo.com |
Gumby |
| Gumby Framework is a responsive 960 grid CSS framework which includes multiple types of grids with different column variations which enables you to be flexible throughout an entire project's lifecycle. |
| gumbyframework.com |
Kube |
| CSS-framework for professional developers. Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom. |
| imperavi.com/kube |
Groundwork |
| GroundworkCSS has been built from the ground up with the incredibly powerful CSS preprocessor, Sass. |
| groundwork.sidereel.com |
ResponsiveAeon |
| ResponsiveAeon is an elegant & minimalistic css3 grid system framework, now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript |
| www.newaeonweb.com.br/responsiveaeon |
How to choose the right one? |
| Choosing the right framework for my site is far from simple, for several reasons: |
| 1. Every site is different and will require different characteristics. Using a very complete framework for a single page site may give an adequate result, but surely misses out on many resources. 2. Currently there aren’t many significant differences: they’re all very complete and easy to use. |
| Speed of installation: some are very simple to install and start using. Others require more time to configure. |
| Ease of understanding: some are a bit of a pain to get to grips with, complicated. Others, by contrast, are comparatively more straightforward. |
| Options: some frameworks are more complex than others and offer more configuration options, widgets and interface options. These will allow you to do better things with your site. |
| Integration with other systems. |
| Best long-term support: Some digital projects lack continuity in time and updates and support services stop. It’s always better to opt for those that offer continued support guarantees. Many of them are supported by companies that offer other professional products on the market. |
ADVANTAGES AND DISADVANTAGES OF USING FRAMEWORKS |
Advantages |
| Speeds up the mock-up process Clean and tidy code Solutions to common CSS problems Browser compatibility Learn good practices Having a single procedure to resolve common problems makes maintaining various projects more straightforward. Helpful in collaborative work |
Disadvantages |
| Mixes content and presentation Unused code leftover Slower learning curve You don’t learn to do it yourself |
Comparisons: |
| In this review article we’ll compare what I think are the five best frameworks available today. Each framework has its own strengths and weaknesses, and specific areas of application, allowing you to choose based on the needs of a specific project. For example, if your project is simple, there is no need to use a complex framework. Also, many of the options are modular, allowing you to use only the components you need, or even mix components from different frameworks. The frameworks that I’m going to explore are presented based on their GitHub popularity, beginning with the most popular, which is, of course, Bootstrap. |
1. Bootstrap |
| Bootstrap is the undisputed leader among the available frameworks today. Given its huge popularity, which is still growing every day, you can be sure that this wonderful |
| toolkit won’t fail you, or leave you alone on your way to building successful websites. |
 |
Notes on Bootstrap |
| The main strength of Bootstrap is its huge popularity. Technically, it’s not necessarily better than the others in the list, but it offers many more resources (articles and tutorials, third-party plug-ins and extensions, theme builders, and so on) than the other four frameworks combined. In short, Bootstrap is everywhere. And this is the main reason people continue to choose it |
| (Note: By saying “unique components” I mean that they are unique compared only to the frameworks mentioned in this list.) |
2. Foundation by ZURB |
| Foundation is the second big player in this comparison. With a solid company like ZURB backing it, this framework has a truly strong … well… foundation. After all, Foundation is used on many big websites including Facebook, Mozilla, Ebay, Yahoo!, and National Geographic, to name a few. |
 |
 |
| Foundation is a truly professional framework with business support, training, and consulting offered. It also provides many resources to help you learn and use the framework faster and easier. |
3. Semantic UI |
| Semantic UI is an ongoing effort to make building websites much more semantic. It utilizes natural language principles, thus making the code much more readable and understandable. |
 |
| Semantic is the most innovative and full-featured framework among those discussed here. The overall structure of the framework and the naming conventions, in terms of clear logic and semantics of its classes also surpasses the others. |
4. Pure by Yahoo! |
| Pure is a lightweight, modular framework – written in pure CSS – that includes components that can be used together or separately depending on your needs. |
 |
 |
Conclusion: |
| In the end, let we give you some guidelines for choosing the right framework. Here are some of the more important things to watch out for: |
| Does the framework have enough popularity? Bigger popularity means more people involved in the project, and thus, more tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with relative web development products. Great popularity also means that the framework is more future-proof – a framework with a bigger community around it is much less likely to be abandoned. |
| Is the framework under active development? A good framework needs to level up constantly with the latest web technologies, especially with regards to mobile. |
| Has the framework reached maturity? If a particular framework is not yet used and tested in real-world projects, then you can freely play with it, but to rely on it for your professional projects would likely be unwise. |
| Does the framework offer good documentation? Good documentation is always desirable in order to facilitate the learning process. |
| What is the framework’s level of specificity? The main point here is that a more generic framework is far easier to work with, in comparison to a framework with high-level specificity. In most cases it’s better to choose a framework with minimal styles applied because it’s much easier to customize. Adding new CSS rules is a far more convenient and efficient process compared to overwriting or overriding existing ones. Plus, if you add new rules on top of the existing ones, you’ll end up with unused rules, which will increase unnecessarily the size of the CSS. |
References |
|