Skip to content

Instantly share code, notes, and snippets.

@vitalyster

vitalyster/style.css

Last active November 6, 2022 17:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vitalyster/e3018cd0cfd6bbb4f4e661eed0e4aa9f to your computer and use it in GitHub Desktop.
Save vitalyster/e3018cd0cfd6bbb4f4e661eed0e4aa9f to your computer and use it in GitHub Desktop.
Download ZIP
Universal layout for desktop and mobile (HTML+CSS)
Raw
style.css
html,
body {
overscroll-behavior: none;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
html,
input,
textarea,
button {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
text-size-adjust: 100%;
word-wrap: break-word;
line-height: 1.4;
-webkit-overflow-scrolling: touch;
background: #fdfdfd;
color: #444;
}
input,
textarea,
button {
font-size: 1em;
}
p {
padding: 6px;
}
#header {
grid-area: header;
position: sticky;
top: 0;
background-color: #fff;
border-bottom: 1px solid #eee;
}
#container {
min-height: 100%;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"content"
"footer";
}
.section {
padding: 6px;
margin: 12px;
border: 1px solid #eee;
background: #fff;
}
#toolbar {
grid-area: footer;
text-align: center;
position: sticky;
bottom: 0;
background: #f8f8f8;
border-top: 1px solid #eee;
}
#content {
grid-area: content;
}
.desktop {
display: none;
}
#msgs {
width: 100%;
}
@media (min-width: 62.5rem) {
#container {
grid-template-rows: auto 1fr;
grid-template-columns: 300px auto;
grid-template-areas:
"sidebar header header"
"sidebar content content"
"sidebar content content";
}
#toolbar {
grid-area: sidebar;
border-top: 0;
}
#menu {
display: inline-block;
position: sticky;
top: 0;
}
.desktop {
display: block;
}
#info {
color: #888;
}
#msgs {
width: 640px;
}
}
Raw
universal_layout.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<p>header</p>
</div>
<div id="content">
<div id="msgs">
<p class="section">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec
volutpat.
Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor
nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus.
Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec
placerat
bibendum volutpat.
</p>
<p class="section">
Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis
dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at
arcu
vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus
faucibus
condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at
pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
</p>
<p class="section">
In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar.
Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum.
Fusce
felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim
facilisis
pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac
libero
maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
dapibus
sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat
velit.
Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id
ligula dignissim pharetra.
</p>
<p class="section">
In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar.
Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum.
Fusce
felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim
facilisis
pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac
libero
maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
dapibus
sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat
velit.
Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id
ligula dignissim pharetra.
</p>
<p class="section">
In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar.
Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum.
Fusce
felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim
facilisis
pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac
libero
maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
dapibus
sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat
velit.
Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id
ligula dignissim pharetra.
</p>
<p class="section">
In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar.
Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum.
Fusce
felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim
facilisis
pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac
libero
maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
dapibus
sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat
velit.
Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id
ligula dignissim pharetra.
</p>
</div>
</div>
<div id="toolbar">
<div id="menu">
<p>
Search
</p>
<div id="info" class="desktop">
<p>(c) 2022, me</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment