Article
5 comments

Style Guide generator for SharePoint and Office 365 Development released

We are currently at the dawn of a new age in web development. Future web developments will be based on components not on frameworks anymore. While the browser support for web components lacks in Microsoft Edge, Firefox or Safari. We can already start to think differently when we develop any solution for the web.
To add my part to build new web applications and web design based on components I created a style guide application for SharePoint and Office 365.

Atomic Web Design

Followers of my blog know that one of the mind changing ideas in the last couple of years was the atomic design methodology coined by Brad Frost. This methodology lets you build new components based on the smallest elements in a design and build greater components and so on until you have a page or application design ready.
This way of thinking will becomes more important in future because you can add style definitions directly into web components and Web components allow inheritance code of other components.
Especially through the strong commitment made by Microsoft to this new technology in 2016. You will sooner or later have to think in components.
Other frameworks, such as AngularJS, Knockout or Facebooks React will make use of web components in future too.

How does the style guide work?

To use the style guide you need to have NodeJS installed on your client.
Simply clone my Simple Style repository on Github and install the npm packages and bower components. The easiest way to do this is to switch to the cloned repository directory on the console and execute the following command.

After that you should be able to use the style guide and run the application. You can start the app by executing the following command from the console of choice.

This launches the web server, opens the browser and the following web page should appear.

style guide afte -launch

style guide afte -launch

I already added some default styles and components from SharePoint such as image renditions, rich text editor styles and sample of the combined components to play around with.

The user interface

The user interface is kept pretty simple. At the top of the screen you will see a toolbar that mainly allows you to filter the different components and show and hide additional information.

Simple Style Toolbar

Simple Style Toolbar

The filter allows you to switch between atoms, molecules, organism, template and pages. This allows you to find elements quicker and provide a better overview in one category.
Infos allows you to show the annotation or the code of the individual components.
To find and filter to one specific component the TOC (Table of Contents) Button can be used too.

Simply Style Guide - Table of Contents

Simply Style Guide – Table of Contents

Once you have selected the component you will have a filter view to only this specific component.

Simple Style filtered view

Simple Style filtered view

Adding and modifying patterns

Each component or pattern can be stored in a single file in a special folder. The root folder for all patterns can be found under ‘app/_pattern’.

Simple Style - Patterns

Simple Style – Patterns

Whenever you store a new file to one of these folders or a file changes, the change will be detected by a gulp task. This gulp task writes changes automatically to the pattern configuration and recompile the Handlebar template. This precompilation combines all patterns to a single JavaScript file.

Simple Style - Pattern reload

Simple Style – Pattern reload

Styling components

To style the components SASS is directly integrated in the style guide. In my project I use the same folder structure as I use in my components.
Through a simple SASS import you can combine them all to one ‘main.css’ file.
Whenever you change one of the SASS files the browser will automatically be refreshed and changes will be immediately visible.

Use output directly in SharePoint

The style guide generator allows you to directly integrate the output CSS file into SharePoint through alternate CSS Url. This procedure worked well for me in SharePoint Branding Projects on-premises and in the cloud.
The web server component use the browsersync.io component and is configured to use HTTPS by default.

Future improvements

To be honest, this is the first beta version of the style guide, but there are many things that can be improved and enhanced. In a future release I’m looking forward to support custom styles out of the new framework as well as Office UI Fabric.
The last thing will be currently transformed to use handlebars.
Once web components have a wide range of browser support I am looking forward to support those web components too.
From a markup perspective as well as style perspective.

Like to contribute?

The main intention of this project is to be a community project by the community and for the community. I know there is always a gap on documenting css styles properly, but with this tool all can be done in one step without much additional effort.
I always can have a helping hand on this project. So if you are willing to help me just reach out for me via twitter.
If you find bugs please submit them on the issue list on the github project.

Finally I would love to hear your feedback on this Simple Style Guide generator. Be sure to check it out on Github,

In addition I will demo this style guide next week at the SharePoint Saturday in Stockholm.