Category: HTML & CSS

Integrating Bootstrap with Vue.js using Bootstrap-Vue

In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue. React and Vue.js are two leading, modern JavaScript frameworks for front-end development. While React has a steep learning curve, a complex build process (if you’re coming from a jQuery world), all you need to do to start usi...

Integrating Bootstrap with React: a Guide for Developers

Integrating Bootstrap with React allows React developers to use Bootstrap’s state-of-the-art grid system and its various other components. In this tutorial, we’re going to: explore tools and techniques for building a user interface with Bootstrap’s look and feel for a React-powered web application use reacts...

Customizing Bootstrap jQuery Plugins

Bootstrap comes packed with tons of ready-to-use jQuery-powered plugins. The beauty of Bootstrap’s plugins is that you can slot them into your project, write the appropriate markup using data- attributes, and the JavaScript kicks in automatically. No need to write any JavaScript code. There may be times when you’d ...

Game AI: The Bots Strike Back!

The following is a short extract taken from our new book, HTML5 Games: Novice to Ninja, written by Earle Castledine. Access to the book is included with SitePoint Premium membership, or you can grab a copy in stores worldwide. You can check out a free sample of the first chapter here. We have all the tools at our dispo...

Getting Bootstrap Tabs to Play Nice with Masonry

On the Masonry website, we read that Masonry is … a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in...

8 Tips for Improving Bootstrap Accessibility

A few years ago, I wrote about my experiences on developing a Bootstrap version 3 project to be fully accessible for people with disabilities. This focussed mostly on how accessible it is in terms of front-end design. (It didn’t cover accessibility in terms of screen readers, as that’s a whole other story.) While I...

Fancy Web Animations Made Easy with GreenSock Plugins

The aim of the third part of this GreenSock tutorial series is to introduce you to some amazing GreenSock plugins. You’ll be using: The BezierPlugin to animate properties along a curved Bezier path The GSAP Draggable utility to drag elements on the screen and the ThrowPropsPlugin to glide them to a smooth stop ...

How to use Media Queries in JavaScript

If you thought responsive design was reserved for CSS layouts only, you’ll be pleased to hear media queries can also be used in JavaScript. Continue reading %How to use Media Queries in JavaScript% ...

GreenSock for Beginners (Part 2): GSAP’s Timeline

The aim of this second part of GreenSock for Beginners is to introduce you to GreenSock’s TimelineMax. You’ll be learning: Why you need a timeline How to include multiple tweens in a timeline How to package multiple timelines into functions and nest them inside a master timeline for greater flexibility. ...

Building a 3D Rotating Carousel with CSS and JavaScript

A lot has been said on the use of traditional 2D carousels, for example this piece on Smashing Magazine covers this subject. There’s no simple yes or no answer to the ‘should I use a carousel?’ question; it depends on the particular situation. When I started researching this topic, I didn’t need a 3D carousel, ...