Launching CastleCSS, our new front-end framework
Years ago, when the responsive web was on the rise, none of the existing mobile first frameworks lived up to our specific needs. We did not believe in things like device specific classes and the grids did not offer the flexibility we required… So, we started creating our own Fortress in HTML/CSS/JS and have been expanding it ever since.
Now, we want to share our way of working with the world.
CastleCSS is a mobile first SCSS framework with modular building blocks for the web. Which is also fully update-able! No more worrying if your base files are still correct, we keep the files up-to-date for you!
What is a front-end developer at De Nieuwe Zaak?
To understand what we are trying to accomplish it is important to know what it is we do at De Nieuwe Zaak. Front-end developers at De Nieuwe Zaak started as a part of the design team. When I started as teamlead we separated from the designers into an independent team. This means that we share strong roots with the Design/UX Team.
Our core business is HTML, CSS and Javascript. Of course a lot has changed over the years and we now write in HTML5, SCSS, use PostCSS, we combine, compress and render it with Grunt/Gulp and we are looking at Angular/ReactJS/etc/etc/etc.
Still, the important thing is that you work in a scrumteam with several engineers, designers, ux, a scrummaster, and the client of course.
Multiple platforms and standards
We are working with different (e-commerce) platforms: ecManager, Intershop, Wordpress and new ones on the horizon. You do not have to be an expert or programmer but you are working with the programmers in their platform.
For ecManager this was not a problem. We already had a Reference project in HTML and as a .NET project. We use this as our kickstart when we are creating a webshop.
On the front-end side it contains all our standards, workflow, best practices and years of experience in e-commerce.
For Intershop and Wordpress we did not have reference projects yet, but we did want to use our standards and experience from ecManager projects. So we decided to build a styleguide.
Styleguide
The styleguide contains all our components and styles (colors, fonts, buttons, grid, navigation, etc) and we use this to give an explanation of each component including a piece of code so a developer can easily use a piece of the code with a bit of documentation.
The more modules and documentation we were writing the more we thought: “why are we not releasing this as a separate package?” and “why can we not just update our code from a central place?”.
After realizing this we separated our grid from our starter project and released it as a separate tool. After a while more pieces of our starter project joined the cut.
Upgradeable
What we really wanted was a way to push our code from one central place to one of our dozens of projects. We looked into NPM and realized that this was the perfect tool to make our code updatable. All you have to do now is run one line of NPM code and your project is up to date with the latest features and bugfixes.
Why should you use CastleCSS?
We released our front-end SCSS framework under the name CastleCSS. The idea is building your own ‘fortress’ with the foundation and building blocks that we provide into separate packages. You can just add the basis or as many modules as you want.
Unlike other Frameworks, we do not include everything, but only what you need. The core is a kickstart to your website, which you can extend with several extensions.
Our philosophy is mobile first, easy to update and self explanatory code. We want to be able to keep you up to date with the latest version of CastleCSS.
After using CastleCSS you can build whatever custom code you want, we just supply you with handles to create your own custom site/shop quickly.
Cool! Now what?
We are going to translate more of our reference project in CastleCSS to make it the complete experience and independent front-end framework. All while separating the code into different packages so you are not forced to burden your project with files you do not need.
We are currently looking into adding HTML and Javascript in the packages as well.
Boilerplate
Also, to make it easier for people to start we just released a boilerplate for people to use, take a look!
Curious or want to help?
Take a look at castlecss.com! All our code is in our Github repository so you can help as well. We encourage you to take a look and submit any suggestions you have!
About me
Hi! My name is Darius Rosendahl and since 2012 I have been a part of De Nieuwe Zaak (which translates to “The New Business” in English) , an e-commerce company in The Netherlands. Two years ago I started as the teamlead of the Front-end Team. We are working hard to create a front-end layer independent of the back-end platform and CastleCSS is the first step into making this a reality.
