word-break: break-all;
word-wrap: break-word;
Category: CSS
CSS organization:
Base/
– reset.css (or normalize.css)
– layout.css (any grid system you are throwing in goes here)
– typography.css (your fonts stuff)
– utilities.css (OOCSS stuff, things that may be easier to just define a class for instead of rules below, like .left { float: left}, or .mtl { margin-top: 20px } See this and pic and choose the ones not cover in other sections that you may need.
– zindexmap.css (this file does not contain any css, just a commented out section where you specify all the elements using zindex, and the values), it is quite useful to avoid the z-index wars
Components/
– buttons.css
-forms.css
– list.css (and so on, you get the idea)
Modules/
– footer.css
– header.css
– navbar.css (you get the idea, not atomic components like buttons, but more general sections.
Overrides/
– aboutus.css (page specific stuff, one offs, overrides to generic rules, themes)
Make sure your production scripts are making all of these files into one.
Other tips:
1) Inside each file, at the top, put a CSS map, so you know if a section you are adding / modifying is already there. Something like:
/* Contents
– Header
– some section
– some other section
– footer stuff
*/
And then, make sure the sections correspond with the headers above. That will help you keep bloat out
2) Avoid long selectors! Favor specificity by classes. For example, instead of:
#my_container section div p a.my_link
try
#my_container .my link (or just plain .my_link)
It is easier to fall in this trap specially if you are using css precompilers like sass. The reason you should be mindful of this:
– Better performance of your CSS
– You avoid specificity wars. Protect via container ids, not long strings of HTML elements
3) Always aim to reuse. Try to drive your work off a designer’s stylesheet, so you don’t have to “recreate” styles per pages / sections. If one is not provided, ask for one. If not possible, avoid the temptation to create “one offs” everywhere to accomplish stuff, constantly go back to your base classes and look for what you need, or what you don’t anymore.
4) At coding time: make the HTML do as much of the Layout / styling as possible. For example, as basic as it sounds, put content in
instead of a more generic
if the text is really to be used as a paragraph.
You can! Thanks to fontawesome:
http://fortawesome.github.com/Font-Awesome/
Basically, they are real fonts that you can style at different colors
Installing in Mac:
gem install sass
comments: use /* */ for anything that will appear on the compiled file, and // for things that only show on the sass development files
When compiling, you can specify if you want your file compacted:
sass yourfile.scss ../css/yourfile.css –style compressed
Other styles: nested, compact, expanded
One of the most powerful features, mixings (example):
@mixin blue_text($size) {
color: #336699;
font-family: helvetica, arial, sans-serif; font-size: $size;
font-variant: small-caps; }
.product_title {
@include blue_text (15px); }
Example of rounded corners mixin:
@mixin rounded_borders($color, $width: 5px, $rounding: 5px) { -moz-border-radius: $rounding $rounding; -webkit-border-radius: $rounding $rounding; -khtml-border-radius: $rounding $rounding; -o-border-radius: $rounding $rounding;border-radius: $rounding $rounding;
border: $width $color solid; }
For mixings, it is always a good idea to put them on their own import file for maintainability (example):
@import “cross_browser_opacity.scss”; .h1 {@include opacity(60); }
@mixin opacity($opacity) {
filter: alpha(opacity=#{$opacity}); // IE 5-9+ opacity: $opacity * 0.01; }
Interpolation means you can have rule definitions that are dynamic:
.red_#{$carname} will generate .red_volvo if volvo is $carname
Here is an example of using this:
@mixin car_make($car_make, $car_color) {
// Set the $car_make with “_make” at the end as a class .car.#{$car_make}_make {
color: $car_color;
width: 100px;
.image {
background: url(“images/#{$car_make}/#{$car_color}.png”); }
} }
And, this is the way you iterate in sass:
@each $member in thom, jonny, colin, phil { .#{$member}_picture {
background-image: url(“/image/#{$member}.jpg”); } }
But just wait a minute: you can also use if statements:
@mixin country_color($country) { @if $country == france {
color: blue; }
@else if $country == spain {
color: yellow; }
@else if $country == italy {
color: green; } @else {
color: red; } }
Writting media queries:
.main {
color: #336699; font-size: 15px; @media print { font-size: 10px; } }
This compiles to:
.main {
color: #336699; font-size: 15px; } @media print {
.main {
font-size: 10px; } }
/* _____ UTILITIES _____ */
.oldSchool{width:750px;}
.gs960{width:960px;}
.liquid{width:auto;margin:0;}
.sidebar{width: 300px}
.clear{clear:both;}/* Layouts */
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:” x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x “;}
.line{*zoom:1;}/* Container of the grid, examples of use at https://github.com/stubbornella/oocss/wiki/Grids */
.unit{float:left;} /* Examples: class=”unit size1of2″ produce a cell 50% of the container size */
.unit-right{float: right} /* class=”unit size2of5 lastUnit” produce a cell 2/5 the size of the container, last in the row */
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}/* Grids */
.pn{padding: 0}
.ps{padding: 5px}
.pm{padding: 10px}
.pl{padding: 20px}
.mn{padding: 0}
.ms{padding: 5px}
.mm{padding: 10px}
.ml{padding: 20px}
.pts{padding-top:5px}
.ptm{padding-top:10px}
.ptl{padding-top:20px}
.prs{padding-right:5px}
.prm{padding-right:10px}
.prl{padding-right:20px}
.pbs{padding-bottom:5px}
.pbm{padding-bottom:10px}
.pbl{padding-bottom:20px}
.pls{padding-left:5px}
.plm{padding-left:10px}
.pll{padding-left:20px}
.mts{margin-top:5px}
.mtm{margin-top:10px}
.mtl{margin-top:20px}
.mrs{margin-right:5px}
.mrm{margin-right:10px}
.mrl{margin-right:20px}
.mbs{margin-bottom:5px}
.mbm{margin-bottom:10px}
.mbl{margin-bottom:20px}
.mls{margin-left:5px}
.mlm{margin-left:10px}
.mll{margin-left:20px}/* Spacing */
.bold{font-weight: bold;}
.nonbold{font-weight: normal;}
.font-24{font-size: 24px;}
.font-22{font-size: 22px;}
.font-20{font-size: 20px;}
.font-18{font-size: 18px;}
.font-16{font-size: 16px;}
.font-14{font-size: 14px;}
.font-12{font-size: 12px;}
.font-10{font-size: 10px;}
.white{color: #FFFFFF;}
.black{color:#000000;}
.seo-hide{text-indent: -9999px;}/* fonts */
.hidden {display: none;}
.invisible{visibility:hidden;} /* General tricks */
.rounded-corners-3 {-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;}
.rounded-corners-5 {-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 3px;border-radius: 3px;}
.rounded-top-corners-3{-moz-border-radius-topright: 3px;-webkit-border-top-right-radius: 3px;-khtml-border-top-right-radius: 3px;border-top-right-radius: 3px;-moz-border-radius-topleft: 3px;-webkit-border-top-left-radius: 3px;-khtml-border-top-left-radius: 3px;border-top-left-radius: 3px;}
.rounded-top-corners-5{-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;-khtml-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;-khtml-border-top-left-radius: 5px;border-top-left-radius: 5px;}
.rounded-bottom-corners-3{-moz-border-radius-bottomright: 3px;-webkit-border-bottom-right-radius: 3px;-khtml-border-bottom-right-radius: 3px;border-bottom-right-radius: 3px;-moz-border-radius-bottomleft: 3px;-webkit-border-bottom-left-radius: 3px;-khtml-border-bottom-left-radius: 3px;border-bottom-left-radius: 3px;}
.rounded-bottom-corners-5{-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-khtml-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-khtml-border-bottom-left-radius:
5px;border-bottom-left-radius: 5px;} /* rounded corners */
ul.vertical-tabs{margin: 0;padding-left: 0;list-style: none;}
ul.vertical-tabs li{float: left;} /* vertical tabs */
The best way to produce your background gradients is using generators:
http://www.colorzilla.com/gradient-editor/
background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
The first argument (90 deg) indicates the direction of the gradient. By default is from top to bottom.
The second is the starting color, and the third (0%) is where the starting color start changing and diluting itself.
The second argument after the comma is the end color. The 50% indicates where in the container the color will end up being this #e4e4e4 color. In this case 50% because we have a third argument.
A third argument means we will have three colors in the background.
You can also get radial gradients:
background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
center indicates where the radial effect epicenter will be, you can also specify something like 25px 25px for example, to start 25px from the top, and 25px from the left
You can also specify repeating lines in the background, like:
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
This will produce radial lines every 5 px.
Here's an amazing gallery with some of the amazing background effects that can be accomplished with CSS:
http://lea.verou.me/css3patterns/
-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;
First setting is horizontal offset, second is vertical offset, third is blur, and fourth is color.
And actually, there is an optional argument, spread, between blur and color. It is used to control how long the shadow will spread.
If you want to create an extra border, you can use this one as follows: set blur to 0px, and spread to 1px (or the number of pixels you want your border to be.
If what you want to accomplish is inset shadows (shadows inside the box), use the following:
box-shadow:inset 0 0 40px #000000;
Notice the “inset” keyword, and 0 0 for horizontal and vertical offset.
You can use multiple shadows too:
box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1);
Notice how we are using Hue Saturation Lightness colors, as well as alpha for the last example.
What is it?
1) Fluid images
img
{
max-width: 100%;
height: auto;
}2) Fluid grids
3) Media queries
Steps:
1) Code the site with pixels, as usual, to match the current comp or design provided.
2) Use a #wrapper envelop for the entire content, so you can set that as your anchor.
3) Once your page looks pixel perfect according to the design, change the width of #wrapper to any number between 90% and 100%, whatever looks good. You can also use the max-width at this point to avoid the content growing after a certain point where things gets distorted.
4) Now, start calculating the percentages of the elements inside #wrapper, using the formula: target ÷ context = result.
For example: if #wrapper width was 960px before converted to percentages, and .header element inside #wrapper was 940px:
width: 97.9166667%; /* 940 ÷ 960 it was width: 940px on a 960px container before */
5) You basically work your way in to all the elements. You don’t need to round the numbers! The more precision you give to the browser, the better.
6) For fonts: set thefont-size to 16px (it is the default anyways in most browsers), and then use the same formula to calculate the percentages everywhere else: target ÷ context = result
7) For images, all you need is to envelop them in containers that have percentages specified:
img,object,video,embed {
max-width: 100%;
}
So as the containers scale, so does the image. Notice that this can also be applied to video and embed tags. If a given image doesn’t look good after certain width, you can restrict the grow by setting max-width: [size where the image start getting distorted]
8) If any part or element in the page still looking distorted or bad, you can use media queries at this point to adjust either font sizes or spaces, to be able to get things back into place. An example below of how font sizes are adjusted in a nav menu to make them look fine in different viewports:
@media screen and (min-width: 1001px) and (max-width: 1080px) { #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}
9) A nice addition to a responsive page, to avoid the elements to “snap” to their new settings, as the page change viewports, is:
* {
transition: all 1s;
}
This will ease elements to their new settings as they readjust themselved.
Size (in pixels): 320 x 480
Some examples here
Transitions: when a certain CSS property change, the change won’t happen abruptly, but overtime:
#box {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}
So when element #box experience a change in opacity or left, the change will take 3 and 5 seconds respectively.
Here’s an example of all the transition properties:
#content a {
…(more styles)…
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
Or combined in just one line:
#content a {
/*…existing styles…*/
transition: all 1s ease 0s;
}
Example with the current vendor prefixes:
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
You can define different transition times for different properties:
#content a {
…(more styles)…
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
According to the spec, these are the CSS properties you can apply transitions to:
http://www.w3.org/TR/css3-transitions/#properties-from-css-
Animations don’t passively wait for properties to change (as transitions do), they are explicitly triggered by, say, adding the right class to a DOM object, for example:
.warning {
animation-name: ‘horizontal-slide’;
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes ‘horizontal-slide’ {
from {
left: 0;
}
to {
left: 100px;
}
}
Example of @-webkit-keyframes
When .warning is applied to an element in the DOM, we get the animation working, specified by the keyframes, and with a certain duration and number of iterations.
With 2D transformations, you can scale, rotate and move point of origin on elements, based on CSS settings:
#box.move-me {
height: 100px; width: 100px;
transform: translate(50px, 50px) scale(1.5, 1.5) rotate(90deg);
}
The foregoing example moves #box by 50 pixels in both the X and Y directions, scales the element by
150%, and then rotates it 90 degrees clockwise about the z axis.
Here’s the breakdown of the particular properties:
transform: scale(1.7); /* size the object 170% of its current size */
transform: translate(40px, 0px); /* Move the object 40px horizontally, and 0 vertically, settings can be negative values, or percentages */
transform: rotate(3600deg); /* Make elements rotate, big values will make elements spin as they land in their current setting */
transform: skew(10deg, 2deg); /* Same skew as photoshop, if only one value provided, it will apply for both: x and y axes */
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); /* Combine all the above, in one line */
transform-origin: 20% 20%; /* move the current center of the object 20% horizontally, and 20% vertically */