https://github.com/gibbok/bem-pixel-perfect-responsive-design
An example of CSS pixel perfect adaptive design based on BEM methodology.
https://github.com/gibbok/bem-pixel-perfect-responsive-design
bem bem-methodology css3 html html5
Last synced: 6 months ago
JSON representation
An example of CSS pixel perfect adaptive design based on BEM methodology.
- Host: GitHub
- URL: https://github.com/gibbok/bem-pixel-perfect-responsive-design
- Owner: gibbok
- Created: 2017-08-07T19:07:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-03T07:22:34.000Z (over 6 years ago)
- Last Synced: 2025-02-08T15:36:08.340Z (8 months ago)
- Topics: bem, bem-methodology, css3, html, html5
- Language: HTML
- Homepage: https://gibbok.github.io/bem-pixel-perfect-responsive-design/
- Size: 602 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pixel perfect responsive design using BEM methodology
An example of CSS pixel perfect adaptive design based on BEM methodology.
[Try it live](https://gibbok.github.io/bem-pixel-perfect-responsive-design/).
The requirements:
1. Implement accurately the design in HTML/CSS for the latest Chrome and Firefox versions.
2. Making the layout responsive including the dialogs.
3. Make the CSS reusable and modular.
Execution:
1. I used Adobe Photoshop Measurement features and rules for getting accurate dimensions of component designs. ZoomPlus magnifier has been used for naked eyes verification. I also used image tracing techniques to determinate font sizes.
2. The coding has been done using a desktop-first approach, the responsive layout for the tablet version is based on CSS3 Media Queries.
3. For CSS modularity and reusability I have chosen [BEM methodology](http://getbem.com/).
BEM – meaning block, element, modifier – is a front-end naming methodology. It is a smart way of naming CSS classes to give them more transparency and meaning and it is especially useful for creating reusable UI components.
Notes:
- The original designs are situated in the `mockups` folder.
- To see all views: Click the "Plus" icon -> Click "Herr Schmidt" avatar -> Click the "Send ticket " button.
- The timeline in the "events" box is scrollable horizontally and reveals few more data points.