Geekly Articles each Day
📜 ⬆️ ⬇️

Twitter Bootstrap and SharePoint. How to make Bootstrap work correctly under SP

Why use Bootstrap?


Developing and modifying solutions based on SharePoint, I began to encounter more and more user expectations from standard forms for creating and editing elements. Everyone is surrounded by such convenient and familiar Yandex, Gmail, Facebook, VK and others. Cute, fast and clear interfaces have become the norm. Many expect interfaces of a similar level in corporate systems.

I will leave aside the comparison of budgets for the development of interfaces of an average integrator, or a small development department in a large company on the one hand, and software and web giants on the other, however, I note that these subtleties are usually not interesting for the user and the customer. The result is interesting. For developers who use front-end frameworks, this result is usually satisfying customers. However, the question remains, why Bootstrap? To do this, consider the typical "Wishlist":


If you translate these desires into a technical language, you get the following:
  1. Adaptive layout;
  2. Predefined styles, themes, etc .;
  3. Difficult, usually it is a heap of logic on JS + CSS.

To solve these problems, I conducted a small study of current front-end frameworks. The choice fell on Twitter Boostrap for several reasons. I will note only those that are applicable to the situation:

  1. The most popular - usually, this means that all questions have already been answered;
  2. Excellent documentation and examples;
  3. Implementing the markup on the bootstrap, we are not engaged in the creation of styles, HTML markup, etc., in fact, we take the finished blocks and paste into our form;
  4. There is no need to write your complex modules and controls, you can take ready-made scripts, connect to the page and use according to the developer's documentation;
  5. Low threshold of entry - it is enough to understand the basic principles of HTML JS CSS and you can already begin to use all the features of the bootstrap.

Specifically for the tasks:
')
  1. Adaptive layout - for clarity - http://www.youtube.com/watch?v=5wMk4iXnpG0#t=75 (fairness, adaptability, now, the standard for modern front-end frameworks);
  2. Apart from the fact that the bootstrap itself looks modern, thousands of themes have been created on its basis, including free ones, for example - http://ironsummitmedia.imtqy.com/startbootstrap-sb-admin/index.html ;
  3. For the bootstrap, countless plugins and libraries are written, finding a ready-made solution will not be difficult, another thing is that all of them will most likely have to be finalized, but this is a common disease of open source solutions.

And the most important thing to understand. Using the bootstrap you get a powerful tool that has been tested by thousands of front-end community developers, thanks to which you will simplify life for yourself, the customer and your boss. The customer will use a modern and user-friendly interface, you will quickly get a decent result, and the boss will cut costs not at the expense of quality.

Task


It is necessary to implement the form in the form of a wizard with custom validation in a short period of time. Users will fill it, incl. from mobile devices. There are all kinds of browsers in your organization, IE8 +, etc. One of the main requirements - "to look modern."

Having studied the examples, I decided to try to implement. The result is excellent:

one

But if you look closely, you see problems:

2

After examining the question, it turned out that Bootstrap uses the box-sizing: border-box style, applies it to the entire document and thus breaks the SharePoint layout, where the value is box-sizing: content-box. In the first case, when calculating the position of an element, the boundary is considered inside the element, and in the second, outside. I recommend to familiarize yourself with: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

In the bootstrap, it uses the border-box, because this simplifies the calculation of the finite width of the blocks of the adaptive layout system.

In full growth, the question arose: and how? Abandon bootstrap? Not! One of the first solutions is to use the custom Masterpage ( for 2013 , for 2010 ). This solution has both advantages and disadvantages:

[+] Bootstrap works without any tricks;

[+] Any themes and snippets taken from the net get up quickly and look good;

[-] This is a custom masterplay, it is not always possible to install it;

[-] If you use custom masterpage - you will have to refine this one.

Decision


In my case, the implementation with the custom mastepage did not work. In order for Boostrap not to break the SharePoint layout, I decided to use a workaround, namely:


I connected this file to my project, it became ok, but not quite! Since I took this wizard as an example with bootsnipp , they use additional styles that also need to be “stuck” on our bootstrap styles. The result was very good:

3

The source of this application is available at the link: https://github.com/dimkk/sharepoint.app.bootstrap

Unfortunately, this method is not a panacea either. It has its pros and cons:

[+] Ease of implementation - plugged in, added markup, and work anywhere in SP without the risk of breaking the rest of the layout;

[-] If you copy ready-made solutions, you will have to modify the layout for a specific “scope”, however, it must be said that sometimes there are ready-made solutions that will satisfy the most demanding customers, then in cases where the masterpage cannot be used - this method will be the real solution problems.

To expand the example, you need:





PS In the near future I plan to talk about how to collect logic to this form, using Angular, as well as how to test Angular code under Visual Studio. I will dwell on Deploy Appa in more detail.

Source: https://habr.com/ru/post/249739/

More articles:


All Articles