RWD – Links

Responsive Web Design
Materiały do nauki:

http://css-tricks.com

http://teamtreehouse.com

http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660
http://designwoop.com/2012/03/15-detailed-responsive-web-design-tutorials/
http://www.w3.org/TR/css3-mediaqueries/#device-width
http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html
http://mediaqueri.es/
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
https://gist.github.com/3768460
Scaffolding – bootstrap is built on responsive 12-column grids, layouts, and components.

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Mobile First

http://www.lukew.com/ff/entry.asp?933

Respond – a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

https://github.com/scottjehl/Respond

320 and Up – the ‘tiny screen first’ responsive boilerplate

http://stuffandnonsense.co.uk/projects/320andup/

20 najlepszych projektów responsive 2012
http://socialdriver.com/2012/07/20-best-responsive-websites/
http://magazine.acreno.pl/rewolucyjny-responsive-webdesign/
https://developers.google.com/webmasters/smartphone-sites/feature-phones
https://developers.google.com/webmasters/smartphone-sites/details
https://developers.google.com/webmasters/smartphone-sites/redirects
http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://magazine.acreno.pl/rewolucyjny-responsive-webdesign/

Fluid grid
http://www.alistapart.com/articles/fluidgrids/

Different background image depending on screen resolution?

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

Płynna zmiana rozmiaru zdjęć

http://unstoppablerobotninja.com/entry/fluid-images

Media Screen Resolution / Devices
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://nmsdvid.com/snippets/

Css in drupal

Drupal uses a CSS class called „clear-block” or „clearfx” that allows a container DIV to always enclose any floated children elements.
6.x
7.x

For instance, to add a node-blog.tpl.php template in a sub-theme, you must also copy over node.tpl.php from the parent theme. This bug has been fixed in Drupal 7 but will not be fixed in Drupal 6.
http://drupal.org/node/225125

Menu image

Menu składające się z 5 poziomów
Jeden obrazek składający się z 5 wierszy, w każdym wierszu grafika normal i active kolejnego elementu.

Dodatkowo wykorzystamy menu_attributes – http://drupal.org/project/menu_attributes
W atrybutach elementu menu dodajemy class: icon menu_X np.
Oferta
class: icon menu_1
Galeria
class: icon menu_2

CSS: .icon{

display:-moz-inline-box;display:inline-block;overflow:hidden;

background:url(imageRollover.png) no-repeat;

text-indent: -3000px;

*text-indent:0px;

font:0/0 Arial;

color:rgba(255,255,255,0);

vertical-align:bottom;

width:100px;

height:100px;

}

.iconYouTube{}

hover.iconYouTube{background-position:-200px 0px;}

.iconFlickr{background-position:-100px 0px;}
hover.iconFlickr{background-position:-300px 0px;}

.iconRss{background-position:0px -100px;}
hover.iconRss{background-position:-200px -100px;}

.iconFeedburner{background-position:0px -200px;}
hover.iconFeedburner{background-position:-200px -200px;}

.iconDelicious{background-position:-100px -200px;}
hover.iconDelicious{background-position:-300px -200px;}

.iconTechnorati{background-position:-100px -100px;}
hover.iconTechnorati{background-position:-300px -100px;}

HTML:
<a href=”” title=”youtube icon” class=”icon iconYouTube”>youtube icon</a>
<a href=”” title=”flickr icon” class=”icon iconFlickr”>flickr icon</a>
<a href=”” title=”rss icon” class=”icon iconRss”>rss icon</a>
<a href=”” title=”feedburner icon” class=”icon iconFeedburner”>feedburner icon</a>
<a href=”” title=”delicious icon” class=”icon iconDelicious”>delicious icon</a>
<a href=”” title=”technorati icon” class=”icon iconTechnorati”>technorati icon</a>

Źródło:
http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/

CSS

Klasa (.)

selektor.klasa {}

Identyfikator (#) – może wystąpić tylko raz w hierarchii drzewa dokumentu, nie może rozpoczynać się cyfrą ani myślnikiem.

selektor#identyfikator {}

Klasa i Indentyfikator to pojedynczy wyraz, który może zawierać litery z alfabetu angielskiego (A-Z, a-z), cyfry (0-9), myślniki („-„) i podkreślniki („_”).

Selektor uniwersalny – określa atrybuty dla wszystkich elementów strony.

* {}

Selektor potomka – nadaje atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu. Potomek nie musi leżeć bezpośrednio za przodkiem.

przodek1 przodek2 … potomek {}

Selektor dziecka – nadaje atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu. Dziecko musi znajdować się bezpośrednio wewnątrz znacznika rodzica.

rodzic > dziecko {}

Selektor braci – nadaje określone atrybuty drugiemu z sąsiadujących ze sobą braci (brat2).

brat1 + brat2 {}

Ogólny selektor braci – nadaje określone atrybuty drugiemu z sąsiadujących ze sobą braci (brat2). Pomiędzy braćmi mogą znajdować się elementy innego typu, które zostaną pominięte.

brat1 ~ brat2 {}

CENTROWANIE W POZIOMIE
TEKST – wewnątrz bloku centruje się za pomocą text-align:center. Właściwość ta działa tylko na elementy typu inline — cały blok może mieć inne położenie.
Elementy mające display:inline, display:inline-block, display:inline-table są traktowane jak tekst, więc też zostaną wycentrowane (m.in.: obrazki, elementy formularza).

p.komunikat {text-align:center;}

Element text-align jest dziedziczony, więc jeśli nie chcesz, żeby działał na potomków elementu, musisz im nadać inną wartość tej właściwości.

STATYCZNE ELEMENTY BLOKOWE – najczęściej centruje się za pomocą margin:auto. Aby ta właściwość zadziałała, element musi mieć ustaloną szerokość albo ustawiony display:table (który spowoduje automatyczne wyliczenie szerokości).

div#content {
width:80%;
min-width:500px;
max-width:60em;
margin: 0 auto;
}

