Styling elements in the Falcon Space page markup

All styling of Falcon Space is based strictly on Bootstrap 4. Make the most of the features of Bootstrap 4 to simplify project support. This means that you use Bootstrap 4 classes in your markup with a minimum of CSS enabled.

In this guide we'll look at what elements you can use as part of your development on Falcon Space. 

Here we will not touch on the possibilities of configuring platform components. They are described in the platform documentation and the Falcon Space usability guide

Key principles

Minimum custom CSS, JS - make the most of the existing features of the platform and Bootstrap 4. This will greatly simplify project support in the future, as well as reduce the risk of implementing a crooked solution

Focus on the user's goals - the entire interface should be created taking into account that the user came to the page for some purpose. Our task is to quickly complete our task. 

Do not overdo it - having a lot of tools, and undermines them all to use to the maximum. The sophisticated and beautiful interface overloads the user's attention. the interface should be as simple and unobtrusive as possible, but it should not alienate the user. 

Do not create fragile solutions - if the solution works every other time-you need to throw out such a solution. the fewer bells and whistles, the more reliable the interface works. anything unreliable should be excluded from the project. if the solution does not work well in one of the popular browsers , you definitely do not need to use it. 

Buttons

  • Use standard buttons like btn btn-primary (success, warning, etc.).
  • Create buttons with piping-  btn btn-outline-primary 
  • Create buttons with icons: 
<a href="#" class="btn btn-success"><i class="fa fa-cube"></i> Button 1</a>

Learn more about buttons https://getbootstrap.com/docs/4.0/components/buttons/

Icons

Use icons to create a more pleasant and intuitive design

<i class="fa fa-check"></i>

Changing the icon color: 

<!-- this example is well suited for displaying the status of an item in a table -->
<i class="fa fa-circle" style="color: #f00"></i>

Changing the icon size: 

<i class="fa fa-check fa-3x"></i>

You can use this tool for search for icons: https://faicons.com/

Color selections of elements

Color is a great way to focus a person's attention on the desired element. 

Use a simple scheme: red - error or stop, yellow-attention, green-everything is fine, blue - in operation, gray inactive. 

In Bootstrap, the color has semantic names-primary, dander, secondary, dark, etc. Important! Use only these colors. In this case, your interface will be more uniform and consistent. 

Color the text - text-white, text-primary etc.

Color form- bg-danger etc.

Significant elements can be selected using badge or pills -  badge badge-primary 

https://getbootstrap.com/docs/4.0/components/badge/

Gray secondary text can be written as small text-muted 

About colors of Bootstrap https://getbootstrap.com/docs/4.0/utilities/colors/

Indentation

It is important to manage the indentation between elements - this is what determines the neatness of the design. 

  • External indents of the element ( from the frame outside) - mt-1, my-2, m-3, mb-5 (m-margin; t, b, l, r - in which side the indent, the number is the size of the slip)
  • Internal fields of the element (from the frame to the inside - p-1, pt-2). 

https://getbootstrap.com/docs/4.4/utilities/spacing/

Be sure to consider the vertical alignment of the elements.

Visually group together logically related elements (for example, the caption, text and image to them).

The design elements of the block on the page 

The block on the page must be clearly highlighted and understood by the user as a single unit on the page. 

At the same time, it is important not to overdo it with the frames, because it will greatly complicate the study of the page. 

Frames allows you to explicitly group elements into a single block - border border-primary 

https://getbootstrap.com/docs/4.0/utilities/borders/

Rounding - rounded, rounded-circle. Use rounding for a consistent design (if all other elements have a rounded form in your project).)

Shadows - shadow, shadow-lg, shadow-sm. Shadows allow you to focus on a particular element (as if pushing it forward). Use it in a very limited amount and only for the most important information on the page. 

Simple panel with shadow: 

<div class="shadow-lg p-3 mb-5 bg-white rounded">
    <div class="as-dashboard" data-code="forAdmin"></div>
</div>

https://getbootstrap.com/docs/4.1/utilities/shadows/

Progress status

A certain numerical value as a percentage can be reflected through the progress bar (here it is narrowed through CSS):

