CSS Styles

From TheBeard Science Project Wiki
Jump to: navigation, search

Apply CSS Based on Attribute

This just seems like less typing to me. Why type out class="something"? Especially in a wiki where you have to type it all the time.

CSS:

div[red] {
	color: red;
}
div[blue] {
	color: blue;
}

HTML:

<div red>
This should be red.
</div>
<div blue>
This should be blue.
</div>

RESULT:

This should be red.
This should be blue.

Absolute Center (via Flexbox)

.absolute-center {

	/* Internet Explorer 10 */
	display:-ms-flexbox;
	-ms-flex-pack:center;
	-ms-flex-align:center;

	/* Firefox */
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;

	/* Safari, Opera, and Chrome */
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;

	/* W3C */
	display:box;
	box-pack:center;
	box-align:center;

}

Wrap Text in <​pre> Tag

/* wrap text in pre tag, good for mobile because pre won't extend beyond screen width */
pre.wrap {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Collapsible Section

<!DOCTYPE html>
<html>
<head>
<title>TEST 2</title>
<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body {
	font-family: "Open Sans";
}
.collapse-link {
	display: table;
	color: #888;
	text-decoration: none;
	margin-bottom: 10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.collapse-link:hover {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.collapse-link:after {
	content: '\00276f';
	display: inline-block;
}

.collapse-link-expanded {
	display: table;
	color: #888;
	text-decoration: none;
	margin-bottom: 10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.collapse-link-expanded:hover {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.collapse-link-expanded:after {
	content: '\00276f';
	display: inline-block;
	transform: rotate(90deg);
}
.collapsible {
	display: none;
}
.collapsible-expanded {
	display: block;
	padding: 0px 20px 30px 20px;
}
</style>
<script>
function ToggleCollapsible(link, boxId) {
	box = document.getElementById(boxId);
	if (link.className == "collapse-link") {
		link.className = "collapse-link-expanded";
	}
	else {
		link.className = "collapse-link";
	}
	if (box.className == "collapsible") {
		box.className = "collapsible-expanded";
	}
	else {
		box.className = "collapsible";
	}
}
</script>
</head>
<body>
	<a class="collapse-link" onclick="ToggleCollapsible(this, 'options')">More Options&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
	<div id="options" class="collapsible">
		<ul>
			<li><a href="#">Some Option</a></li>
			<li><a href="#">Some Other Option</a></li>
		</ul>
	</div>
</body>
</html>