Recent Tutorials
Who is online?
In total there are 13 users online :: 0 Registered, 0 Hidden and 13 Guests

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17
Keywords

Bootstrap compatibility

View previous topic View next topic Go down

avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 191
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Thu 27 Apr 2017, 12:38

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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Thu 27 Apr 2017, 13:51

Sad 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. Smile

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. Batman

--------

~Dr Jay
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 191
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Thu 27 Apr 2017, 14:04

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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Thu 27 Apr 2017, 14:29

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}

--------

~Dr Jay
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 191
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Thu 27 Apr 2017, 16:34

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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Thu 27 Apr 2017, 16:48

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. Smile

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

--------

~Dr Jay
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 191
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Thu 27 Apr 2017, 18:26

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 Razz

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

I'll continue my post there!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4641
Points : 9613
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 01 May 2017, 13:09

@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. Whistle

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
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 191
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Tue 02 May 2017, 08:15

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.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum