0 comment

Yo SimpleStyle – First release of my yeoman generator is now available

Yo! SimpleStyle - Yeoman generator for you next Styl Guide

Last year I released a style guide generator for your SharePoint and Office 365 development.
This year I proudly present a yeoman generator that helps you to get started faster on your next project. There is no need to clone the old repository anymore. Simply create a new project as needed based on this template engine.
To be honest the old version of the Simple Style Guide is currently outdated and shouldn’t be used anymore.

Under the hood

One thing that concerned me with the old version was that the user interface was written in jQuery. There is nothing good or bad about jQuery except one thing.
Nowadays it is not that needed anymore. The javascript support in the latest browser work pretty well together and for my simple DOM manipulates pure HTML and JavaScript is enough.
I completely rewrote the user interface in HTML and VanillaJS with the a little help of TypeScript.
This gives you more freedom to add your weapons of choice and use the jQuery library you like to wish to use. Theoretically, you can even use any other framework to add your style guide patterns.
In the past, I did an experiment using Angular and it worked pretty charming

Feel free to customise to your needs

The yeoman generator, like many others, has a single gulp file and some libraries that handle the overall behaviour.
You need typescript support? Go for it.
Like to add ReactJS? Go for it.
Feel free to customise the project to your needs. Maybe later we can add additional support to the generator or at least provide some recipes in the Wiki to extend the capabilities.

Old SharePoint Patterns

Currently, when you create a new project there are only five base patterns included. If you need more SharePoint out of the box styles simply copy them over from the old style guide project.

More things to come in the future

As mentioned previously. Future releases will only be served through the yeoman generator along with the source code of all the used modules.
Currently there is still some rework that needs to be done. Once these have been finished I will add the code of the user interface in an own git hub repository.
Another opportunity for the future will be to integrate support for Office UI Fabric as well as SPFX.
Wouldn’t it be cool if you can directly export the styles you sketched from your HTML and use it in the web parts as needed?

Need more details?

In addition to this new repository I created a short documentation on how to use the style guide. I’m sure it is not fully complete now, but I think I covered the most common scenarios. If you find some issues or like to help with the documentation. Your help is more than welcome.

Want to help?

I’m always looking for help because I plan to do some major improvements in the future and it is just a side project.
Needless to say I use nearly every day. In case you use it every day too or like to get involved in this project somehow. Let me know. Please leave a comment in the blog post below or contact me via Twitter or any communication channel I use.

Getting Started

To get started with the new yeoman generator you simply need to execute the following command line command. (I assume you already have NodeJS and SPFX installed)

npm install -g generator-simplestyle bower gulp jslint

After the installation has been completed, simply create and empty folder and create a new project by executing the following command:

yo simplestyle
Yo SimpleStyle in Action

Yo SimpleStyle in Action

Once you have your new project simply execute:

gulp serve
First run of Yo SimpleStyle

First run of Yo SimpleStyle



I hope you like this new way to get started. Setting up a style guide should be easy and I hope this newly release generator helps you with a lot.
Always keep in mind that whenever you set up a proper style guide it safe a lot of the documentation effort, serves as a sketchbook and allows you to reuse already implemented user interface components.
In addition, it gives your customers, your teammates or your project owners a complete overview of the user interface you have built.
May it be just a simple style guide or full featured branding.
Please, Please, Please. Let me know what you think about it, because every project lives from your feedback.
If you find any problem please of a issue on GitHub and I will take a look into it.
In addition I will provide more information during the next couple of weeks.
Currently the yeoman generator has been tested on Windows and OSX.