I guess a lot of people know BITPANDA and their story of success. From a small Startup to Austrias first Unicorn. When a company grows the requirements are starting to change. More employees means more communication inside and outside of the company. The main communication tool of this company was the website which was hard to maintain since the marketing department was very active and the developers already occupied with other important projects.
In a small team of 8 to 10 people we created a tool (a pagebuilder) according to their needs:
Create, update and delete webpages without any knowledge of code.
Since there were multiple websites with different styles the goal was to combine all the different websites into one single website with one unified harmonic style. Therefore the first step was to see how the different websites were structured, what colors were used and how the different sections were laid out.
After having multiple developers and designers working on different parts on different websites it starts to get “messy” over the years which is totally comprehensible and more often the case than people would think.
The challenge was to combine and unify as many elements as possible but still deliver flexibility to the content creators.
core team: 10
UI/UX Designer, Frontend Developer (static)
PHP, Laravel, October CMS, UIKIT, AWS
To build a “pagebuilder” where employees (such as marketing or HR departments) without a technical knowledge in terms of HTML/CSS/JS/PHP can actually create styled content in different languages and act independently without the need of developers you have to chose your frameworks wisely.
we chose the programming language to a most common language. Therefore we asked what most of their developers were used to. It was clearly PHP. So it was clear we chose a framework based on PHP and not based on languages like Ruby or Python.
We needed a CSS framework which is light weighted and comes with a lot out of the box. In this time where I was involved in this project Bootstrap 4 was newly on the market. Bootstrap is very well known and has also a huge community. Since I already worked with “Bootstrap 4” I knew that it had some bugs (especially with tiles/cards) and I didn’t want to run into workarounds from the beginning Bootstrap was out of question.
The next option would have been “Zurb Foundation”. The problem was, that the developers from Bitpanda were not so familiar with that framework (neither were we) and we have seen in different forums that there was a learning curve which would slow us down (of course the deadline was very close – like always).
I knew that there was also “UIKIT” out there and since I was very experienced in this framework and that it could easily been customised I was giving it a shot. It was the right decision.
Of course I tried to reuse different CSS modules, classes and they way it was built up, so that the in house developers can easily dive in after we finalize the project.
But like the styles, also the CSS was written from many different developers over the years and many rules were overwriting other rules. I started from scratch.
Since theming the UIKIT framework is straight forward you do not need many classes anymore. But still there are exceptions and so I also used a common naming convention: BEM (Block Element Modifier) and SCSS instead of CSS.
That meant when other developers are taking over the project the already have a documentation how they have to name the elements: BEM
Also SCSS (similar to SASS) has a much nicer syntax and allows you to have variables, nesting, mixins and much more: SASS
some of the CSS modules
The project took a little longer than expected since the scope was changing in between of the defined milestones but it was a success:
A pagebuilder which was easy to use for non-developers.
Therefore no dependencies to internal or external developers to make the required changes on the website.
Defined styles in harmony with the existing styles and the CSS framework. We delivered them a possibility to have an HTML Editor inside the user-backend where they could copy elements directly out of the documentation of UIKIT.
Multilanguage functionality and SEO options like META descriptions and canonicals.
Well structured and documented Stylesheets where developers could easily expand the functionality/library to their own needs but still follow the guidelines to prevent chaos (SCSS and BEM)