Recommended 3rd party libraries

integration
#1

As most of us are probably dealing with as-good/bulletproof website-as-possible vs. as-fast and easy-as-possible discrapancy, I guess we’re all using various types of frontend 3rd party libraries.
In my case main need is help with responsive first layouts and some grid layout system. And of course biggest possible versatility - we don’t want to learn different notation with every new project.
Bootstrap do this for me, as well as other handy features (modals, carousel, etc.), although due to high usage of predefined css classes with almost every html element it’s not best (or at least easiest) option with SC.

I saw some posts spread around regarding adopting libraries principles with SC, however often without clear answer, or lost in different versions of SC topics, etc. For example:

Big thanks to @maqifrnswa for how-to-convert-a-bootstrap-template-to-sitecake, it gave me great idea about practical implementation of user styles.

So, as I like Sitecake’s exceptional concept, I would like to open this topic and ask community to collect list of tested options and experiences of what is working/notworking, recommended/not, easy/difficult usage. So please don’t hesitate to share, it will help :slight_smile:!

Thank you!
Desh.

#2

Sitecake bootstrap demo template can be downloaded from here

https://sitecake.com/templates.html

so you can check HTML and CSS and see how things are integrated. Boostrap CSS file is left untouched. All changes are in sitecake.css. There are few overrides of Boostrap styles and list of items that should allow Sitecake user styles, like this one:

.sc-content h1.text-xs-center,
.sc-content h2.text-xs-center,
.sc-content h3.text-xs-center,
.sc-content h4.text-xs-center,
.sc-content h5.text-xs-center,
.sc-content h6.text-xs-center,
.sc-content p.text-xs-center {}

This declaration basically means: allow users to apply Bootstrap style text-xs-center to all headings and paragraphs inside all divs with .sc-content class.

Modals as javascript invoked pieces of HTML can sometimes have hard time editing with Sitecake. There is one general workaround for all non-editable, non-visible elements, like modals.

  1. Assign named sc-conent class to a modal (eg. sc-content-mymodal)
  2. Create unlinked, separate HTML page with copy of the modal HTML, but this time leave modal HTML to be in the regular flow, visible. Assign same sc-content-mymodal class to it.
  3. Edit page with visible modal.
  4. Original modal HTML will be automatically updated, since Sitecake updates ALL named sc-content zones once one is updated.

This is a hack, but it works.