DEV Community: Codeply

Simple Calculator using Vue and Bootstrap 5

Carol Skelly — Wed, 23 Jun 2021 16:51:37 +0000

The HTML Markup

Bootstrap 5 provides all the UI styling and responsive behavior. It's a great fit with Vue now that it's no longer dependent on jQuery. The Bootstrap grid row & col-* are used to responsively change the calculator width as screen size changes.

<div class="row">
        <div class="col-xxl-2 col-lg-3 col-md-4 col-sm-6 mx-auto bg-dark rounded-3 shadow-sm p-3">
            <input class="form-control form-control-lg text-success" v-model="calculator.displayValue" />
            <!-- calculator number pad using grid -->
            <div class="row g-0 text-center mt-2">
                <div class="col-auto text-white">
                    <div class="row g-1 g-lg-1">
                        <div v-for="(key,i) in keypad" :key="i" class="ms-auto col-3 py-2">
                            <button class="btn btn-dark text-warning w-100" @click="processKey(key.value)">{{ key.label }}</button>
                        </div>
                        <div class="col-12 pt-2">
                            <button class="btn btn-dark border-secondary btn-lg text-warning w-100 fw-bold lead" @click="processKey('=')">=</button>
                        </div>
                        <div class="col-12">
                            <div v-if="errValue" class="alert alert-warning p-2 text-truncate small" role="alert">
                              {{ errValue }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

The Vue App Data

Calculator state is kept in it's own data calculator object to track the displayValue, firstOperand and operator. waitingForSecondOperand let's us know when it's ready to perform a calculation.

The keypad array is ordered by how I wanted the keys to render as columns inside the Bootstrap row...

<div v-for="(key,i) in keypad" :key="i" class="ms-auto col-3 py-2">
   <button class="btn btn-dark w-100" @click="processKey(key.value)">{{ key.label }}</button>
</div>

...
  data () {
      return {
        calculator: {
            displayValue: '0',
            firstOperand: null,
            waitingForSecondOperand: false,
            operator: null,
        },
        errValue: null,
        keypad: [
            {label:'7', value: 7},
            {label:'8', value: 8},
            {label:'9', value: 9},
            {label:'x', value: '*'},
            {label:'4', value: 4},
            {label:'5', value: 5},
            {label:'6', value: 6},
            {label:'+', value: '+'},
            {label:'1', value: 1},
            {label:'2', value: 2},
            {label:'3', value: 3},
            {label:'-', value: '-'},
            {label:'AC', value: 'AC'},
            {label:'.', value: '.'},
            {label:'0', value: 0},
            {label:'/', value: '/'},
        ],
  },
...

The Vue App Methods

Of course the calculator actually needs to calculate so I define a series of methods to watch the keystrokes and perform basic math functions. Most of them should be self-explanatory. You will see that errValue is used to store any errors, and resets upon keypress or clear.

When a key is pressed, processKey() is called to determine which key and then call the appropriate function...

inputDigit() - when any digit is clicked
handleOperator() - when any operator is clicked
equalPressed() - when the equal sign is clicked
inputDecimal() - to handle the decimal point (.)
resetCalculator() - to clear the calculator ('AC')

...
  methods: {
    processKey: function(val) {
        this.errValue = null
        switch (val){
          case "AC": this.resetCalculator()
            break;
          case 0:
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
          case 6:
          case 7:
          case 8:
          case 9: this.inputDigit(val)
          break; 
          case "+": this.handleOperator("+")
            break;
          case "-": this.handleOperator("-")
            break;
          case "/": this.handleOperator("/")
            break;
          case "*": this.handleOperator("*")
            break;
          case "=": this.equalPressed();
            break;
          case ".": this.inputDecimal(".")
              break;
          default:
              this.errValue = 'KEY ERROR: in default'
        }
    },
    equalPressed() {
        const { firstOperand, displayValue, operator } = this.calculator
        try{
            this.calculator.displayValue = this.calculate(firstOperand, displayValue, operator)
        }
        catch (e){
            this.errValue = e
        }
    },
    inputDigit(digit) {
        const { displayValue, waitingForSecondOperand } = this.calculator
        console.log(waitingForSecondOperand)
        if (waitingForSecondOperand === true) {
            this.calculator.displayValue = digit
            this.calculator.waitingForSecondOperand = false
        } else {
            console.log(displayValue)
            this.calculator.displayValue =
                displayValue === '0' ? digit : displayValue + '' + digit
        }
    },
    inputDecimal(dot) {
        const { displayValue, waitingForSecondOperand } = this.calculator
        if (waitingForSecondOperand === true) {
            this.calculator.displayValue = '0.'
            this.calculator.waitingForSecondOperand = false
            return
        }

        // check for existing decimal
        if (displayValue % 1 === 0) {
            this.calculator.displayValue += dot
        }
    },
    handleOperator(nextOperator) {
        const { firstOperand, displayValue, operator, waitingForSecondOperand } = this.calculator
        const inputValue = parseFloat(displayValue)

        if (operator && waitingForSecondOperand) {
            this.calculator.operator = nextOperator
            return
        }

        if (firstOperand == null && !isNaN(inputValue)) {
            this.calculator.firstOperand = inputValue
        } else if (operator) {
            const currentValue = firstOperand || 0
            const result = this.calculate(currentValue, inputValue, operator)
            this.calculator.displayValue = String(result)
            this.calculator.firstOperand = result
        }

        this.calculator.waitingForSecondOperand = true
        this.calculator.operator = nextOperator
    },
    calculate(firstOperand, secondOperand, operator) {
        if (operator === '+') {
            return firstOperand + secondOperand
        } else if (operator === '-') {
            return firstOperand - secondOperand
        } else if (operator === '*') {
            return firstOperand * secondOperand
        } else if (operator === '/') {
            if (secondOperand == 0){
                this.errValue = 'ERROR: Cannot divide by 0'
            }
            else {
                return firstOperand / secondOperand
            }
        }

        return secondOperand
    },
    resetCalculator() {
      this.calculator.displayValue = '0'
      this.calculator.firstOperand = null
      this.calculator.waitingForSecondOperand = false
      this.calculator.operator = null
    },
  },
...

Demo | Source

As always, you can play with the latest Bootstrap 5, and find more handy Vue snippets and examples on Codeply!

Thanks for reading!

Helpful Page Layouts using Tailwind CSS

Tom Michew — Thu, 17 Jun 2021 16:43:51 +0000

If you're here you're probably familiar with the CSS utility goodness that is Tailwind CSS. Using the default Tailwind base classes you can quickly knockout some very nice page layouts.

I've done oodles of layouts using Bootstrap, and I wanted to learn more about Tailwind so I thought some hands-on practice would be helpful. These example responsive layouts all make use of Tailwind's Flexbox classes.

2-Column Layout with Sidebar

Here's a super-basic 2-column page layout with Tailwind. It has a sidebar on the left, and a scrollable main content area on the right. There is also a footer that sticks to the bottom regardless of content height. Since I wanted to place a nav menu in the Sidebar, I made the Sidebar sticky so that it's always visible on the left as the page is scrolled vertically. The entire layout has a contained with and centered using container mx-auto



<div class="container mx-auto">
    <div class="flex flex-row flex-wrap py-4">
        <aside class="w-full sm:w-1/3 md:w-1/4 px-2">
            <div class="sticky top-0 p-4 w-full">
                <!-- navigation -->
                <ul class="flex flex-col overflow-hidden">
                    ...
                </ul>
            </div>
        </aside>
        <main role="main" class="w-full sm:w-2/3 md:w-3/4 pt-1 px-2">
            <!-- content area -->
        </main>
    </div>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo

Holy Grail Layout

Perhaps the most famous layout for dotcom era Web designers, here's a Tailwind implementation of the 3-column "Holy Grail". This layout is responsive so that the layout stacks vertically on smaller mobile screens. This fixed|fluid|fixed layout works well for pages that have a lot of content!



<div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
    <!-- fixed-width -->
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-4">
        <div class="sticky top-0 p-4 w-full h-full">
            <!-- nav goes here -->
        </div>
    </div>
    <main role="main" class="w-full flex-grow pt-1 px-3">
        <!-- fluid-width: main content goes here -->
    </main>
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-2">
        <!-- fixed-width -->
        <div class="flex sm:flex-col px-2">
            <!-- sidebar goes here -->
        </div>
    </div>
</div>
<footer class="bg-black mt-auto">
    ...
</footer>

This layout also requires a little extra CSS to make the side columns fixed width...



@media (min-width: 640px) {
    .w-fixed {
        flex: 0 1 230px;
        min-width: 230px;
    }
}

The fixed widths are only applied above Tailwind's small breakpoint of 640px so that the layout stacks vertically on mobile devices.

Demo

Full-screen Background Image

This is the very popular full-screen background image layout that works perfectly for landing pages. You can easily change the center overlay content to a sign-up for or call-to-action card.

This layout is responsive so that the centered content area is full-width on mobile, 50% width on small devices and 33% width on large devices.



<div class="w-full p-4">
    <main role="main" class="w-full flex flex-col h-screen content-center justify-center">
        <div class="w-full sm:w-1/2 lg:w-1/3 bg-gray-50 rounded-xl m-auto">
            <div class="bg-white rounded shadow px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <!-- centered card -->
            </div>
        </div>
    </main>
</div>

Demo

Full-screen App Layout with Sidebar

This single-page "app" style layout features a sidebar, main content area, and footer. This full-height layout is never more than viewport height. The content area scrolls independently as needed. For this example, we're using the Tailwind CSS utility framework. As part of it's default classes, Tailwind includes Flexbox classes which make this layout implementation simple!

Additionally, this layout is responsive. As screen width decreases down to 640px (the smallest Tailwind breakpoint), the layout stacks vertically. The sidebar orientation is flipped from vertical to horizontal (flex-col sm:flex-row), and the main content area fills the remaining height above the footer.



<div class="w-full flex flex-col sm:flex-row flex-grow overflow-hidden">
    <div class="sm:w-1/3 md:1/4 w-full flex-shrink flex-grow-0 p-4">
        <div class="sticky top-0 p-4 w-full">
            <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
                 <!-- nav goes here -->
            </ul>
        </div>
    </div>
    <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
         <!-- content area -->
    </main>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo

Important! If you're going to use Tailwind, remember it's best to make it part of the JS build process so that you can choose the parts you need. The Tailwind CSS referenced in these examples is off CDN and a whopping 2.7MB 😲!

Thanks for reading, and I hope you can make use of these examples to kickstart your next Tailwind project! Play with Tailwind on Codeply

Re-Order Grid Columns in Bootstrap 5

BootstrapNews — Wed, 09 Jun 2021 15:13:59 +0000

A key aspect of responsive design that Bootstrap provides is the ability to change the position of content on different devices and screen widths.

Why Change Content Order?

A common use-case is a typical 2-column page layout. Often, the vertical stacking of columns is desired on smaller screen devices (tablets & phones) where horizontal space is limited. Arguably, this may also help with SEO as the main content is closer to the top of the page when search engines like Google crawl the page.

Using the Bootstrap 5 ordering classes we’re able to utilize the column ordering feature of the Bootstrap grid. On small (mobile) screens we want to show our main content at the top and then the sidebar nav below.

Flexbox Parent & Children

As you may know the Bootstrap 5 grid utilizes Flexbox. The concept of "parent & children" in Flexbox equates to the "row & columns" of the Bootstrap grid. One parent row containing one or more child columns...



<div class="row">
    <div class="col">
         Child 1
    </div>
    <div class="col">
         Child 2
    </div>
    <div class="col">
         Child 3
    </div>
</div>

Natural vs. Visual Order

Notice that the natural order of the columns is:

|---1---|---2---|---3---|

Using the flex ordering CSS classes we can change the visual order of the columns...



<div class="row">
      <div class="col order-2"> Child 1 </div>
      <div class="col order-1"> Child 2 </div>
      <div class="col order-3"> Child 3 </div>
</div>

|---2---|---1---|---3---|

Simple Bootstrap Ordering Demo

As you can see, the columns are in the same natural order, but the visual order has changed by using the order-* classes on the columns.

In practice, we would want to change the visual order depending on the screen width. For example, suppose I want this order on larger screens...

|---3---|---2---|---1---|

But on smaller screens I want this (natural) order...

|---1---|---2---|---3---|

We can achieve this using the responsive order-lg-* classes to control the larger (992px and wider) breakpoint:



<div class="row">
    <div class="col border order-lg-3"> Child 1 </div>
    <div class="col border order-lg-2"> Child 2 </div>
    <div class="col border order-lg-1"> Child 3 </div>
</div>

See row 3 of the demo

Since Bootstrap provides many ordering classes for all 6 breakpoints you can manipulate the position of columns in exhaustively many ways...

Here's the responsive Codeply with more re-ordering examples

Before wrapping-up let's revisit the 1st use-case of changing the order of a 2-column layout. The markup is soooo simple...



<div class="row">
    <div class="col-sm-3 order-sm-first order-last"> Sidebar </div>
    <div class="col-sm"> Main </div>
</div>

See row 4 of the demo

The use of order-sm-first order-last on the Sidebar translates to "order first on small and wider", and "order last on extra small (xs)".

I hope this has given you a little insight as to how ordering works in Bootstrap 5. Please share your thoughts and questions in the comments.

😎B5

Bootstrap 5 Sidebar Examples

Carol Skelly — Mon, 12 Apr 2021 11:52:46 +0000

Now that Bootstrap 5 has a Offcanvas component 👏, it makes sense to explore building a Bootstrap 5 Sidebar. Sidebars are often used for vertical navigation, but they can really be used for any content that's an aside to main content.

Sidebars can get complex. There are many things to consider...

Responsive? different width, visibility or orientation based on screen width?
Multi-level? do the nav items have sub levels? Will this impact height, scrolling or visibility of items?
Toggleable? can the sidebar be toggled by a button or "hamburger"?
Push vs. Overlay? is main content hidden behind or next to the sidebar?
Left or Right? is the sidebar to the left or right of main content?
Fixed or Sticky? how is the sidebar positioned on page scroll?
Animation Style? slide left/right/up/down?, collapse?

IMO, the best way to get after all of the above considerations is to look at various Sidebar examples. These examples demonstrate Sidebars with navigation since that's what I consider to be the primary function. The examples also use common page layouts and content, because Sidebars are often impacted by the entire page layout.

Sidebar Example 1

Left vertical sidebar with submenus

Here's a left side 2-level vertical sidebar with collapsible menu items. The menu functions like an "accordion" where only a single menu is open at a time. It's also responsive which allows the main content area to be visible. The sidebar shrinks in width, hides the text labels and collapses to icons only on mobile devices.

HTML Markup



<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
            <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
                <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
                    <span class="fs-5 d-none d-sm-inline">Menu</span>
                </a>
                <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
                    <li class="nav-item">
                        <a href="#" class="nav-link align-middle px-0">
                            <i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
                            <i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
                        <ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
                            <li class="w-100">
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1 </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2 </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="nav-link px-0 align-middle">
                            <i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
                    </li>
                    <li>
                        <a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
                            <i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
                        <ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
                            <li class="w-100">
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1</a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
                            <i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
                            <ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
                            <li class="w-100">
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 1</a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 2</a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 3</a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="nav-link px-0 align-middle">
                            <i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
                    </li>
                </ul>
                <hr>
                <div class="dropdown pb-4">
                    <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
                        <span class="d-none d-sm-inline mx-1">loser</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col py-3">
            Content area...
        </div>
    </div>
</div>

Example 1 - Demo

Sidebar Example 2

Vertical sidebar that changes to navbar on mobile

This 2nd example is a vertical sidebar (on large screens) that switches to a horizontal navbar (on smaller mobile screens). It's a multi-level sidebar with collapsible menu items. The menu functions like an "accordion" where only a single menu is open at a time.

This sidebar layout also considers sticky and scrolling behaviors. The sidebar and bottom footer both appear fixed on larger screens. Only the content area is scrollable (when content height allows). On mobile screens, the horizontal sidebar remains fixed at the top (using sticky position), and the remaining content and footer sections scroll the entire page height. For this reason a small CSS change is need to make the height responsive...

HTML Markup



<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto bg-light sticky-top">
            <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
                <a href="/" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Icon-only">
                    <i class="bi-bootstrap fs-1"></i>
                </a>
                <ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center align-items-center">
                    <li class="nav-item">
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home">
                            <i class="bi-house fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Dashboard">
                            <i class="bi-speedometer2 fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Orders">
                            <i class="bi-table fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Products">
                            <i class="bi-heart fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
                            <i class="bi-people fs-1"></i>
                        </a>
                    </li>
                </ul>
                <div class="dropdown">
                    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi-person-circle h2"></i>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm p-3 min-vh-100">
            <!-- content -->
        </div>
    </div>
</div>

Example 2 - Demo

If you don't need the sticky footer, here's a slight variation that doesn't reguire extra CSS

Sidebar Example 3

Sidebar with Bootstrap icons

The next example is similar to the prior as it changes to horizontal orientation on mobile. This full height example has big beautiful icons from Bootstrap icons. This example also use sticky position to make the sidebar appear fixed as the page is scrolled.

HTML Markup



<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto bg-light sticky-top">
            <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
                <a href="/" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Icon-only">
                    <i class="bi-bootstrap fs-1"></i>
                </a>
                <ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center align-items-center">
                    <li class="nav-item">
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home">
                            <i class="bi-house fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Dashboard">
                            <i class="bi-speedometer2 fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Orders">
                            <i class="bi-table fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Products">
                            <i class="bi-heart fs-1"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
                            <i class="bi-people fs-1"></i>
                        </a>
                    </li>
                </ul>
                <div class="dropdown">
                    <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi-person-circle h2"></i>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm p-3 min-vh-100">
            <!-- content -->
        </div>
    </div>
</div>

Example 3 - Demo

Sidebar Example 4

Collapse off-canvas left sidebar

This is the first collapsible example, and it's done using Bootstrap 5's new Offcanvas component. This left sidebar overlays the main content area and can be hidden/shown using a toggle button.

HTML Markup



<div class="offcanvas offcanvas-start w-25" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="false">
    <div class="offcanvas-header">
        <h6 class="offcanvas-title d-none d-sm-block" id="offcanvas">Menu</h6>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body px-0">
        <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu">
            <li class="nav-item">
                <a href="#" class="nav-link text-truncate">
                    <i class="fs-5 bi-house"></i><span class="ms-1 d-none d-sm-inline">Home</span>
                </a>
            </li>
            <li>
                <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                    <i class="fs-5 bi-speedometer2"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
            </li>
            <li>
                <a href="#" class="nav-link text-truncate">
                    <i class="fs-5 bi-table"></i><span class="ms-1 d-none d-sm-inline">Orders</span></a>
            </li>
            <li class="dropdown">
                <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
                </a>
                <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                    <li><a class="dropdown-item" href="#">New project...</a></li>
                    <li><a class="dropdown-item" href="#">Settings</a></li>
                    <li><a class="dropdown-item" href="#">Profile</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Sign out</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="nav-link text-truncate">
                    <i class="fs-5 bi-grid"></i><span class="ms-1 d-none d-sm-inline">Products</span></a>
            </li>
            <li>
                <a href="#" class="nav-link text-truncate">
                    <i class="fs-5 bi-people"></i><span class="ms-1 d-none d-sm-inline">Customers</span> </a>
            </li>
        </ul>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col min-vh-100 py-3">
            <!-- toggler -->
            <button class="btn float-end" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" role="button">
                <i class="bi bi-arrow-right-square-fill fs-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></i>
            </button>
            Content..
        </div>
    </div>
</div>

Example 4 - Offcanvas "overlay" Sidebar Demo

Sidebar Example 5

Navbar with search form and left sticky sidebar

This last example considers other components like the top Navbar and main content area. The sidebar uses sticky-top to appear fixed on the left side so that it remains in place as the page is scrolled. On mobile, the sidebar switches to a horizontal icon bar positioned below the Navbar.

Example 5 - Navbar + Sidebar Demo

Sidebar Example 6

Simple offcanvas "push" sidebar

If you read my Bootstrap 5 Offcanvas article you've seen that the Offcanvas component is for an "overlay" type sidebar. However, if you want a "push" type sidebar, the Offcanvas component isn't going to work.

To create a "push" type sidebar, instead use a Bootstrap grid column to contain the sidebar, and the Collapse component to toggle it open/closed...



<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-auto px-0">
            <div id="sidebar" class="collapse collapse-horizontal show border-end">
                <div id="sidebar-nav" class="list-group border-0 rounded-0 text-sm-start min-vh-100">
                    <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><span>Item</span> </a>
                    (more nav items) ... 
                </div>
            </div>
        </div>
        <main class="col ps-md-2 pt-2">
            <a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none"><i class="bi bi-list bi-lg py-2 p-1"></i> Menu</a>
            <div class="row">
                <div class="col-12">
                    Content area...
                </div>
            </div>
        </main>
    </div>
</div>

Example 6 - Simple "push" Sidebar Demo

Did you notice that all of the above examples were done using only Bootstrap classes? 😎 This means you don't need custom CSS to create a Sidebar with Bootstrap 5.

It's also worth taking a look 👀 at Bootstrap's official sidebar examples. The official Bootstrap examples don't consider entire page layout, but still may be helpful when considering the sidebar content alone. Discover what else is new in Bootstrap 5

I hope these Sidebar example will kickstart your next Bootstrap project. Let me know your thoughts in the comments!

Bootstrap finally has an Off-canvas Component

Carol Skelly — Thu, 25 Mar 2021 13:30:15 +0000

Introducing the Bootstrap 5 Off-canvas

For years (literally since 2014) I've been answering questions on SO about how to make an "offcanvas sidebar" using Bootstrap. Developers would mistakenly think 3rd party projects like this and this, or even this experimental Offcanvas example in the docs were going to magically work with Bootstrap "out-of-the-box".

Here are some of my favorite "Off-canvas Sidebar" questions from SO...

create-a-responsive-navbar-sidebar-drawer-in-bootstrap

bootstrap-off-canvas-missing-css-js

bootstrap-slide-in-menu-navbar-on-mobile

Thankfully most of these Q&A will retire to the custom sidebar graveyard now that Bootstrap 5 Beta 3 (finally! 🙌🎉) has its own offical Offcanvas Component.

Closer Look at Bootstrap Offcanvas

Announced recently on the blog...

"..the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport..."

This enables you to build hidden sidebars and content panels into your project for navigation, shopping carts, etc... Buttons or anchors are used as triggers that are attached to the specific Offcanvas element to toggle.

The new Offcanvas Component shares some of the same JavaScript code as the Modal Component. This is not surprising since I used the Modal Component for this sidebar implementation and these off-canvas menus in Bootstrap 4.

Conceptually, they are quite similar, and the same Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s variables. When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. Similar to modals, only one offcanvas can be shown at a time.

The Markup

Simply use the offcanvas* classes and the data-bs- attributes in your HTML to create an Offcanvas element...



<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" aria-controls="offcanvasExample">
  Open
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
  </div>
</div>

Demo

The Javascript

You can also use the Offcanvas with vanilla JS..



new bootstrap.Offcanvas(document.getElementById("myOffcanvas"), {backdrop: false})

Options: (can be passed via data attributes or JavaScript)

backdrop: Apply a backdrop on body while offcanvas is open
keyboard: Closes the offcanvas when escape key is pressed
scroll: Allow body scrolling while offcanvas is open

Methods:

toggle(): Toggles an offcanvas element to shown or hidden
show(): Shows an offcanvas element
hide(): Hides an offcanvas element

Events:

show.bs.offcanvas: fired when the show instance method is called
shown.bs.offcanvas: fired when offcanvas has been made visible
hide.bs.offcanvas: fired when the hide method has been called
hidden.bs.offcanvas: fired when an offcanvas has been hidden

Bootstrap Offcanvas Examples

Let's see it in action with some examples.

Basic Left Sidebar Menu

Here's a simple sidebar menu using the Offcanvas component: Demo

Toggle Sidebar with Switch

Add a little JavaScript to trigger the Offcanvas using a switch: Demo

Bottom Pop-up Offcanvas Footer

Of course "offcanvas" isn't just for sidebars. Here's an example of a pop-up footer: Demo

Long live the Offcanvas! What are your thoughts? Did I miss an example you'd like to see? LMK in the comments.

Using Bootstrap 5 with Vue.js

Carol Skelly — Fri, 22 Jan 2021 13:35:40 +0000

It used to be that in order to use Bootstrap with Vue you had to use a 3rd party wrapper library like bootstrap-vue.

BUT, now that Bootstrap 5 no longer requires jQuery, using it in your Vue app is much easier and with no conflicts! 😲 Now that Bootstrap 5 components are written as vanilla JS plugins, you get improved alignment with Vue's best patterns & practices.

This also means it's possible to use Bootstrap 5 components without the need for a 3rd party library like bootstrap-vue.

Installing Bootstrap 5 in Vue

Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package.json.

npm install bootstrap

Using Bootstrap 5 in Vue

The simplest way to use Bootstrap components in Vue is via the data-bs- attributes. For example here's the Bootstrap Collapse component...

        <button class="btn btn-primary" 
            data-bs-target="#collapseTarget" 
            data-bs-toggle="collapse">
            Bootstrap collapse
        </button>
        <div class="collapse py-2" id="collapseTarget">
            This is the toggle-able content!
        </div>

Or, you can import any Bootstrap components and "wrap" them as Vue components. For example here's the Popover component...

import { Popover } from bootstrap

const popover = Vue.component('bsPopover', {
    template: `
        <slot/>
    `,
    props: {
        content: {
            required: false,
            default: '',
        },
        title: {
            default: 'My Popover',
        },
        trigger: {
            default: 'click',
        },
        delay: {
            default: 0,
        },
        html: {
            default: false,
        },
    },
    mounted() {
        // pass bootstrap popover options from props
        var options = this.$props
        var ele = this.$slots.default[0].elm
        new Popover(ele,options)
    },
})

   <bs-popover
        title="Hello Popover"
        content="This is my content for the popover!"
        trigger="hover">
        <button class="btn btn-danger">
           Hover for popover
        </button>
   </bs-popover>

Bootstrap 5 + Vue Demo

Here's another example componentizing the Collapse JS plugin:

const collapse = Vue.component('bsCollapse', {
    template: `
        <div>
            <slot name="trigger"></slot>
            <slot name="target"></slot>
        </div>
    `,
    props: {
        toggle: {
            required: false,
            default: false
        },
        id: {
            required: true
        }
    },
    mounted() {
        var trigger = this.$slots['trigger'][0].elm
        var target = this.$slots['target'][0].elm
        target.classList.add('collapse')
        target.setAttribute('id', this.id);
        trigger.setAttribute('data-bs-target', '#' + this.id);
        trigger.setAttribute('data-bs-toggle','collapse');
        new Collapse(target, {toggle: this.toggle })
    },
})

<bs-collapse id="collapse1">
       <button class="btn btn-info" slot="trigger">
            Bootstrap collapse
       </button>
       <div slot="target">Toggle the display of this collapsible content!</div>
</bs-collapse>

Bootstrap 5 + Vue Demo

Of course using a lib like bootstrap-vue is still somewhat easier since they've already "wrapped" all the Bootstrap components for you. But this technique is helpful if you're only using Bootstrap CSS, and want the functionality of only a few JS components.

Also, here are a few more Vue + Bootstrap 5 component examples for you...

Vue Bootstrap 5 Modal
Vue Bootstrap 5 Dropdown
Vue Bootstrap 5 Tooltip
Vue Bootstrap 5 Offcanvas

Using Bootstrap 5 with React

Carol Skelly — Wed, 30 Dec 2020 16:41:00 +0000

How to use the new Bootstrap 5 with React

Bootstrap and React have both been around for a while now, but now that the Bootstrap 5 beta is out, there's finally something to cheer about! 🙌

Now that Bootstrap 5 no longer requires jQuery, using it in your React app is much easier and without conflicts! 😲 Now that Bootstrap 5 components are written as vanilla JS plugins, you get improved alignment with React's best patterns & practices.

This also means it's possible to use Bootstrap 5 components without the need for a 3rd party library like react-bootstrap or reactstrap.

First up, add Bootstrap to your React app's package.json:

npm install bootstrap --save

Once Bootstrap is included, you'll be able to import components the way you do with any JS module. For example, let's import Bootstrap's Toast component...

import { Toast} from bootstrap

And then use it with React's useEffect and useState hooks...

function ToastDemo() {
    var [toast, setToast] = useState(false);
    const toastRef = useRef();

    useEffect(() => {
        var myToast = toastRef.current
        var bsToast = bootstrap.Toast.getInstance(myToast)

        if (!bsToast) {
            // initialize Toast
            bsToast = new Toast(myToast, {autohide: false})
            // hide after init
            bsToast.hide()
            setToast(false)
        }
        else{
            // toggle
            toast ? bsToast.show() : bsToast.hide()

        }
    })

    return (
    <div className="py-2">
        <button className="btn btn-success" onClick={() => setToast(toast => !toast)}>
            Toast {toast?'hide':'show'}
        </button>
        <div className="toast" role="alert" ref={toastRef}>
            <div className="toast-header">
                <strong className="me-auto">Bootstrap 5</strong>
                <small>4 mins ago</small>
                <button type="button" className="btn-close" onClick={() => setToast(false)} aria-label="Close"></button>
            </div>
            <div className="toast-body">
              Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    )
}

Or, (if that wasn't easy enough) use the new namespaced data-bs- attributes directly in your markup. For example, let's use the Bootstrap 5 Collapse component...

function CollapseDemo() {
  return (
    <div className="py-2">
        <button className="btn btn-primary" data-bs-target="#collapseTarget" data-bs-toggle="collapse">
            Toggle collapse
        </button>
        <div className="collapse" id="collapseTarget">
            This is the toggle-able content!
        </div>
    </div>
  )
}

Now you can easily use any of the Bootstrap 5 Components in your React project. Check out these Bootstrap 5 React examples that use the Bootstrap 5 Toast, Alert, Collapse, Modal, Tooltip and Popover. Also be sure to take a look at all the new updates in Bootstrap 5.

What do you think? Do you plan on bringing Bootstrap 5 into your next React project, or do you prefer a different React friendly design system?

What's New in Bootstrap 5

Carol Skelly — Thu, 17 Dec 2020 17:08:08 +0000

Even if you find Bootstrap "boring", most of us frontend devs will be seeing more of the new Bootstrap 5 version very soon. It's now available in beta. And who knows, maybe these new improvements will make you fall in love ❤️ with Bootstrap again.

Javascript (No More jQuery!)

You may have already heard that Bootstrap 5 no longer requires jQuery. This is obviously a big deal as now using Bootstrap won't conflict with your other Javascript frameworks like React and Vue.js. (Explore further on using Bootstrap 5 with React)

The move towards pure JS also provides support for ES modules which make it easier to import bootstrap and its components modularly as needed.

What you need to know:
The data-* attributes have been replaced with data-bs-* in Bootstrap 5. These Bootstrap namespaced HTML attributes are
used to enable JavaScript behaviors. For example, here's a button that uses the Collapse component to toggle the #navbar menu...

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

No more jQuery also means that things like Tooltips, Popovers and Toast must be initialized with Javascript...

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

New Offcanvas Component

As of Bootstrap 5 beta 3, there is now a Offcanvas component. As the docs state, use the Offcanvas to "Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin".

CSS

RTL Support

The big news on the Bootstrap CSS front is RTL (right-to-left) support.

What you need to know:
To align with RTL support, the concept of left and right have been replaced with start and end. For example, the old margin utility as ml-auto is now ms-auto.

Converting from LTR Bootstrap 4 classes to Bootstrap 5...

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
*-right => *-start
*-left => *-end

New XXL Breakpoint

Bootstrap 5 adds a new sixth breakpoint for screen widths wider than 1400px. This makes it possible to control responsive behavior on a wide range of viewports.

New Utility Classes

There are a few new handy additions to the Bootstrap 5 Utilities.

Positioning

In addition to the existing position-(fixed|relative|absolute|static|sticky) classes, there are new top-, start-, end-, and -bottom classes for 0%, 50%, and 100%. For example, end-50 equivocates to end: 50%. These are helpful for relative, absolute, and fixed positioning. Also handy for Bootstrap 5 Toasts. CSS translate has also been added (ie: translate-middle-x).

CSS Grid

While the Grid system (row, cols, etc...) is still flexbox based, there are new display-grid and gap utility classes. IMO, this is not really useful until CSS grid child classes become available.

Line Height

A simple, yet useful addition is the line-height utility classes:

lh-1
lh-sm
lh-base
lh-lg

Interactions

These are new utility classes for user-select and pointer-events CSS properties.

SASS

Most devs aren't recompiling the Bootstrap CSS using the SASS source. But, if you are there's some cool new stuff.

The new Utility API now provides state for pseudo-class variations (hover, focus, etc..). I really like this feature. For example, you could change the background color on hover...

Customize the utilities SASS map background-color with state...

$utilities: (
  "background-color": (
      property: background-color,
      class: bg,
      state: hover,
      values: map-merge(
        $theme-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
  )
);

Which outputs this CSS...

.bg-danger-hover:hover { background-color: ... }
.bg-info-hover:hover { background-color: ... }
.bg-warning-hover:hover { background-color: ... }
.bg-success-hover:hover { background-color: ... }
.bg-primary-hover:hover { background-color: ... }
.bg-light-hover:hover { background-color: ... }
.bg-dark-hover:hover { background-color: ... }

Finally, use it in your HTML markup. Here's a card that changes from bg-dark to bg-info when hovered.

<div class="card bg-dark bg-info-hover">
    ....
</div>

Utility API SASS demo

The Utility API is very powerful. With it you can add any utility classes you want. For example, add opacity-* classes:

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Take it a step further making the opacity classes responsive (responsive: true) which ties them to the Bootstrap 5 breakpoints:

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

The resulting CSS now contains 5 classes for opacity at each breakpoint! ___ opacity-(0|25|50|75|100) opacity-sm-(0|25|50|75|100), opacity-md-(0|25|50|75|100), etc...

Upgrading from Bootstrap 4

As with prior versions, there are many breaking changes that you'll need to migrate if you want to upgrade from Bootstrap 4 to Bootstrap 5. Want to convert Bootstrap 4 markup to Bootstrap 5?

Here's a quick list of classes changes:

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
no-gutters => g-0
text-left => text-start
text-right=> text-end
float-left => float-start
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=> rounded-end
dropleft => dropstart
dropright=> dropend
dropdown-menu-*-left => dropdown-menu-*-start
dropdown-menu-*-right => dropdown-menu-*-end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end
font-weight-* => fw-*

Bootstrap 5 is currently ~~beta 1~~ beta 3. When more changes come online, I will be updating this Bootstrap 5 migration guidance accordingly.

You can also start playing with the latest Bootstrap 5 on Codeply.

What do you think? Will you be taking a look at Bootstrap 5? What other updates would you like to see added? Let me know in the comments.

A Vue JSON Linter

Carol Skelly — Tue, 24 Nov 2020 14:39:00 +0000

As a developer, one of my favorite go-to tools is jsonlint.com. I like it so much that I decided to make my own JSON Linter using Vue 2.

The Vue App

This turned out KISS. Just 2 vars for the JSON as a string, and displaying errors. I used a computed prettyFormat method that handle the validation logic.

The prettyFormat method attempts to parse the JSON string, and on error displays the line & position of the problem. To highlight the error position within the JSON, I grab a ref to textarea element, and find the position, and finally use setSelectionRange to highlight the problem text...

const app = new Vue ({
  el: '#app',
  data: {
    jsonstr: "",
    jsonerror: ""
  },
  computed: {
    prettyFormat: function() {
        // reset error
        this.jsonerror = "";
        let jsonValue = "";
        try {
            // try to parse
            jsonValue = JSON.parse(this.jsonstr);
        }
        catch(e) {
            this.jsonerror = JSON.stringify(e.message)
            var textarea = document.getElementById("jsonText");
            if (this.jsonerror.indexOf('position')>-1) {
                // highlight error position
                var positionStr = this.jsonerror.lastIndexOf('position') + 8;
                var posi = parseInt(this.jsonerror.substr(positionStr,this.jsonerror.lastIndexOf('"')))
                if (posi >= 0) {
                    textarea.setSelectionRange(posi,posi+1);
                }
            }
            return "";
        }
        return JSON.stringify(jsonValue, null, 2);
    }
  }
})

The HTML / Vue Markup

The markup is very simple and I used Bootstrap 4 for the styling. As you'll see here there are 2 mutually exclusive divs. The first to show errors, and the 2nd to confirm that the JSON is valid.

The JSON itself is contained in a textarea that's bound to the jsonstr v-model. Finally the <pre> tag displays the formatted JSON...

<div id="vueapp">
   <div class="text-danger" v-if="jsonstr && jsonerror">{{ jsonerror }}</div>
   <div class="text-success" v-if="!jsonerror">Valid JSON ✔</div>
   <textarea v-model="jsonstr" rows="10" class="form-control" id="jsonText" placeholder="paste or type JSON here..."></textarea>
   <pre>{{ prettyFormat }}</pre>
</div>

Grab the code here, and share your comments!😊

Build a Simple CRUD App with Airtable, Vue + Vuetify

Carol Skelly — Wed, 22 Apr 2020 14:00:56 +0000

What is Airtable

If you're not familiar with it, Airtable is like Google Sheets meets relational DB. Best of all it's free, has a simple-to-use GUI (for no-coders) and an API for your data!

Creating your database is a simple matter of adding a "sheet" in Airtable. For example, here's an Airtable named "Somedata", with a single table name "Example"...

Add whatever columns/fields you need using the variety of data types Airtable offers.

Every Airtable has an API😎

Once you add the sheet and a few columns, click the ? (help) icon in the upper right corner of the Airtable UI, and select 'API Documentation'. You'll see the Docs for your Airtable's API...

As you'd expect for a simple CRUD API, there are API methods for List, Read, Create, Update and Delete. Each API endpoint is a URL consisting of the Airtable id (A.K.A. "app id") and the table name. API requests also require a unique API key which you can also find the API Docs.

For example, here's the API URL for my "Somedata" (app id: appsAka4wMdRoGCUc) table named "Example":

Example URL for API endpoint

https://api.airtable.com/v0/appsAka4wMdRoGCUc/Example

Vue App with Vuetify

Using Vuetify's awesome component framework, let's create the Vue App. I've added some constants to keep my Airtable settings (we'll use those later):

<script>
const apiToken = "keyZoaskXXXX" // use your own key!
const airTableApp = "appXJzFFs2zgj4X5C"
const airTableName = "Example"

new Vue({
  el: '#app',
  vuetify: new Vuetify(),   
})
</script>

<template>
<div id="app">
    <v-app>
        <v-content>
            <h2>
                Vuetify CRUD Example
            </h2>
        </v-content>
    </v-app>
</div>
</template>

Axios & Vuetify DataTable

We'll use Vue Axios for comms with the Airtable API. Vuetify's DataTable component is used to display the data, and give us built-in pagination, sorting and searching.

We use a dual-purpose Dialog component to Create or Edit records.

Everything up to this point is standard Vue, Veutify, Axios boilerplate. Now let's get into the guts of the CRUD app...

1. First let's setup the v-data-table in our template markup:

<div id="app">
    <v-app>
        <v-content class="container align-center px-1">
            <h2 class="font-weight-light mb-2">
                Vuetify CRUD Example
            </h2>
            <v-card>
                <v-data-table 
                :headers="headers" 
                :items="items">
                </v-data-table>
            </v-card>
        </v-content>
    </v-app>
</div>

2. Add the Vue data() for items and headers used by the Vuetify DataTable. Notice the headers correspond to the Airtable Example columns.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
        headers: [
            { text: 'Id', value: 'id' },
            { text: 'Name', value: 'Name' },
            { text: 'Details', value: 'details', sortable: false, width:"100" },
            { text: 'URL', value: 'url', name:'url', width:"180" },
            { text: 'Action', value: 'actions', sortable: false },
        ],
        items: [],
        dialog: false, // used to toggle the dialog
        editedItem: {} // empty holder for create/update ops
    }
  },
})

