FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 23 users online :: 0 Registered, 0 Hidden and 23 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Bootstrap compatibility

View previous topic View next topic Go down

dannig
dannig

Gender : Female
Age : 36
Posts : 36
Points : 2629
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig 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.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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
dannig
dannig

Gender : Female
Age : 36
Posts : 36
Points : 2629
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig 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.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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}
dannig
dannig

Gender : Female
Age : 36
Posts : 36
Points : 2629
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig 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.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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.)
dannig
dannig

Gender : Female
Age : 36
Posts : 36
Points : 2629
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig 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

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

I'll continue my post there!
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
dannig
dannig

Gender : Female
Age : 36
Posts : 36
Points : 2629
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
http://www.novabrasilis.forumeiros.com https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig 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.
Sponsored content

PostSponsored content

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