2 CSS objects that will simplify your HTML structure
How do I make an 2 css objects that will simplify your html structure?
What is a 2 css objects that will simplify your html structure? How do you make a 2 css objects that will simplify your html structure? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.
2 CSS objects that will simplify your HTML structure - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>2 CSS objects that will simplify your HTML structure</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .clearfix:after,
.split:after,
.join.\--force:after { content: ""; display: table; clear: both;
}
.split > * { float: left;
}
.split > * + * { float: right;
}
.split.\--table { display: table; width: 100%; table-layout: fixed; text-align: center;
}
.split.\--table:after { content: none;
}
.split.\--table > * { float: none; display: table-cell; vertical-align: middle;
}
.split.\--table > :first-child { text-align: left;
}
.split.\--table > :last-child { text-align: right;
}
@media screen and (max-width: 480px) { .split.\--responsive { display: block; text-align: center; } .split.\--responsive > * { float: none; display: inline-block; } .split.\--responsive > * + * { display: block; margin-top: 15px; } .split.\--responsive > :first-child, .split.\--responsive > :last-child { text-align: inherit; }
}
.join { list-style-type: none;
}
.join > * { display: inline-block; vertical-align: top;
}
.join > * + * { margin-left: 30px;
}
.join.\--middle > * { vertical-align: middle;
}
.join.\--bottom > * { vertical-align: bottom;
}
.join.\--tiny > * + * { margin-left: 7.5px;
}
.join.\--small > * + * { margin-left: 15px;
}
.join.\--large > * + * { margin-left: 60px;
}
.join.\--force > * { float: left;
}
@media screen and (max-width: 480px) { .join.\--responsive { text-align: center; } .join.\--responsive > * { float: none; display: inline-block; } .join.\--responsive > * + * { display: block; margin-left: 0; margin-top: 15px; }
}
body { color: #666; max-width: 720px; margin: 30px auto; border: 1px solid #e5e5e5; padding: 1em;
}
h2 { margin-top: 0; margin-bottom: 30px; color: #222; border-left: 5px solid #87D37C; padding-left: 15px;
}
h2 ~ h2 { margin-top: 30px;
}
h3 { color: #444; margin: 0 0 15px 0; border-left: 5px solid #ccc; padding-left: 15px;
}
h3 ~ h3 { margin-top: 30px;
}
p, ul { color: #999; line-height: 18px; font-size: 12px; margin-bottom: 30px; font-weight: 300;
}
ul { list-style-position: inside; padding-left: 20px;
}
p + ul { margin-top: -20px;
}
.logo { text-decoration: none; color: #5C97BF; font-size: 24px; font-weight: bold;
}
.nav { margin: 0; list-style-type: none;
}
.nav a { text-decoration: none; color: #666;
}
.nav a:hover { text-decoration: underline;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2>Split</h2>
<h3>Simple split</h3>
<ul> <li>Limited to 2 elements</li>
</ul>
<div class="split --responsive"> <div>a</div> <div>b</div>
</div>
<h3>Split using table layout</h3>
<ul> <li>Unlimited elements</li> <li>You have controll over vertical alignment</li>
</ul>
<div class="split --table --responsive"> <div>a</div> <div>b</div> <div>c</div> <div>d<br>e<br>f<br></div>
</div>
<h2>Join</h2>
<div class="join --responsive"> <span>Home</span> <span>About</span> <span>Contact</span>
</div>
<h2>Sample usage</h2>
<div class="split --table --responsive"> <div> <a class="logo" href="#">Site name</a> </div> <ul class="nav join --small"> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
2 CSS objects that will simplify your HTML structure - Script Codes CSS Codes
.clearfix:after,
.split:after,
.join.\--force:after { content: ""; display: table; clear: both;
}
.split > * { float: left;
}
.split > * + * { float: right;
}
.split.\--table { display: table; width: 100%; table-layout: fixed; text-align: center;
}
.split.\--table:after { content: none;
}
.split.\--table > * { float: none; display: table-cell; vertical-align: middle;
}
.split.\--table > :first-child { text-align: left;
}
.split.\--table > :last-child { text-align: right;
}
@media screen and (max-width: 480px) { .split.\--responsive { display: block; text-align: center; } .split.\--responsive > * { float: none; display: inline-block; } .split.\--responsive > * + * { display: block; margin-top: 15px; } .split.\--responsive > :first-child, .split.\--responsive > :last-child { text-align: inherit; }
}
.join { list-style-type: none;
}
.join > * { display: inline-block; vertical-align: top;
}
.join > * + * { margin-left: 30px;
}
.join.\--middle > * { vertical-align: middle;
}
.join.\--bottom > * { vertical-align: bottom;
}
.join.\--tiny > * + * { margin-left: 7.5px;
}
.join.\--small > * + * { margin-left: 15px;
}
.join.\--large > * + * { margin-left: 60px;
}
.join.\--force > * { float: left;
}
@media screen and (max-width: 480px) { .join.\--responsive { text-align: center; } .join.\--responsive > * { float: none; display: inline-block; } .join.\--responsive > * + * { display: block; margin-left: 0; margin-top: 15px; }
}
body { color: #666; max-width: 720px; margin: 30px auto; border: 1px solid #e5e5e5; padding: 1em;
}
h2 { margin-top: 0; margin-bottom: 30px; color: #222; border-left: 5px solid #87D37C; padding-left: 15px;
}
h2 ~ h2 { margin-top: 30px;
}
h3 { color: #444; margin: 0 0 15px 0; border-left: 5px solid #ccc; padding-left: 15px;
}
h3 ~ h3 { margin-top: 30px;
}
p, ul { color: #999; line-height: 18px; font-size: 12px; margin-bottom: 30px; font-weight: 300;
}
ul { list-style-position: inside; padding-left: 20px;
}
p + ul { margin-top: -20px;
}
.logo { text-decoration: none; color: #5C97BF; font-size: 24px; font-weight: bold;
}
.nav { margin: 0; list-style-type: none;
}
.nav a { text-decoration: none; color: #666;
}
.nav a:hover { text-decoration: underline;
}
Developer | Kasper Mikiewicz |
Username | Idered |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 4,136 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Vue.js based Todo list | 5,092 Kb |
DragToIncDec | 2,489 Kb |
Color accordion | 1,925 Kb |
Hello bar | 3,237 Kb |
Confirmation button | 3,519 Kb |
Comments thread | 3,601 Kb |
Love button | 3,597 Kb |
Flat switch | 2,555 Kb |
Pure CSS3 Tags | 4,052 Kb |
Pagination | 3,868 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Fireworks Show | Arianalynn | 3,048 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
The Rope | Chribbe | 2,886 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Weather App | Kw7oe | 3,162 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!