Unlike JavaScript Framework, CSS Framework doesn't get the much-deserved attention from developers. The base reason is the pay scale. However, the essence of the web architecture of responsiveness strongly relies on the implementation and normalization of elements on various browsers by the CSS framework. Keen developers, who are eager to learn the art of responsiveness, must read this article to understand the base organization and approach towards strategic implementation of Responsive Web Design (RWD) regardless of framework.
To simplify the vision and naming convention, we will greatly rely on Bootstrap Framework terminology to appeal to a greater audience.
To simplify the vision and naming convention, we will greatly rely on Bootstrap Framework terminology to appeal to a greater audience.
Segregation and Identity
Since, adoption of CSS framework in the early days, the frameworks themselves were exploring the re-usability of their pre-designed components. It was not known what worked and what didn't. After intensive research and analysis conducted by Google over Material Design, it was conclusive which components are regularly used. However, the Material design does make the UX very generic, it drives human psychology in a certain way. Hence the components listed are the ones that predominate in the market.
The grid and breakpoints evolved with the adoption of mobile and tablet screen resolution selected by people. Early technology was predominated by a screen resolution of 4:3 (i.e. 1024 by 768), therefore responsiveness didn't concern developers. But as people, started consuming websites via their little devices more, responsive support in web standards was prioritized via breakpoints. This flexibility of breakpoints allowed Frameworks to take advantage. Now a day the breakpoints decide the Layout and Classes have been developed that would be able to do heavy modification on the layout using breakpoints.
Segregation and Identity of website design is conveyed via native elements, Layout properties, and Component selection.
The grid and breakpoints evolved with the adoption of mobile and tablet screen resolution selected by people. Early technology was predominated by a screen resolution of 4:3 (i.e. 1024 by 768), therefore responsiveness didn't concern developers. But as people, started consuming websites via their little devices more, responsive support in web standards was prioritized via breakpoints. This flexibility of breakpoints allowed Frameworks to take advantage. Now a day the breakpoints decide the Layout and Classes have been developed that would be able to do heavy modification on the layout using breakpoints.
Segregation and Identity of website design is conveyed via native elements, Layout properties, and Component selection.
Elements
The basic and core essence of a site is built by elements like the body, h1-h6, p tags wherein you select:- Body: background color, font color, font family, font size etc. gives the base feel of site
- h1-h6 and p: line-height, letter spacing, margins properties truly provide the aesthetic feel to the site. Check out medium.com to truly understand the contribution of basic elements
Layout
The layout is strongly correlated with breakpoints support by browsers. Any responsive technique you devise will be registered under the layout feature. The clear distinction may not be mentioned in frameworks documentation but all the responsive tasks that don't end up altering components in layout customization. The framework has now evolved with ample of layout modification utilities. These utilities drastically reduce the custom CSS written over a vanilla framework.Components
Components shipped with the framework are breakpoints independent responsive in nature (except navbars). i.e. they are either of full width or max-width nature giving the ability to adapt the device screen width. Custom components can be built using the same concept and approach of creating one described in the below section.
Overview of Segregation
| Elements | Layout | Components |
|---|---|---|
|
|
|
Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. The framework uses this as an initial point to bring upon consistency in element rendering in different browsers.
Approach for a Responsive Component
There are few basic properties in CSS that easily allow you to do a smoother responsive transition regardless of media queries on breakpoints. Mixing and matching these properties to get the perfect desire result.
margin: 0 automax-widthwidth: 100%floatsflexpadding'sWord break and overflows
Stages of RWD development
The staging of design in below-given fashion provides you a robust way to organize and quickly build the site without going through rigorous future modifications to meet the requirements. Steps are below:
- Create a base feel of the site with Elements
- Collect information, design, and ship all the Components in a responsive fashion
- Moderate the CSS properties of Layout Classes to quickly bring the site to life
If you wish to experiment more on building a minimum framework follow this guide:
No comments:
Post a Comment