Russsh Demo Page - ajency/atomic-modules GitHub Wiki

  1. No HTML/CSS framework was used to create this page. Started with a blank slate and wrote styles as per the requirement. Chose to follow this approach as it greatly reduces the number and size of the resources loaded on the page. There's no need for overwriting default styles provided by any framework.

  2. All styles have been written in LESS (a CSS preprocessor). This helps in better structuring of files, it's also cleaner, more easily readable because of its nested structure and also provides the ability to use variables and mathematical functions. (https://www.smashingmagazine.com/2010/12/using-the-less-css-preprocessor-for-smarter-style-sheets/)

  3. BEM naming convention has been used for classes. This ensures that everyone who participates in the development of the website works with a single codebase and speaks the same language. Using proper naming will prepare us for the changes in design of the website. BEM naming convention also writing more understandable and structured LESS (http://www.slideshare.net/BobDonderwinkel/bem-presentation-40907446). For example, the menu component has a class 'menu'. A link in the menu is named 'menu__link'. An active link is named 'menu__link--active' as this is a different state of the link.

  4. Multiple LESS files have been created for different components/sections of the site. They have been placed in structured folders so that the project is easy to maintain in the long run. If a change is needed in one specific element, only that required file can be edited and there is no need to search through one long file containing all styles. Components are also independent of their placement on the site. They can be used anywhere and still retain their own styles. For example, the select box element can be used on any page or position on a page and it will have the same styles.

  5. As the number of LESS files keeps increasing, it may get difficult to find the right file to make changes in. For this reason, sourcemaps are created along with each CSS file which help in identifying which LESS file a particular style belongs to. Chrome DevTools makes it easy to identify this and make changes easily.

  6. All LESS files are then compiled into a single css file which is loaded on the page. For different pages, only the LESS files of those components which are used on a page need to be compiled. This ensures that unnecessary styles are not loaded on a page, thereby reducing the load time.

  7. Currently we have used a local compiler for compiling the LESS files into a CSS file. When working in a larger team of developers, we would set up a task runner like Gulp which will compile+minify the required CSS/JS files. Then anyone working on the project, can execute any task that the task runner is set up to do with a single command. Task runners can also be used for adding browser prefixes in the CSS so that the site displays correctly across all browsers. There is therefore no need for the developer to manually add browser prefixes constantly while writing CSS.

  8. All images used on the site have been optimized, thereby reducing the page size and load time. Images have been used for the chat section, header links, calendar and top radio button filters. Widths have been defined in the markup for any images included on the page so that the browser knows how much space the image will take at the time of rendering the page. This improves load performance.

  9. SVG icons have been used as this ensures they appear crisp and uniform across all screens and devices.

  10. CSS files created have been minified so that file size reduces. For the page we’ve done, the custom styles file size unminified is 16kb and minified is 12kb. As more elements are added to this page and more styles created, this difference in minified and unminified file sizes will keep getting larger and more significant.

  11. The left column in the layout has been given a fixed width and only the right column adjusts as per screen size. For the fixed left column approach we've referred to Gmail. However for the right container, we have given a scroll on smaller screens and limited the width on larger screens.