amelieykw amelieykw

Learn how to filter a DIV element based on it's class name.

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox did not support it for ages, you did not use it. Since Firefox 7 you can!

Note that this only works for single-line texts.

If you want to truncate tests across multiple lines, use a JavaScript solution like Superclamp. There is also -webkit-line-clamp which works only on Chrome.

Example

Consider this HTML and Sass for a box that is not wide enough for its content:

Original Website

Here is what we're going to build:

#1 Basic sidebar: Static collapsible Bootstrap sidebar menu
#2 Basic sidebar: Fixed & collapsible Bootstrap sidebar navigation
#3 Advanced sidebar: Fixed scrollable & collapsible Bootstrap sidebar with page transparent overlay
#4 Advanced sidebar: Partially collapsing static sidebar (i.e. the sidebar will not collapse fully but to a compressed state)
Bonus se

Original Website

"Wrapper" vs "Container"
width vs max-width
Additional Padding
Which HTML Element to Choose
Using the <body> tag vs. Using an additional <div>

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page.

Box Model Histroy
Present-Day box-sizing
Demo
Good, Better, and (Probably) Best box-sizing Reset Methods
- The "Old" border-box Reset
- Universal Box Sizing
- Universal Box Sizing with Inheritance
Vendor Prefixes

Faster and Better

Fully Responsive CSS

What is W3.CSS?

W3.CSS is a modern CSS framework with built-in responsiveness:

Smaller and faster than any other CSS frameworks. Easier to learn, and easier to use than any other CSS frameworks. Better cross-browser compatibility than any other CSS frameworks.

	div[data-percentage] {
	font-family: sans-serif;
	background: teal;
	padding: 10px;
	font-weight: bold;
	color: #023636;
	text-shadow: 0 1px 0 #58BBBB;
	font-size: 20px;
	width: 100px;
	margin: 4px auto;

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;

	.tabs {
	text-align:right;
	}
	.tab {
	padding:.5em 3em;
	display:inline-block;
	}
	.tab2,
	.content{
	background:#ccc;