Bootstrap compatibility

I wasn't sure about making this a support topic or a suggestion topic, but here's the case:

I tried using Bootstrap on my board, but it conflicted with FAE's css in a way I couldn't fix by hosting bootstrap myself (I don't really know why), si I'd like to know how possible is it to have them both working together.

http://getbootstrap.com/

To be honest I didn't check if FAE already has or not Bootstrap built in.

When I integrated Bootstrap, it screwed some code on my board(s) as well. So, I had to integrate it line-by-line - testing each one in succession to see if it was compatible.

Most notable incompatibility is some of the modifiers that are already taken over by FAE. There are two options: comparators for analyses of the differences between the modifiers/selectors/etc. of FAE versus Bootstrap - or do a guerrilla add in of Bootstrap, and then checking which codes are incompatible using the Inspector (F12 Developer Tools).

It's not easy to do, because FAE integrates many Bootstrap functions, but so does Forumotion - which makes it tricky.

I placed in only the following from Bootstrap and it worked well, which was the buttons. Of course, you could play with buttons in other ways, which too works with FAE/FM: https://bttn.surge.sh/

I would not mind discussing some of the functions, but since FAE is very responsive, much of the Bootstrap functions are actually unnecessary.

Edit: The more you change FAE, the less compatible ongoing updates are going to be for your board. In addition, if you change a significant FAE code, support on this forum will become less meaningful, if you get what I mean.

Yep! I kinda gave up on Bootstrap when I noticed it changed the overall looks way too much. I basically do major changes on CSS, but I think the biggest part of my work went to profile fields and the banner at the top, other than that I just added a few details to make it easier when a new update comes. Also I've been migrating all my CSS to self hosting so I don't miss it.

I do like the buttons you put, I'm testing it, but in my case I went for a vertical tabs snippet, though I found a pure CSS one around the webs that I'm adjusting to my use. But that is true, FAE and Bootstrap do a similar work on FM boards.

Here is the reference from my (GeekPolice) site (I apologize it's so minified, hope it's easy to read - if not, then place it in a text editor):

Code:

.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 16px;font-size:13px;line-height:1.846;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus,.btn.focus{color:#444444;text-decoration:none}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-primary{color:#ffffff;background-color:#2196f3;border-color:transparent}.btn-primary:focus,.btn-primary.focus{color:#ffffff;background-color:#0c7cd5;border-color:rgba(0,0,0,0)}.btn-primary:hover{color:#ffffff;background-color:#0c7cd5;border-color:rgba(0,0,0,0)}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#ffffff;background-color:#0c7cd5;border-color:rgba(0,0,0,0)}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#ffffff;background-color:#0a68b4;border-color:rgba(0,0,0,0)}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#2196f3;border-color:transparent}.btn-primary .badge{color:#2196f3;background-color:#ffffff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:bold;line-height:1;color:#ffffff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:hover,a.label:focus{color:#ffffff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#bbbbbb}.label-default[href]:hover,.label-default[href]:focus{background-color:#a2a2a2}.label-primary{background-color:#2196f3}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#0c7cd5}.label-success{background-color:#4caf50}.label-success[href]:hover,.label-success[href]:focus{background-color:#3d8b40}.label-info{background-color:#9c27b0}.label-info[href]:hover,.label-info[href]:focus{background-color:#771e86}.label-warning{background-color:#ff9800}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#cc7a00}.label-danger{background-color:#e51c23}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#b9151b}.alert-me{background-color:#2196f3;border-color:#0d5894;color:#fff}.alert{border:none;color:#fff}.alert{padding:15px;margin-bottom:23px;border:1px solid transparent;border-radius:3px}.alert-dismissable,.alert-dismissable{padding-right:35px}.alert-dismissable .close,.alert-dismissable .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{background-color:#4caf50}.alert-info{background-color:#9c27b0}.alert-warning{background-color:#ff9800}.alert-danger{background-color:#e51c23}.alert a:not(.close),.alert .alert-link{color:#fff;font-weight:bold}.alert .close{color:#fff}

I'll se to get one of those effects to my navigation bar. The problem with my tabs area I'm trying to solve yet, I'm trying to find a service that works like dropbox does, but also allows static HTML to be published.

Well, Danni, for starting out, you can use Google App Engine for free (until the traffic becomes rigorous and too many resources are being acquired from the engine).

The app engine is fairly straightforward and allows static HTML hosting for free. The biggest issue is "instance hours" - however, for most starting websites, this is a least concern. Once you acquire more traffic, and maybe do ad network or some other premium incentive if you like - you can pay for a CDN engine that will net you a very low-cost monthly, but allow for hosting static and dynamic resources, downloadable resources, and other forms of content - and do it in the least bit of cache possible (high compression, fast delivery, and decreased loading time for websites by 30-40% - and no I am not writing an ad here :-).

The other free ones are Amazon Web Services or Google Drive (for Drive, use the loopholes they allow you to host the static content through easy URLs: drv.com/?, etc. etc.)

If you use the free tier on Google App Engine or Amazon Web Services, it will be fair to begin and you may not need to upgrade for a long time. The other option I usually don't recommend is hosting it on a Microsoft Azure, where you can set up your own free CDN in a VM (faux server) and deliver as many resources as possible using their app setup engine. Don't expect any option to be priceless, but most options will allow a certain level of storage and resources.

Obviously, since your site is not hosting traffic actively, you will find the process to be particularly easy right now, especially if you're just testing and seeing what is possible with the forum engines. I can feel you have a knack for customization as I do, and I can tell that this should not be a difficult decision; however, you can continue to ask questions as I have an extensive background on web services, marketing, coding, coding analysis, etc.

(I have usually partnered directly with webmasters for free and helped them produce their sites.)

I do love playing around FM and it's possibilities, my current board will be role play oriented, as most of the other forums I had. I'll hardly have way too much access to compromise any free account service.

For now I'm testing an alternative that came up after a whole day of searching, I'm using a FTP client on "sync" mode to make alterations on files I edit on my end and automatically upload it to the free host service. I didn't test it long enough to classify as a good alternative yet.

I think it's better for the discussion if we jump to the topic you created, because it's going far from the starting subject

https://fmdesign.forumotion.com/t1322-web-page-speed-optimization-for-fae#30051

I'll continue my post there!

dannig wrote:To be honest I didn't check if FAE already has or not Bootstrap built in.

Just wanted to let you know that FAE isn't using Bootstrap. All CSS was written from the ground up, save for stylesheets imported through the @import rules, and maybe a few snippets I copied from my other themes.

I'll be honest though, I'm a bootstrap newbie lol ; I've never used it before. I do know that it's for designing responsive websites though.. So the only conflicts might be with FAE's existing responsiveness. ( @media rules )
https://github.com/SethClydesdale/forumactif-edge/blob/master/css/fa_edge.css#L2219

I mostly like bootstrap because it saves a lot of work whenever I need something, it's only a matter of googling and finding what I need, instead of using several different sources that can conflict or taking way longer to create my own. But I'm a searcher, so whenever I need something bootstrap has I'll find an alternative, though I tried to host the bootstrap myself and it didn't work when imported.