Extra-wide 2XL breakpoint – 2xl: is targeting 1536px and above
Default line-heights per font-size – now every font-size has its own line-height specified by default
Extended spacing, typography, and opacity scales – now you can be more specific when defining margin, padding, font-size, or opacity
@apply – @apply now works with anything, hover: did not work in the previous version
Group-hover and focus-within are now enabled by default. This is useful if you want to highlight a whole container if a button inside of it is in focus, or change the text color of all children if you hover over a parent div container.
Default CSS transition – predefine your CSS transition duration and easing and then only apply one class
Dropped IE11 support
New Features
Dark mode support – it is now easy to enable dark mode and use dark: variant
Include @barba/core, @barba/css plugin in your JavaScript module, and tell Barba to use the CSS plugin.
// install via npm or yarn
npm install @barba/core @barba/css
yarn add @barba/core @barba/css
// Include Barba and Barba CSS in your project
import barba from '@barba/core';
import barbaCss from '@barba/css';
// Tell Barba to use the CSS plugin
barba.use(barbaCss);
// Initiate Barba
barba.init();
<body data-barba="wrapper">
<!-- content that stays the same on all pages - eg. header -->
<div data-barba="container">
<!-- content that will change from page to page -->
</div>
<!-- content that stays the same on all pages - eg. footer -->
</div>
Barba.js will now add and remove specific CSS classes from the data-barba="container".
These CSS classes will be based on the transitions that we need to specify.
If you are completely new to Barba.js, you can check this tutorial to learn more about the required HTML markup.
How to create fade-in transition on page load
To create a simple fade in transition on page load we can use the once hook.
barba.init({
transitions: [
{
once() {}
}
]
});
Barba.js will add and remove the following CSS classes .barba-once, .barba-once-active and .barba-once-to during the transition.
.barba-once and .barba-once-active will be applied at the start of the transition.
.barba-once-active and .barba-once-to will be applied during the transition.
This hook is called once, because this transition only runs once on the page load.
When the CSS transition is completed, all CSS classes will be removed from the container.
How long these classes stay on the container depends on the duration of the CSS transition or animation.
Because the CSS plugin overrides the main once hook, any code inside of once will be ignored. The same applies to the enter and leave hooks.
barba.init({
transitions: [
{
once() {
console.log('this will be ignored');
},
beforeOnce() {
console.log('shows up BEFORE once transition');
},
afterOnce() {
console.log('shows up AFTER once transition');
}
}
]
});
If you need to run any code related to the once transition use beforeOnce or afterOnce hooks.
How to customize the name of the CSS class?
You can customize the CSS classes by specifying a name for your transition.
transitions: [
{
name: "home",
once() {}
}
]
If you specify home as the name, Barba will generate these classes:
.home-once
.home-once-active
.home-once-to
The format of the class is always the same: .[name]-[hook]-[state].
How to create CSS transition between two pages
Every page transition has two phases.
Firstly the current page leaves, then the next page enters.
To use CSS transitions between two pages, we need to specify the hooks inside of the Barba transition, even if there is no code inside of them.
Perfect, this was a simple fade transition, but what if wanted to make a transition where both containers are visible on the page? How would we do that with Barba.js?
Let’s see in the next example.
How to create clip-path transition
Now that you know the basics of Barba.js and the CSS plugin, only your imagination is your limit!
In the next example, we will try to reveal the next page from the center of the screen.
We will clip the incoming page clip-path: circle(0%); at the start and reveal it by specifying clip-path: circle(75%); as the end of the transition.
For this effect, we need to have both containers on the page and Barba has a sync mode build-in exactly for that.
This is a simple full-screen element covering the whole viewport, by default it is positioned outside of the viewport using transform: translateY(-100%);.
In the first phase, we are transitioning the .transition element to translateY(0) using the .with-cover-leave-to .transition selector. This is also the starting position for the enter animation.
Then we are moving the .transition out of the viewport to transform: translateY(100%); using the .with-cover-enter-to .transition selector.
As you can see, the stylesheet could grow quite quickly.
At the start of the transition, we are using .slide-enter CSS class to position the incoming next page outside of the viewport.
Then we are animating both containers by 100%. The current page goes away from the viewport to translateX(100%) and the next page moves to translateX(0).
The page entering the viewport is positioned absolute during the transition as we have defined in the .slide-enter-to CSS class.
And that is it, now you have learned how to create 4 different page transitions using Barba.js and the CSS Plugin.
The merge conflicts happen when someone else edits the same lines of code in his branch as you edit in your branch.
In our example we have colors.txt file in the master branch and both of the other branches have a commit that has changed this file.
// colors.txt
// in master, you have both created a branch from here
red
yellow
blue
// commit in your branch
red
green
blue
// commit in his branch
red
white
blue
Do you see how the same file has a different content in both branches and the same line modified?
This would cause a merge conflict.
1. Clean table
Firstly commit or stash all of your current changes, your branch needs to be “clean” before merging.
Also if you haven’t already, switch to his-branch and pull his latest changes.
// in your branch
// commit or stash changes and switch to his branch
git commit -a -m "some message"
git stash
git checkout his-branch
// in his branch
// pull his changes and switch back to yours branch
git pull
git checkout -
If you run git status you should see nothing to commit, working tree clean.
This will try to merge all his changes into your branch.
Because you have both modified colors.txt on the same line, you have to resolve this a merge conflict manually.
The green block shows your changes and calls them Current change.
The blue block shows his changes in his branch and calls them Incoming changes.
Aborting merge conflicts
If you don’t feel comfortable resolving the conflict you can always abort the merge process.
// in your branch
git merge --abort
This will return you to the state of your repo before you have started the merge process.
3. Resolving Git merge conflict
To resolve the conflict we have 3 options:
Accept current change
Accept incoming change
Accept both changes
// resolved colors.txt
// Accept current change
red
green
blue
// Accept incoming change
red
white
blue
// Accept both changes
red
green
white
blue
This seems to be straight forward on our simple example, but I know it can be overwhelming to look at especially if your merge conflict involves big blocks of code.
One thing that helped me with merge conflicts is to use DIFF3. More on that later.
4. Commit resolved conflict
Based on your scenario pick one of the options above for every conflict and save the file.
If you have more conflicted files you will need to open them and resolve them too.
Once you have resolved all conflicts in all files you will need to stage them and commit.
// stage all files
git add .
// commit
git commit -m "merged his-branch"
// shorter version of the above
git commit -a -m "merged his-branch"
If everything went well you should see a new commit made on your branch, your working tree clean and the merge process completed.
An easier way to look at merge conflicts
To make it easier to resolve merge conflicts I prefer to use the DIFF3 view.
When you enable diff3 you will see a 3 way view.
the original version – merged common ancestor
current change
incoming change
Yellow was the original color, I have changed it to green and he has changed it to white.
To enable Diff3 you need to add it to your Git config.
Resolving Git conflicts can be very frustrating and stressful situation, but hopefully this Git tutorial gave you a lot more confidence to resolve conflicts in Git.
Do you have any tips or tricks when it comes to resolving Git conflicts? Let me know in the comments.
Have you ever wanted to learn how to build a parallax scrolling website, but couldn’t find a suitable online course? Do you think that to make a responsive parallax website is impossible?
Starting to build your first parallax scrolling website? Not really sure what you are getting into? Don’t make the same mistakes that I have made and learn from these 24 tips. Or at least read the #11.
