Animated Stripes on Bootstrap Buttons

Bootstrap has many classes that allow us, developers, to make and customize the components into awesome forms, but in my opinion, one of the most nice things that I can easily add in my forms is the animated stripes on background buttons, giving that nice effect of “loading” thing:

animated stripes background

This effect is not native on the bootstrap 4, but it can be add with the following code:

.btn-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.btn-striped.animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  -moz-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

With these two css classes you don’t need to worry about other properties like hover, disabled and focused because the stripes works on background and over the alpha channel of the native colors of bootstrap 4.

To use the classes, just declare it to your css file (or section) and add it to your button or link as this:

<a href="#" class="btn btn-warning btn-striped">Not Animated</a>
<a href="#" class="btn btn-success btn-striped animated">Animated</a>
Advertisements

PhoneGap Starter Kit

When I started to use the PhoneGap service to build mobile apps I had some dificulties on about where to begin or what should I use to get a very good looking app, even a simple “hello world” app was a bit difficult to do, so, here I will present a pack that I did with the basic stuff to start building a mobile app on PhoneGap.

cordova-phonegap-build

As covered in another post of mine, the PhoneGap is a handy tool that allow web developers to develop native mobile apps just using HTML, CSS and Javascript, for more details about the PhoneGap tool, take a look on that introduction.

The PhoneGap Starter Kit, as I like to call, is a pack with the very basic stuff to start a simple app throuh PhoneGap. This pack includes:

  1. Basic standard folder structure
  2. Index file ready to start
    • includes correct declaration of headers, script files, style files, meta tags
  3. File configuration to compile the app
    • icons, title, description, author
  4. Sample declaration of a plugin
    • needed to access native device resources (battery plugin in this case)
  5. Third party pop-up lib, bootbox
    • with bootbox is possible to add theme to the pop-ups instead of only using the native OS pop-up
    • Switch button style (to be more like device native)
  6. Bootstrap
    • Brings ease to start enviroment
    • Is resposive
    • Theme support
    • Accept many JS plugins
  7. Elements mods
    • Samples checkbox and selectbox modifications to looks like native device
  8. Dropdown Menu
    • Also responsive
  9. Custom Theme
    • Provided by Bootswatch just to show how to setup the theme

 

 

With this very basic kit is possible to compile a simple app on PhoneGap and start it nativelly on and Android, iOS or Windows Phone device.

Also, bellow are some additional links that can help on development:

  • Bootsnip: Many sample codes (forms, layouts, components)
  • Bootswatch: Theme gallery for bootstrap
  • Plugins: Plugins to interact with device resources
  • Cordova: Main lib of the PhoneGap