2 part — Writing CSS
3 part — Layouts

Interfaces nowadays consist of lots of different components, layouts, and sometimes color schemes. From day to day, we add new components, and our code gets more and more complicated.

So, we decided to create a separate Library page where you can see all the UI components in one place. It helps you to find out what’s already created and remember the class name of any element in the system.

Overview of all UI components

In a team with few front-end engineers you don’t know is this particular element already created or not. You have to check it by looking at code every time or asking colleagues.

To keep design consistent you need a whole picture to compare all components and find details that don’t fit into a general style.

Made for productive collaboration

Back-end developers will always know where to find everything they need to build a feature without frontender’s help. They can just request additional components to be added.

Of course it needs some time to get used to such pipeline. But in the end you get a speed boost cause everybody in a team can build interface of any complexity.

Frontender’s chief task here is to teach how to insert components properly, create additional framework features such as adding spaces between components, flexible grids for layouts and so on.

User interface documentation

UI Library is useful for client review when approving design. Its far way productive to think component based than page based. Development team shows UI Library to client separately from page design. It makes a clear separation between styling and interface design. You can concentrate on interface itself and then go deeper into refining elements appearance.

Another reason for documenting is you can forget about already existing components and create similar ones that in fact not needed. Lack of documentation leads to chaos in your code. Somebody can re-invent already existing wheel and code duplicate just keeps growing.

Clean organized code

When adding new product features we usually forget about old ones. UI Library helps tracking deprecated components and remove them from the system. At any time you can go through all elements and define whats needed and whats not.

To organize all code you need to create a separate stylesheet for each component(module). You can read about creating truly modular code in our Scaffy documentation.

In the next part “Writing CSS” we will go through the process of creating UI component.