[JEM3] styling Beez3 + templates other then protostar

As several people are using JEM3 some of them will have noticed that the layout is messed up within the beez 3 template. It happens as there is no bootstrap.min.css + icomoon loaded within that template

At the moment it's definately a struggle to get the styling to work within protostar (bs+jui) + beez3 (no jui/bs) so would say suggestions are very welcome. But did try a bit and at the moment it's looking like the attachment and that's because i've added some additional classes to jem.css .. Can say that the edit-form looks horrible and there we probably need to overwrite/use different tmpl files to make it look nicely.

//
will try a bit more..

Hm... you could take a look on JEM 2.1-dev which I never tried with Protostar. :whistle:
Because I have an "old-style" template based on beez3 it looks good and should also work with original beez3.
On the other hand I had to add some things to backend.css to have it useable on J! 3.3's default backend template.

will take a look at it.

for now i've added several classes into additional css files for component/calendar.
--> those files are only loaded when the template is not protostar.

another thing that can be done is to load jui/css/icomoon.css + jui/js/bootstrap.min.css but then it will overwrite a lot of the complete template things + it loads a lot unneeded things.

//
didn't commit the changes to Github

did try out the purity template and also there is a problem. as attachment you can see how it looked before adding classes and after that how it looks with additional classes. as that template is using BS3 it will mean defining some more classes. also noticed that purity has some troubles with the modal class used with image upload form field.

the problem with .modal happens due the fact that BS3 has this code and doing so it will totally mess up the element with that class. the image form field has that class name and so the "select" button is disappeared due to the display:none and the sizes.

to correct this we can do something like doing so we will set some new values and overwrite the values located within the bootstrap.css
so would say that hardcoding/adding additional classes is indeed the way to go.

//
ah well, it's something for a css/styling guru to look into.

did see that with BS3 there is a "box-sizing" and due to that we have differences of the input types between the templates. with bs3 the padding+border are counted within the value for height. took some time to figure it out..

won't add all classes and full bs support as that's for a css expert to figure out (any volunteers? ) but just want to try to make it viewable between templates.

at the moment some classes have been added and the views + calendar looks reasonable/ok within different templates but the part of the editforms still have to be addressed. furthermore the jem.css can use a makeover or at least it can be a bit cleaned up.

Am adding some classes of BS3 to the jem.css file and am prefixing the classes with div#jem. the reason for that is that otherwise the classes can mess with styling of the general template and in case of beez3 you probably won't that to be happening.