<div class="as-progress progress mt-2" style="height: 3px; width: 100%; background-color:transparent;">
   <div class="progress-bar bg-light" role="progressbar" style="width: 0%; transition:
      width 30000ms linear 0s !important;" aria-valuenow="100" aria-valuemin="0" aria-="" valuemax="100"></div>
</div>

Hiding elements for different screen resolutions 

You often need to simplify the app's interface on mobile devices. To do this, simply specify the Bootstrap classes that will hide the element if it is displayed on a small screen. 

It is a bad practice to use two different forms for different permissions - this increases the likelihood of errors when supporting the solution (due to duplication). 

d-block d-sm-none - shows the element as a block element on mobile devices, and hides it on all sm and higher devices.

d-none d-md-inline-block - hide it on smartphones and tablets, but show it on md and larger screens. 

https://getbootstrap.com/docs/4.0/utilities/display/

The skeleton markup

Use Bootstrap 4 features to structure data on the page.

Don't use tables for this - it won't be adaptive for mobile screens. 

Use similar blocks in most cases (the markup structure must be col in row, and nothing else):

<div class="row">
    <div class="col-12 col-md-8">
      A
    </div>
    <div class="col-12 col-md-4">
      B
    </div>
  </div>

You can create nested elements (i.e., instead of a, write the same block from row and nested col).

col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 -this means that on mobile, the cell will occupy 12/12 of the row (i.e. the entire row), on sm-resolution (tablet) it will take up 6/12 lines, on md resolution it will take up 4/12 of the screen, and on large lg and xl it will take up 2/12 lines.  

If simply col-12 col-lg-2 is specified, then the lower - level rules will work for all below lg-i.e. 12. And for all above lg (i.e. lg and xl), the rules will apply 2.

More about Boostrap Grid - https://getbootstrap.com/docs/4.1/layout/grid/#how-it-works

Output of element cards

In this case, this view is used as a table operation mode. If you need to display custom markup (for example, in List or Catalog) for some elements, consider using Bootstrap cards.

Card allows you to display everything you need for an element: image, background, title, links, text, buttons, etc.

https://getbootstrap.com/docs/4.0/components/card/

Animation

Animation allows you to smooth out subjective pauses in work, as well as improve the user experience with the app.

It is important that the animation is not an annoying factor for the user. If he pays too much attention to it when working, then it should be removed

For animation, you can use the following classes: animated + what type of animation will be + if necessary, specify the delay in playback.

<div class="animated bounceIn delay-1s p-3 mb-5 bg-white rounded">
    <div class="as-dashboard" data-code="forAdmin"></div>
</div> 

List of animation classes - https://animate.style/

Icon animation

To do this, specify a special class on the icon: faa-[type] animated

Change the speed - faa-slow, faa-fast. 

For animation when hovering over the parent button-use the classes  faa-parent and animated-hover

Example:

<a href="#" class="btn btn-primary faa-parent animated-hover">
  <i class="fas fa-wrench faa-wrench"></i>
  &nbsp;faa-wrench
</a>

Documentation for all types of icon animation - https://l-lin.github.io/font-awesome-animation/

Managing the animation of a form or table appearance - https://falcon.web-automation.ru/docs/upravlenie-animaciey-dlya-form--tablic

Animation of numeric data (spinning counter)

In the form, you can use this markup to display growing numbers:

<span class="as-growNum" data-min="0" data-max="122" data-duration="1000">111</span> 

For input fields, values will be taken from value:

<input type="text" class="as-growNum" value="100">

Showing enlarged images (for the image gallery)

This method allows you to show a full-size version of the photo in a modal window with the ability to go to the next photo. 

<div class="as-lightbox">
    <a href="#" class="as-lightbox-item" data-url="{bigImgURL}" data-title="{title}">
        <img data-src="{thumbUrl}">
        <h5>{title}</h5>
    </a>
    <a href="#" class="as-lightbox-item" data-url="{bigImgURL}" data-title="{title}">
        <img data-src="{thumbUrl}">
        <h5>{title}</h5>
    </a>
    ....
</div> 

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

Note