Soc-core is a Sass framework providing styling for base elements of Soc style, an in-house developed front end framework in order to maintain a similar look and feel for all kinds of administrative websites. Soc-core is built on top of the official Bootstrap Sass port, this allows for all known Bootstrap components and style elements to be used as well. Some of these might have been overridden by the Soc-core style but efforts were made to keep this limited as much as possible. For more information visit the bootstrap website.

This website is developed to provide examples and documentation of the various components. To use a component you can either look at the source and alter the code to fit your needs, or run the emmet snippet provided below the component in a well if your IDE provides support for emmet. When developing in Visual Studio Code emmet is provided out of the box and can be used by pressing Tab after the emmet snippet. Of course when using the examples don't forget to include the required css and js files.

Emmet snippets

This is an example of a well containing an emmet snippet.

emmet:
div.well>span{Emmet code:}>pre>code{This is some code}

Info labels

Throughout the documentation and example pages you might find some labels being applied. A description of the labels can be found here.

No container Use outside bootstrap container for best results.

Continue grid To have best results, continue with bootstrap container and use the grid system.

Wrap This component is a wrapper element, for best results it should contain elements inside it.

JS This features requires javascript, make sure to add the bundle files to the document.