Archiwa tagu: CSS

Metro UI CSS – szablon CSS w stylu Windows 8

metro css windows 8

Bardzo ciekawy i dobrze zaprojektowany interfejs CSS w stylu Windows 8. Interfejs CSS to może mało precyzyjne określenie bowiem paczka zawiera również skrypty JS. Aktualnie w sieci  pojawiła się nowa wersja Metro UI CSS, wcześniejsza była bardziej uboższa.  Jako strona internetowa taki interfejs nie jest oryginalny, ale śmiało można by go wykorzystać do budowy np panelu administracyjnego sytemu webowego.

 

Link: http://metroui.org.ua/
Licencja: darmowa

SpritePad – aplikacja internetowa, która przyspieszy pisanie CSS

spritepad

Aplikacja internetowa, która wspomaga pisanie stylów CSS a dokładnie wstawiania obrazków jako tła. Dzięki wykorzystaniu w aplikacji techniki Drag and drop, możemy myszką nakładać obrazki na plansza, a kod CSS sam się generuje. Utworzony obrazek wraz z kodem CSS możemy ściągną w formie pliku zip. Program jest darmowy, ale jeżeli chcielibyśmy zapisać projekt do późniejszej edycji trzeba wykupić konto za parę dolarów.

Link: http://wearekiss.com/spritepad

Gridulator – wyliczanie kolumn do frameworków CSS

gridulator

Świetne narzędzie do wyliczania kolumn w szablonie strony WWW. Wystarczy że ustalimy jakiej szerokości chcemy mieć stronę oraz ile ma zawierać kolumn. Aplikacja sama obliczy jaką szerokość może mieć jedna kolumna oraz ile może wynieść miedzy nimi odstęp. Wynik możemy podejrzeć na podglądzie lub zapisać w postaci pliku .png. Szkoda że aplikacja nie generuje od razu pliku CSS.

Link: http://gridulator.com/

Construct 1.0 – aplikacja internetowe do tworzenia layoutu w CSS

construct

Ciekawe narzędzie internetowe do tworzenia layoutu o szerokości 950px. Aby korzystać z narzędzia trzeba zapoznać się ze skrótami klawiszowymi. Layout budujemy zaczynając od dodania kontenera ( głównej ramy – „container” )  do której następnie dodajemy kolumny.  Dopiero w kolumny możemy dodawać przykładowy tekst. Do ramy głównej lub do kolumny możemy dodawać identyfikatory id. Możemy również usuwać lewy odstęp od kolumny, aby ostatnia kolumna dotykał głównej ramy. Szkoda że nie ma możliwości regulowania  szerokości kontenera, no ale 950px to bezpieczna szerokość.

Link: http://www.constructyourcss.com/

Stylesheet switcher – skrypt jQuery do zmiany CSS

stylesheet switcher

Malutki i prosty skrypt, który pozwala za jednym kliknięciem zmienić plik arkusza stylów czyli atrybut href w znaczniku link. Dodatkowo style pozostają również po odświeżeniu, ponieważ informacja o aktualnym pliku zapisywana jest w ciasteczkach.

Framework: jQuery
Demo: http://www.kelvinluck.com/assets/jquery/styleswitch/index.html
Download: http://www.kelvinluck.com/assets/jquery/styleswitch/styleswitch.zip

1200 Grid System – szeroki framework CSS

1200GridSystem_thumb.jpg

1200GridSystem to framework CSS. Stanowi on ramę pod rozplanowanie układu strony WWW. Odpowiedni przydział class do znaczników HTML, pozwoli w szybki sposób stworzyć przejrzysty i prawidłowo wyświetlany układ strony. Szerokość jaka jest możliwa z tym frameworkiem to 1200 pikseli. Jest to jeden z z szerszych frameworków bowiem najbardziej popularne są 960 pikseli. Jednak myślę że to się będzie zmieniać, bowiem coraz więcej ludzi ma szersze monitory oraz urządzenia typu tablet. Tak więc szerokości stron prawdopodobnie będą oscylować między szerokimi optymalnymi dla monitorów a wąskimi dla urządzeń mobilnych. Polecam również artykuł o skrypcie Adapt.js , który zmienia pliki CSS w zależności od wielkości okna przeglądarki.

Link: http://sampsonresume.com/1200/
Download: http://sampsonresume.com/1200/1200GridSystem.zip

CSS:resetr – arkusze stylów normalizując CSS

css resetr

Przeglądarki już tak mają, że różnią się w interpretacji stylów CSS. Niedoścignionym faworytem interpretacji stylów na opak i denerwowania wszystkich kodeków HTML jest oczywiście Internet Explorer. Ze stylami można sobie troszkę ułatwić stosując dodatkowe style, które normalizują kod CSS sprawiając że strona jest widziana na wszystkich przeglądarkach tak samo. To niestety nie pomoże nam rozwiązać wszystkich problemów ze stylami CSS. Takich normalizujących stylów jest dużo a najlepsze z nich możemy ciągnąć na stronie cssresetr.com. Dodatkowo mamy  możliwość sprawdzenia stylów na przykładzie i porównania miedzy sobą.

css resetr

Link: http://cssresetr.com/