Moving Menu

Pea.rs - biblioteka popularnych wzorów HTML/CSS

corner Jan Gajdowicz
Jan Gajdowicz
2012-12-05
corner Pea.rs - biblioteka popularnych wzorów HTML/CSS
W pracy najbardziej nie lubię czynności powtarzalnych. Jeśli jestem zmuszony często pisać stały fragment kodu, nadawać podobny styl warstwie w Photoshopie, czy obrabiać kilkadziesiąt zbliżonych do siebie zdjęć, natychmiast rozpoczynam poszukiwania narzędzi, które pozwolą mi uniknąć niepotrzebnej pracy. Jednym z nich jest biblioteka snipetów Pea.rs.

Znowu to samo...

Idea jest prosta. Zebrać najczęściej powtarzające się elementy strony www, okrasić je podstawowym stylowaniem i umieścić w wygodnej bibliotece online. Pomysł z pozoru banalny, jednak zastanówmy się. Jak często kodujesz nawigację strony? Czy nie wkurza Cię nudne kodowanie formularzy? Może warto by sięgnąć po gotowy wzorzec i oszczędzić sobie kilku minut z życia? Za przykład weźmy sobie znienawidzoną przez wielu tabelkę. Pea.rs ma dla nas gotowiec:

HTML

[html]

TypeDateRating
Cheddar Jan 3, 2012 ★★★
Havarti Jan 12, 2012 ★★★★
Muenster Jan 20, 2012 ★★
Swiss Jan 22, 2012
Gouda Jan 25, 2012 ★★★★★
Emmentaler Jan 27, 2012 ★★★

[/html]

CSS

[css]table { margin: 0; padding: 0; } table th, table td { padding: 10px 20px; text-align: left; border-bottom: 1px solid #ccc; } table th { border-width: 2px; } table td { color: #666; } table tr:last-child th, table tr:last-child td { border-bottom: none; } table tr:nth-child(even) { background: #eee; } [/css]

Podgląd

To wygląda nieźle!

Tym bardziej, że za podstawowe stylowanie elementów odpowiada Dan Cederholm, autor biblii koderów pt. "Kuloodporne strony internetowe". Choć nie musisz korzystać z jego CSS, w większości przypadków ten kod będzie dobrym punktem wyjścia. A może potrzebujesz wykonać szybki prototyp dla klienta? Wtedy bierzesz HTML i CSS, wstawiasz odpowiednie skrypty PHP i zaoszczędziłeś kilkanaście minut!

HTML

[html]

This is help text under the form field.

[/html]

CSS

[css]form fieldset { margin: 0 0 20px 0; font-size: 14px; } form fieldset.form-actions { margin: 0; } form fieldset label { display: block; margin: 0 0 5px 0; font-weight: bold; } form fieldset input.form-text { display: block; width: 50%; padding: 5px; font-size: 14px; border: 1px solid #ddd; background: #f5f5f5; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } form fieldset input.form-text:focus { border: 1px solid #ccc; background: #fff; } form fieldset p.form-help { margin: 5px 0 0 0; font-size: 12px; color: #999; } form input[type="submit"] { margin: 0; padding: 5px 10px; font-size: 12px; font-weight: bold; border: 1px solid #ccc; background: #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } form input[type="submit"]:hover, form input[type="submit"]:focus { border: 1px solid #bbb; background: #e5e5e5; } form input[type="submit"]:active { border: 1px solid #ccc; background: #eee; } [/css]

Podgląd

Waszym zdaniem

Pea.rs to nie rewolucyjne narzędzie, które zmieni Wasze życie i uczyni Was lepszymi ludźmi. Jednak każda oszczędność czasu jest moim zdaniem godna uwagi. A jakie są Wasze odczucia. Czy chętnie korzystacie ze snipetów, a może tworzycie własne biblioteki? Dajcie znać!

comments powered by Disqus

Powiązane

photo corner
Różnice w wersjach PHP

W dzisiejszym wpisie chciałbym krótko przybliżyć Wam język PHP, oraz pokazać najważniejsze zmiany, jakie w ostatnich latach zostały w nim wprowadzone.

Czytaj więcej
photo corner
Zen Coding - HTML/CSS z prędkością światła (cz.I)

Wydajność jest dla kodera HTML/CSS sprawą kluczową. Kiedy opanujemy już składnię i podstawowe techniki oraz wdrożymy pierwsze projekty, czas kodowania nabiera podstawowego znaczenia. Z pomocą przychodzą nam rozmaite narzędzia. Dla mnie, najważniejszym jest Zen Coding, które w niezwykły sposób pozwala mi pisać kod kilkakrotnie szybciej.

Czytaj więcej
photo corner
Zen Coding - HTML/CSS z prędkością światła (cz.II)

W pierwszej części artykułu przedstawiłem Zen Coding jako niezwykłe ułatwienie w pracy kodera. Dowiedzieliśmy się, m.in. jak za pomocą jednej linijki pseudokodu napisać cały dokument HTML. Dziś przyjrzyjmy się rozwiązaniom, które przyspieszą naszą pracę z CSS. Zapraszam do lektury!

Czytaj więcej