You can easily turn any browser tab into a minimal text editor by using a simple piece of code. Simply copy & paste the code shown below into the url bar of any modern browser and press enter.
data:text/html,
Now you have an awesome, super minimal and lightweight text editor within a tab in your browser. You can customize the style to your liking or just remove it completely.
Every web browser uses what is known as a base stylesheet. This ensures that any HTML is rendered somewhat reasonably when you forget to include a piece of custom CSS. You know things like, blue for links that you've yet to visit, purple for links that you've already visited, bold for the likes of strong tags & different text sizes for heading. All those things and more are not always the same browser to browser. NO.. Not all browsers use the same base stylesheet, so that custom CSS you've just spent hours, maybe even days creating might be affected in some way by a default style that's implemented within your browsers base stylesheet. The easiest and most simplistic way to keep your CSS intact is to include a CSS reset. Sometimes though, people are happy with what their browser’s base stylesheet provides. Things such as font weights, line height, bullet points and other styles are often fine. If they’re not, then they can easily be adjusted.
A CSS reset essentially provides a blank canvas so that any styles applied are sort of almost certain to be your own. Most CSS resets require you to re-style all your elements, which could make your CSS file much larger than you'd like. But at the same time it will also reduce browser compatibility issues.
Should you use a CSS reset ?? Well that really depends. Like if you have a pretty small or basic website then creating and using a CSS reset might not be worth the time and effort. Though if you have a pretty large site or a site that just has tons of elements, then using a CSS reset might just the right thing. CSS resets may be appealing and work for you, but they'll not be for everyone. You'll need to weigh everything out and look at everything for yourself.
When coding a hamburger menu most developers or coders position the menu absolute, when in actual fact it should be the content that is positioned once the sidebar is opened. Instead of positioning the menu itself, simply position everything else that's in the menu. Below is some example code, followed up with explanatory comments....
<html>
<head></head>
<body>
<div class="sidebar">Hamburger menu links go here</div>
<div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">🍔</button></div>
</body>
</html>
/* Arbitrary CSS variable values for explanatory purposes */
:root {
--sidebar-width: 100px;
--sidebar-bg-colour: blue;
}
.sidebar {
display: none;
position: relative;
width: var(--sidebar-width);
}
@media (max-width: 767px) {
html.sidebar-is-open .sidebar {
display: block;
/*
The sidebar is just rendered in default position,
as it appears in the document flow
*/
}
html.sidebar-is-open .main-content {
position: fixed;
/*
It is the main content that is positioned.
This is the crux of the implementation. The rest is all sugar.
Cons: the body will scroll to the top, losing your user's scroll position
*/
/* prevents resizing from its original full-screen width */
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 100%;
overflow: hidden;
}
/* Optional enhancement:
make the overscroll on iPhone the same colour as the sidebar */
html.sidebar-is-open body {
background-color: var(--sidebar-bg-colour);
}
.sidebar {
background-color: var(--sidebar-bg-colour);
}
}
const documentElement = document.querySelector("html");
const contentElement = document.querySelector(".main-content");
const sidebarElement = document.querySelector(".sidebar");
const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");
const openSidebar = () => {
/* How you trigger the change is up to you */
documentElement.classList.add("sidebar-is-open");
};
const closeSidebar = () => {
documentElement.classList.remove("sidebar-is-open");
/* Sidebar is closed, so keeping event listener is just a waste of resources
and source of bugs if openSidebar() is run again */
contentElement.removeEventListener("click");
};
const toggleSidebar = () => {
sidebarIsOpen() ? closeSidebar() : openSidebar();
};