Wyśrodkowanie całej strony, owiniętej w div id=”content”, która zajmie 80% szerokości okna, ale nie mniej niż 500px (bo np. umieszczone obrazki się nie zmieszczą), ani nie więcej niż 60em (bo tak bardzo rozciągnięty tekst jest słabo czytelny).

CENTROWANIE W PIONIE
Strony internetowe z założenia są „ciągłe” i mają zajmować minimalną niezbędną wysokość. Również gdy się je drukuje na wielu kartkach, to nie jest jasne, gdzie jest środek strony. Z tego powodu centrowanie w pionie jest trudne w CSS.

TEKST
Tekst (i elementy inline, inline-block, inline-table) tylko w obrębie pojedynczej linii centruje się za pomocą vertical-align:middle.

CENTROWANIE WEWNĄTRZ KOMÓRKI TABELI
Dla elementów tabel najlepiej działa właściwość vertical-align:middle, która wyjątkowo centruje w pionie całą zawartość komórki (a nie tylko tekst).

p.komunikat {
height: 10em;
display:table;
vertical-align:middle;
}

ELEMENT BLOKOWY
Żeby wycentrować jeden element w pionie potrzebny jest element nadrzędny posiadający konkretną wysokość i niestety nie może to być po prostu height=100%.

CENTROWANIE ELEMENTÓW O STAŁEJ WYSOKOŚCI
Jeśli element do wycentrowania i element, w którym się on znajduje, mają stałą wysokość, to można ustawić odpowiednio duży margin i/lub padding, aby odsunąć element na odpowiednią wysokość.

CENTROWANIE ELEMENTÓW ABSOLUTNIE POZYJONOWANYCH
Ustawienie left:50% i top:50% centruje względem lewego górnego rogu elementu, a nie jego środka, przez co element nie będzie równo na środku. Można to skorygować za pomocą sztuczki — nadać elementowi ujemny lewy/górny margines na połowę jego wielkości.

#srodek {
width:200px; margin-left: -100px;
height:150px; margin-top: -75px;
position:absolute; top:50%; left:50%;
}

Jeśli element nie musi mieć stałej wielkości, to można go łatwo wycentrować ustalając równą odległość od krawędzi elementu go zawierającego:

#srodek {
position:absolute;
top:50px; left:50px;
bottom:50px; right:50px;
}

CENTROWANIE NA ŚRODKU EKRANU
Do wyśrodkowania elementu na ekranie potrzeba rozciągnąć na cały ekran i wtedy można użyć sposobu z pozycjonowaniem absolutnym wspomnianym wcześniej.

html {height:100%;}

 

LISTY LI
http://www.red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html
http://naradesign.net/css/ex/content.html

FLOAT, CLEAR, INLINE, BLOCK
Ramka do div zawierającego obraz i tekst by pokrywał cały div a nie tylko tekst

float:left; overflow:auto -> http://jsfiddle.net/rmwolinski/K5R8J/

Po float następny element w nowej linii

float:clear -> http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

Galeria zdjęć

float:left -> http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

Żródło:
http://www.quirksmode.org/css/clearing.html
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
http://complexspiral.com/publications/containing-floats/

TEXT-INTEND in IE6/IE7
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

All about CSS
http://www.positioniseverything.net/

Test in IE online
http://netrenderer.com/

Test elements in all browser (know how)
http://www.brunildo.org/test/

header, section, nav, footer in IE
http://code.google.com/p/html5shiv/

<head>
</head>

PNG in IE5.5 i IE6
Istnieje możliwość wyświetlenia pliku png z kanałem alpha, ale jedynie w tle a nie jako . Użyjemy do tego specialnego filtru.

background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”SCIEZKA_DO_OBRAZU_WZGLEDEM_DOK_XHTML”, sizingMethod=”crop”;

 

Można wykorzystać metodę „crop” lub „scale”.

Obrazki Musisz (czy to przy użyciu JS czy zmieniając strukturę XHTML) wstawić jako obraz plik GIF z przeźroczystm pikselem, a elementowi ustawić tło (jak powyżej).

Style, wyjątki dla IE
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/