Roundup #4 – Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Bootswatch, Document-Bootstrap, DownloadBuilder, Strapdown, FileDrop

Roundup #4 - Metro UI CSS, Smart Time Ago, Royal Slider, BBSearch, MDMagick, Document-Bootstrap, DownloadBuilder, Strapdown

Nazbierało się trochę tego przez ostatnie dwa dni. Staram się i tak wybierać tylko niektóre i co ciekawsze projekty, bo nie byłbym w stanie opisać tutaj wszystkiego. Zapraszam do lektury kolejnego Roundup.

Metro UI CSS

Framework Metro UI CSS, który stworzony został przez jednego z twórców interfejsu Metro dla nadchodzącego Windows 8. Jest to zbiór klas CSS i elementów UI, które pozwalają zbudować genialnie wyglądający interfejs w oparciu o Metro. Posiada wsparcie dla przeglądarek: IE 9+, Chrome, Opera, Safari oraz Firefox.

Metro UI CSS – A set of styles to create a site similar to the Windows 8 Metro UI


Smart Time Ago

Dodatek do jQuery, który wykorzystując znacznik <time> z  HTML5 i funkcję JavaScript do pokazania nam ilości minionego czasu od danej daty i godziny.

 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>

Smart Time Ago – A jQuery Plugin For Relative Timestamps


Royal Slider

Jedno z wielu narzędzi do pokazu slajdów. Zbudowane w oparciu o CSS3, HTML5 oraz samą bibliotekę jQuery. Potrafi obsłużyć praktycznie każdy element na stronie – od zwykłych obrazków, po treść w formie HTML i filmiki wideo. Oprócz tego, że Royal Slider jest bardzo rozbudowany i posiada bardzo dużo ciekawych opcji, to na dodatek prezentuje się bardzo efektownie. Poza tym – wykorzystuje technikę responsive, a więc Royal Slider może być użyty do budowy wersji mobilnych stron.

Royal Slider – A Powerful, Professional And Responsive jQuery Slider


BBSearch

Narzędzie zbudowane w oparciu o JavaScript. Powoduje zamianę elementu <input> na interaktywne pole do automatycznego wyszukiwania oraz zwracania wyników na bazie Backbone.

Współpracuje także z JSONP API, takimi jak Github, czy Twitter. Przykładowe wykorzystanie można zobaczyć na stronie autora.

$('#search-input-1').bbsearch({
  url: 'https://api.github.com/legacy/repos/search/#bbsearch-query#?callback=?&'
, itemTemplate: '<p>[@<%= owner %>] <a href="<%= url %>"><%= name %></a></p>'
, resultsElement: $('#results-1')
, parse: function(response) { return response.data.repositories; }
});

MDMagick

Bardzo proste i łatwe w integracji narzędzie, zbudowane przez tego samego autora, który stworzył wyżej wspomiane BBSearch. Pozwala na przekształcenie elementów takich jak <input>, czy <textarea> w interaktywny edytor WYSIWYG treści HTML w oparciu o Markdown, który znamy chociażby z Github’a.

$('.css-selector').mdmagick();

Autor na swojej stronie prezentuje przykładowe wykorzystanie MDMagick i muszę stwierdzić, że prezentuje się ono bardzo ciekawie.


Bootswatch

Katalog darmowych szablonów do Twitter Bootstrap. Możemy dzięki temu zaoszczędzić sporo czasu na tworzenie własnego wyglądu i skorzystać z już gotowej paczki. Całość prezentuje się naprawdę dobrze.


Document-Bootstrap

Kolejny ciekawy projekt, który wykorzystując JavaScript, bibliotekę jQuery i ponownie Twitter Bootstrap daje nam tak zwany Boilerplate do tworzenia prostych i przyjemnych dla oka stron, gdzie opisywać możemy swoje projekty. Jest to skierowane głównie do deweloperów, takich jak autorzy tych wszystkich projektów, które tutaj prezentuję. Pozwala im to zaoszczędzić sporo czasu na tworzeniu takich dokumentów od nowa. Jest to też alternatwa dla Github Pages.


DownloadBuilder

Projekt wykorzystujący HTML 5 File System API do łączenia wielu plików w jeden. Mam tutaj na myśli łączenie wielu plików CSS czy JavaScript. Wpiera także łączenie plików hostowanych bezpośrednio na Github’ie. Zapytania Ajax/JSONP trzymane są w cache przy użyciu sessionStorage.


Strapdown

Strapdown.js – Creating elegant Markdown documents couldn’t be simpler

To kolejny projekt wykorzystujący Markdown do budowania prostych stron do opisu projektów. Jest to bardzo podobne narzędzie do Document-Bootstrap i na dodatek wykorzystujące Bootswatch, które także wspomniane zostało wyżej.


FileDrop

Cross-Browser Drag ‘n’ Drop File Uploader: FileDrop

Bardzo “lekka” biblioteka JavaScript do tak zwanego Drag ‘n’ Drop jeśli chodzi o uploader plików w przeglądarce. Jak sam autor przyznaje – nie wymaga wsparcia żadnych frameworków JavaScript. Wspiera za to szereg przeglądarek: Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.


[1], [2], [3]