Category: CSS

How to use Chrome DevTools like a Pro

As the name implies Chrome Developer Tools is a tool that allows web developers to interfere and manipulate applications via the browser. With this tool you can: Manage interface problems Debug Javascript Code with using breakpoints Optimize your code To open DevTools, you can right-click anywhere on the page and...

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 ...

Why would you do that in CSS?

And by that, it’s usually some kind of CSS experiment, often an elaborate drawing or interaction. For example, have you seen Lynn Fisher’s extraordinary A Single Div project? Not only are all these graphics drawn in just HTML and CSS, they are all created with (you guessed it) a single <div></div&...

Scooped Corners in 2018

When I saw Chris’ article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like the one below in a cross-browser manner: What the challenge looked like. It looks pretty similar to the concept of notched boxes, except the corners are now scooped and we only have to worry about on...

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...

Naming Things In CSS Grid Layout

    When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid, and also be aware of the fact the lin...

CSS Grid Challenge: Winners and Templates

    CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox — but that...

CSS Grid Gotchas And Stumbling Blocks

    In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems. C...