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]
| Type | Date | Rating |
|---|---|---|
| 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ć!
Szukasz szybkiego hostingu z dyskami SSD? Dobrze trafiłeś.
Pakiety hostingowe Kylos to sprawdzone i niezawodne rozwiązanie dla Twojej strony.
Darmowy okres próbny pozwoli Ci sprawdzić naszą ofertę, bez ponoszenia kosztów.
Sprawdź nas