Reading from Airtable API

3. Next, we'll use Axios to make a GET request (fetch) to the Airtable API. Here's the method loadItems() that reads all records (rows) in 'Example'. We call this when the Vue component has mounted()...

  ...
  mounted() {
    this.loadItems()
  },
  methods: {
    loadItems() {
        this.items = []
        axios.get(`https://api.airtable.com/v0/${airTableApp}/${airTableName}`,
            { headers: { Authorization: "Bearer " + apiToken }})
        .then((response) => {
            // load the API response into items for datatable
            this.items = response.data.records.map((item)=>{
                return {
                    id: item.id,
                    ...item.fields
                }
            })
        }).catch((error) => {
            console.log(error)
        })
    },

Notice above that we've now made use of the Airtable const's created earlier.

Handle the Response from Airtable API

The API response data looks like this...

List records response from Airtable API

{
    "records": [
        {
            "id": "recqbv38i4CbirwP4",
            "fields": {
                "Cat": "bar",
                "URL": "https://codeply.com",
                "Lat": -71.39241,
                "Details": "Frontend editor online",
                "Name": "Codeply",
                "Lon": 41.46,
                "Client": "John Doe"
            },
            "createdTime": "2020-03-25T18:33:52.000Z"
        },
        {
            "id": "recsEjAfLlkKH5rcC",
            "fields": {
                "Cat": "lodging",
                "URL": "https://themestr.app",
                "Lat": -71.39,
                "Details": "Theme builder and customizer for Bootstrap 4",
                "Name": "Themestr.app",
                "Lon": 41.67,
                "Client": "Mary Janes"
            },
            "createdTime": "2020-03-25T18:33:52.000Z"
        },
        ... more rows...
    ]
}

It's important to notice above that the table data is contained in the records Array, and row data is nested in the fields property. Which is why the loadItems() method assigns to the data this.items like this:

         this.items = response.data.records.map((item)=>{
             return {
                 id: item.id,
                 ...item.fields
             }
         })

Now the this.items Array has a flattened structure that's easy for the v-data-table to iterate:

   [
        {
            "id": "recqbv38i4CbirwP4",
            "Cat": "bar",
            "URL": "https://codeply.com",
            "Lat": -71.39241,
            "Details": "Frontend editor online",
            "Name": "Codeply",
            "Lon": 41.46,
            "Client": "John Doe".
            "createdTime": "2020-03-25T18:33:52.000Z"
        },
        ... more rows...
   ]

Sending Data to Airtable API (POST and PUT)

4. Continue on with methods for saveItem (create or update) and deleteItem:

  ,
  methods: {
    loadItems() {
        ...
    },
    saveItem(item) {
        /* this is used for both creating and updating API records
         the default method is POST for creating a new item */

        let method = "post"
        let url = `https://api.airtable.com/v0/${airTableApp}/${airTableName}`
        let id = item.id

        // airtable API needs the data to be placed in fields object
        let data = {
            fields: item
        }

        if (id) {
            // if the item has an id, we're updating an existing item
            method = "patch"
            url = `https://api.airtable.com/v0/${airTableApp}/${airTableName}/${id}`

            // must remove id from the data for airtable patch to work
            delete data.fields.id
        }

        // save the record
        axios[method](url,
            data,
            { headers: { 
                Authorization: "Bearer " + apiToken,
                "Content-Type": "application/json"
            }
        }).then((response) => {
            if (response.data && response.data.id) {
                // add new item to state
                this.editedItem.id = response.data.id
                if (!id) {
                    // add the new item to items state
                    this.items.push(this.editedItem)
                }
                this.editedItem = {}
            }
            this.dialog = !this.dialog
        })
    },
    deleteItem(item) {
        let id = item.id
        let idx = this.items.findIndex(item => item.id===id)
        if (confirm('Are you sure you want to delete this?')) {
            axios.delete(`https://api.airtable.com/v0/${airTableApp}/${airTableName}/${id}`,
                { headers: { 
                    Authorization: "Bearer " + apiToken,
                    "Content-Type": "application/json"
                }
            }).then((response) => {
                this.items.splice(idx, 1)
            })
        }
    },

5. Now we'll hook up the dialog that contains form inputs for editing the data. It also contains a 'New' button for creating records. Add the v-dialog markup right below the v-data-table...

       <v-card>
            <v-data-table 
             :headers="headers" 
             :items="items" 
             >
             </v-data-table>
             <!-- this dialog is used for both create and update -->
             <v-dialog v-model="dialog">
                  <template v-slot:activator="{ on }">
                    <div class="d-flex">
                        <v-btn color="primary" dark v-on="on">
                            New 
                        </v-btn>
                    </div>
                  </template>
                  <v-card>
                    <v-card-title>
                        <span v-if="editedItem.id">Edit {{editedItem.id}}</span>
                        <span v-else>Create</span>
                    </v-card-title>
                    <v-card-text>
                        <v-row>
                          <v-col cols="12" sm="4">
                            <v-text-field v-model="editedItem.Name" label="Name"></v-text-field>
                          </v-col>
                          <v-col cols="12" sm="8">
                            <v-text-field v-model="editedItem.Details" label="Details"></v-text-field>
                          </v-col>
                          <v-col cols="12" sm="12">
                            <v-text-field v-model="editedItem.URL" label="URL"></v-text-field>
                          </v-col>
                        </v-row>
                    </v-card-text>
                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn color="blue" text @click="showEditDialog()">Cancel</v-btn>
                      <v-btn color="blue" text @click="saveItem(editedItem)">Save</v-btn>
                    </v-card-actions>
                  </v-card>
            </v-dialog>
       </v-card>

6. Then, add a method to toggle display of the dialog:

 methods: {
    showEditDialog(item) {
        this.editedItem = item||{}
        this.dialog = !this.dialog
    },
    loadItems() {...},

7. Next, customize the v-data-table item.actions slot template to hook into the showEditDialog() method for editing existing records. Also add an icon/button for deleteItem().

 <v-data-table 
    :headers="headers" 
    :items="items">
        <template v-slot:item.actions="{ item }">
            <div class="text-truncate">
              <v-icon
                class="mr-2"
                @click="showEditDialog(item)"
                color="primary" 
              >
                mdi-pencil
              </v-icon>
              <v-icon
                @click="deleteItem(item)"
                color="pink" 
              >
                mdi-delete
              </v-icon>
          </div>
        </template>
    </v-data-table>

The finished product 😏is the working Vuetify + Airtable CRUD example.

Let me know in the comments your thoughts on this, and grab the full source code here: https://codeply.com/p/Vx4dDt5c9G/vuetify-crud-example

The Ultimate Responsive Vuetify Data Iterator

Carol Skelly — Wed, 15 Apr 2020 16:09:02 +0000

Design Goals

Responsive columns per row
- 1 card per row on phones (xs)
- 2 cards per row on tablets (sm)
- 3 cards per row on laptops (md)
- 4 cards per row on desktops (lg)
- 6 cards per row on wide (xl)
Maximize rows per page, no scrolling
Maximize items per page, no gaps
Dynamic pagination

What makes this the Ultimate Responsive Data Iterator?

Without a doubt, creating a data iterator in Vuetify is NBD. However, creating a data iterator that meets our specific design goals is more challenging. Consider this SO post 💡...

Apr 9 '20 Comments: Answers: 1

We are using Vuetify's v-data-iterator to control pagination on a grid layout. We are setting the iterator's rows-per-page-items to [8, 16, 24, 36]. But this doesn't exactly determine the number of rows per page, but items per page. That is, because it's a grid layout, there may be several items…

Open Full Question

There are several unknowns here. The columns in each row wrap responsively based on breakpoints, so it's difficult to determine the ideal number of items per page. It's also difficult to know the ideal number of columns per row. If we set a specific number of items per page, there may be gaps on the last row depending on the current viewport.

This is a common issue with responsive grids like Bootstrap and Vuetify's. This is because we iterate (repeat) the columns (items) in a single row element.

<v-row>
  <v-col v-for="n in items">..</v-col>
</v-row>

But the "visual" rows that are rendered wrap according to the responsive breakpoints we have set. Therefore, the challenge is to to sync-up the "wrapping" of the repeating data items with the current viewport width (breakpoint).

Vuetify's Data Iterator Component

Since I don't want to reinvent the wheel, I'm using the data iterator. What's cool is that you can customize it simply using a template. You can use whatever markup you want for each item (rows, list items, card, etc..). This solution makes full use of the Vuetify 2.x Data Iterator using customizations on the header, footer and default slot templates.

The Solution

Controlling the rows-per-page and items-per-row with responsive items is a little math challenge🤓. What we do know is:

the total number of data items
the current responsive breakpoint
there are 12 column units per row (based on Vuetify's grid)

Using Vue computed values, determine the number of pages (for pagination), optimal rows per page (based on viewport height), items per row (based on how many cols you want on each breakpoint), and finally use this to calculate the items per page (ipp)...

   computed: {
      numberOfPages () {
        return Math.ceil(this.beers.length / this.ipp)
      },
      rowsPerPage () {
        return this.rpp
      },
      itemsPerRow () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return 1
          case 'sm': return 2
          case 'md': return 3
          case 'lg': return 4
          case 'xl': return 6
        }
      },
      ipp () {
         return Math.ceil(this.rowsPerPage * this.itemsPerRow)
      },
   },

The number of pages, and items-per-row is calculated as viewport width changes. This meets our responsive design goal of cards per row, while also preventing gaps (or missing items) in the last row.


   methods: {
        ...
        calcRowsPerPage () {
            let container = document.getElementById('container')
            let minItemHeight = 170
            if (container) {
                let containerHeight = parseInt(container.clientHeight, 0)
                this.rpp = Math.floor(containerHeight/minItemHeight)
            }
            else {
                this.rpp = 4
            }
        },
    },
    created() {
        // re-calc on screen resize
        window.addEventListener('resize', () => {
            this.calcRowsPerPage()
        })
   },

The responsive behavior is achieved using the slot:default template. Notice the cols prop is determined by dividing 12 (the number of columns in Vuetify's grid) by the computed itemsPerRow value. As you can see above, itemsPerRow is based on the Vuetify breakpoints.

   <template v-slot:default="props">
        <v-row class="fill-height overflow-auto" id="container">
          <v-col
            v-for="(item,idx) in props.items"
            :key="item.name"
            :cols="(12/itemsPerRow)"
            class="py-2"
          > 
            <v-card class="card fill-height">
              <v-card-title>
                  <span class="font-weight-light text-truncate">
                    <span v-text="item.id"></span> {{ item.name }} 
                  </span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text>
                <span v-html="item.tagline" class="mr-2"></span>
                <v-chip v-text="item.first_brewed"></v-chip>
              </v-card-text>    
            </v-card>
          </v-col>
        </v-row>
    </template>

6 items on wide...

4 items on large...

3 items on medium..

Stacking with 1 item per row on mobile...

And..., on all these breakpoints the pagination is updated! This happens because the reactive props are synced...

    <v-data-iterator
         :items="items"
         :items-per-page.sync="ipp"
         :page.sync="page"
         hide-default-footer
    >...

Rows-per-page is dynamic too!

The visual rows are also maximized to fill the viewport height. For example, 3 rows on short screens, 5 rows on tall screens.

Short screens..

Or, tall screens..

The end result is a responsive grid with dynamic paging that maximizes viewport height and width. No scrolling baby! 😎

Demo and Full Source

How to Make a Icon + Text Navbar in Bootstrap

Carol Skelly — Thu, 09 Apr 2020 13:33:19 +0000

Just when I thought I had the answer for every possible Navbar scenario in Bootstrap 4, up pops another StackOverflow question, on "How can I make a Navbar that... ?"

In this case I want to make a Navbar that has icons & text. The text will be centered below each icon, and on mobile only the icons will display.

Mobile view

Large view

For the icons I used Font Awesome, but of course there are many other alternatives including the new icons from Bootstrap😏. The Navbar structure is standard, with the exception of using the nav-justified and w-100 classes to on the navbar-nav to make items space evenly on the page:

<nav class="navbar navbar-dark navbar-expand justify-content-center">
    <div class="container">
        <ul class="navbar-nav nav-justified w-100 text-center">
            ... (repeat nav items here)
        </ul>
    </div>
</nav>

For each nav-item, I used flexbox (d-flex flex-column) to make the icon & text stack vertically. Using Bootstrap's responsive display classes, the text is hidden on mobile (d-none d-sm-inline).

Take a closer look at each nav-item🧐...

<li class="nav-item">
     <a href="#" class="nav-link d-flex flex-column">
         <i class="fab fa-bootstrap"></i>
         <span class="d-none d-sm-inline">home</span>
     </a>
</li>

And that's all there is to it ¯_(ツ)_/¯

Demo😎
Full source🤓