The principle is straightforward: when Hide is clicked, we add a hidden class to the banner. We can then set this class to opacity:0 in our CSS.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
/* Font styles, colors, etc. omitted for clarity */
#notification {
transition: .8s
}
#notification.hidden {
opacity: 0
}
</style>
<div id=notification>
<p>You have 3 unread messages.</p>
<button class=hide>Hide</button>
</div>
<code>
clicking on ".hide" adds class "hidden" on "#notification"
</code>Instead of adding a class, we’ll now use uilang’s toggle class to switch between the active and inactive state when the control is clicked.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
#switch, #circle {
transition: .4s
}
#switch {
background: #FAFAFB /* gray */
}
#switch.active {
background: #52D468 /* green */
}
#circle {
width: 50%
}
#switch.active #circle {
transform: translateX(100%)
}
</style>
<div id=switch>
<div id=circle></div>
</div>
<code>
clicking on "#switch" toggles class "active" on "#switch"
</code>Same principle as the previous example: when More is clicked, we fade the popover in and out by simply toggling a CSS class on it.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
#popover {
opacity: 0;
pointer-events: none;
transform: scale(.8) translateY(-30%);
transition: .4s cubic-bezier(.3, 0, 0, 1.3)
}
#popover.visible {
opacity: 1;
pointer-events: auto;
transform: none
}
</style>
<ul id=nav>
<li><a href=#>Home</a>
<li><a href=#>Services</a>
<li><a href=#>Portfolio</a>
<li>
<a href=# class=more>More</a>
<ul id=popover>
<li><a href=#>About</a>
<li><a href=#>Blog</a>
<li><a href=#>Contact</a>
</ul>
</ul>
<code>
clicking on ".more" toggles class "visible" on "#popover"
</code>This example introduces the target keyword which matches the clicked element. We’ll then use the CSS adjacent selector to select the content.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
h1 {
background: #FAFAFB
}
h1.active {
background: white
}
p {
display: none
}
h1.active + p {
display: block
}
</style>
<h1 class=active>About me</h1>
<p>Hi! My name’s Ben, I’m a 30-year old interface designer.
<h1>Work</h1>
<p>You can see some of my recent work on Dribbble.
<h1>Contact</h1>
<p>Feel free to send me an email or ping me on Twitter!
<code>
<!-- start by removing the previous "open" class -->
clicking on "h1" removes class "active" on "h1.active"
<!-- then add it to the clicked title -->
clicking on "h1" adds class "active" on "target"
</code>Exactly the same logic as with the tabs: set an open class to the clicked element, use this class in CSS to style that element and its siblings.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
h1, h1::before, p {
transition: .4s
}
h1 {
cursor: pointer
}
h1::before {
background: url(blue-arrow.svg);
transform: rotate(-90deg)
}
h1.open::before {
transform: none
}
h1.open ~ h1 {
/* slide down all the h1 following the open one */
transform: translateY(24px)
}
p {
opacity: 0;
pointer-events: none
}
h1.open + p {
opacity: 1;
pointer-events: auto;
transform: translateY(8px)
}
</style>
<h1 class=open>About me</h1>
<p>Hi! My name’s Ben, I’m a 30-year old interface designer.
<h1>Work</h1>
<p>You can see some of my recent work on Dribbble.
<h1>Contact</h1>
<p>Feel free to send me an email or ping me on Twitter!
<code>
clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"
</code>Add a visible class to the overlay when RSVP is clicked, remove that class when close or confirm is clicked. The rest is good ol’ CSS.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
#overlay, #registration {
opacity: 0;
transition: .5s
}
#overlay {
pointer-events: none
}
#overlay.open {
opacity: 1;
pointer-events: auto
}
#registration {
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s
}
#overlay.open #registration {
opacity: 1;
transform: none
}
</style>
<p>Design Meetup. <button class=rsvp>RSVP</button>
<div id=overlay>
<div id=registration>
<a href=# class=close>Close</a>
<h1>Design Meetup</h1>
<input placeholder=Name>
<input placeholder=Email type=email>
<a href=# class=confirm>Confirm</a>
</div>
</div>
<code>
clicking on ".rsvp" adds class "open" on "#overlay"
clicking on ".close, .confirm" removes class "open" on "#overlay"
</code>code element containing your uilang code at the very end of the page, just before the closing body tag. Don’t worry about having other code elements on the page, the script will only execute the uilang one.