70-480 – Tworzenie animowanego i adaptacyjnego interfejsu użytkownika

70-480

Animacja obiektów poprzez stosowanie przejść CSS; stosowanie przekształceń 3-D i 2-D; dostosowywanie interfejsu użytkownika na podstawie kwerend dotyczących nośników (dostosowywanie urządzeń do formatów wyjściowych, rozwiązań do wyświetlania i prezentowania informacji), ukrywanie lub wyłączanie elementów sterujących.



Tytuł oraz opis materiału dzisiejszego wpisu zaczerpnięte z oficjalnego przewodnika do egzaminu 70-480 nie są być może zbyt czytelne i zrozumiałe. Jest to część poświęcona transformacjom CSS (2D oraz 3D) oraz @media queries.

CSS3 transitions

Dzięki CSS3 jesteśmy w stanie zdefiniować przejścia / animacje bez użycia Flash, czy JavaScript. Dzieje się tak za sprawą właściwości transition, która pozwala pokazać przejście z jednego stylu w inny. Tworzone animacje można łączyć z właściwościami translate oraz transform, o czym pisałem już wcześniej.

Dzięki właściwości transition jesteśmy w stanie wskazać jaką inną właściwość chcemy animować oraz przez jak długi czas. Tym samym musimy podać dwa argumenty:

  • właściwość, którą chcemy animować
  • czas animacji – bez podania czasu nie zobaczymy animacji, bo wartość domyślnie ustawiona będzie na 0

Spójrzmy na przykład animacji zmiany wysokości elementu blokowego, która trwać będzie jedną sekundę: transition: height 1s. Wystarczy, że najedziemy na poniższy czerwony prostokąt by zobaczyć efekt.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Należy pamiętać, że np. przeglądarka Internet Explorer 9 nie wspiera własności: transiton. Pełny wykaz wsparcia: http://caniuse.com/#feat=css-transitions

Efekty możemy również łączyć, podając kolejne wartości po przecinku. Spójrzmy zatem na przykład animacji zarówno wysokości jak i szerokości: transition: height 1s, width 2s z tą różnicą, że efekt animacji dla zmiany wysokości elementu potrwa jedną sekundę, a zmiana szerokości elementu dwie sekundy.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Własność transition rozbita została na kilka różnych własności, które podawać możemy niezależnie:

  • transition-property – jaką własność chcemy animować
  • transition-duration – przez jaki czas
  • transition-timing-function – jaką funkcję czasu chcemy użyć w stosunku do prędkości oraz czasu animacji (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier)
  • transition-delay – opóźnienie w wywołaniu animacji

Wszystkie cztery wartości możemy oczywiście połączyć w jedno: transition. Spójrzmy na przykład dwóch takich samych animacji utworzonych na dwa róże sposoby.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jeśli chodzi o funkcje czasu, to świetnie opisano i pokazano to na stronie: http://www.the-art-of-web.com/css/timing-function/

Różnymi opcjami możemy eksperymentować ponownie na tech demo przygotowanym przez Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_transitions.htm

Transformacje CSS3 2D

O transformacja 2D pisałem już w jednym z pierwszych wpisów: 70-480 – Programowe stosowanie stylów do elementów HTML

Transformacje CSS3 3D

Spójrzmy najpierw na przykład:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Widzimy tutaj wykorzystanie animacji za pomocą własności transition, która określona została dla własności transform. To własnie ta własność powoduje, że możemy manipulować elementami blokowymi, wykorzystując w tym celu następujące funkcje:

  • rotateX (angle) – obrót wokół osi X
  • rotateY (angle) – obrót wokół osi Y
  • rotateZ (angle) – obrót wokół osi Z
  • rotate3d (x, y, z, angle) – obrót wokół wektora definiowanego przez parametry x, y, z
  • scaleX (x) – skalowanie wzdłuż osi X
  • scaleY (y) – skalowanie wzdłuż osi Y
  • scaleZ (z) – skalowanie wzdłuż osi Z
  • scale3d (x, y, z) – skalowanie wzdłuż wektora definiowanego przez parametry x, y, z
  • translateX (x) – przesunięcie wzdłuż osi X
  • translateY (y) – przesunięcie wzdłuż osi Y
  • translateZ (z) – przesunięcie wzdłuż osi Z
  • translate3d (x, y, z) – przesunięcie wzdłuż wektora definiowanego przez parametry x, y, z
  • perspective (n) – definicja perspektywy
  • matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) – mix wszystkiego powyżej, poszczególne wartości odpowiadają odpowiednim przekształceniom

Oprócz własności transform, wyróżniamy także:

Tutaj również przychodzi nam z pomocą demo od Microsoft:  http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_3d-transforms.htm

CSS3 @media queries

W kontekście własności / atrybutu @media można napisać bardzo wiele. Atrybut (html) / własność (CSS) ten / ta służy do definiowania (w uproszczeniu) różnych rodzajów styli w zależności od urządzenia, które wyświetla stronę oraz od rozdzielczości dostępnej na ów urządzeniu.

Świetny, a zarazem krótki artykuł, który to opisuje znalazłem na css-tricks.com i pozwolę sobie odesłać Was do niego: Logic in Media Queries

Pokazywanie i ukrywanie elementów za pomocą CSS

O tym również pisałem już wcześniej: 70-480 – Programowe stosowanie stylów do elementów HTML

70-480 – Określanie właściwości tekstu HTML

70-480

Stosowanie stylów do wyglądu tekstu (kolor, pogrubienie, kursywa); stosowanie stylów do czcionki tekstu (format WOFF i funkcja @font-face, rozmiar); stosowanie stylów do wyrównania tekstu, odstępów i wcięć, stosowanie stylów do dzielenia tekstu, stosowanie stylów do cienia tekstu.



Dzisiejszym wpisem rozpoczynam ostatni rozdział materiału przygotowującego do egzaminu 70-480. Będzie to seria sześciu artykułów, które skupiać się będą na wyglądzie tworzonego przez nas HTML. Poznamy możliwości CSS3, elastycznego układu zawartości, animowanego i adaptacyjnego interfejsu użytkownika oraz spojrzymy co nieco na możliwości jQuery.

Jak mówi sam tytuł wpisu – zajmiemy się stylowaniem tekstu, czyli wielkość i kolor czcionki, odstępy, akapity, wyrównanie tekstu oraz rzucanym cieniem. Poniżej znajdzie głównie przykłady z jsfiddle.net. Móc coś przeczytać to jedno, ale od razu zobaczyć i móc eksperymentować to drugie.

CSS i tekst

Kolor czcionki

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wyrównanie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dekoracja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Transformacja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wcięcie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Łącznik tekstu

Łącznik tekstu to nic innego jak kontrolowanie tekstu pod względem łamania wyrazów na końcach linii. Odpowiedzialna jest za to właściwość hyphens.

Z tą funkcjonalnością kompletnie nie radzą sobie przeglądarki ChromeOperahttp://caniuse.com/#feat=css-hyphens

Poniższy przykład należy oglądać na Firefox lub Internet Explorer.

CSS hyphens

Efekt cienia

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-*

Przejdźmy do wyboru czcionki oraz jej ustawień. W CSS3 wyróżniamy trzy rodziny czcionek:

  • Serif (szeryfowe) – posiadające ozdobniki, np. Times New Roman, Georgia – nadające się do druku, ale ciężko czyta je się na ekranie monitora
  • Sans-serif (bezszeryfowe) – nieposiadające ozdobników, np. Arial, Verdana – gorzej wyglądające po wydruku, ale znacznie bardziej przyjemne w czytaniu na ekranie monitora
  • Monospace – jednakowe szerokości liter, np. Courier New, Lucida Console

font-family

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy trzy rodziny czcionek. Warto również zauważyć, że właściwość font-family przyjmuje po przecinku kilka wartości dla rodzaju czcionki. Spowodowane jest to tym, że docelowy użytkownik może nie mieć danej czcionki zainstalowanej na swoim komputerze. Sprawdzenie dostępności następuje od lewej, więc w pierwszej kolejności podajemy czcionkę najbardziej przez nas pożądaną, a na końcu generyczną rodzinę czcionek, którą użytkownik na pewno będzie miał u siebie.

font-style

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/17/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-weight

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/21/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-size

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/22/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Warto w tym miejscu zapoznać się wieloma jednostkami rozmiaru czcionki. W tym celu odsyłam do artykułu: CSS Units na w3schools.com.

@font-face

Dzięki właściwości @font-face jesteśmy w stanie zdefiniować własne czcionki lub używać serwisów takich jak Google Fonts, gdzie mamy dostęp do wielu niestandardowych czcionek, które możemy wykorzystać na naszej stronie. Całość jest niezwykle prosta i sprowadza się do zbudowania reguły, która pozwoli nam na użycie zdefiniowanej przez nas nazwy czcionki.

Wyróżniamy przy tym kilka formatów plików czcionek, a każdy obsługiwany jest przez inne przeglądarki:

  • EOT – IE9
  • TTF – przeglądarki mobilne
  • SVG – starsze wersje przeglądarki Safari
  • WOFF – współczesne przeglądarki
  • WOFF2 (nowszy, lepsza kompresja) – najnowsze wersje przeglądarek

Całość sprowadza się do kawałka kodu:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

.. oraz późniejszego (przykładowego) użycia:

font-family: 'MyWebFont', sans-serif;
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/24/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Polecam ponadto zapoznać się ze świetnym artykułem na ten temat: Using @font-face

70-480 – Programowe stosowanie stylów do elementów HTML

70-480

Zmiana lokalizacji elementu; stosowanie przekształcenia; pokazywanie i ukrywanie elementów.



Po raz kolejny, pod krótkim opisem ze strony Microsoft kryje się kilka tematów do omówienia. Tym razem będą to:

  • pozycjonowanie elementów w CSS3
  • pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript
  • transformacje 2D z wykorzystaniem CSS3

Pozycjonowanie elementów w CSS3 (CSS Positioning & HTML DOM Style Object)

Pozycjonowanie elementów w strukturze HTML może wydawać się skomplikowane, ale tylko na początku. Z pomocą przychodzą nam style CSS(3), które udostępniają kilka opcji sterowania warstwami, ułożeniem elementów oraz ich nachodzeniem na siebie.

Najważniejsze, to zrozumienie czterech wartości atrybutu position:

  • static – domyślna wartość każdego elementu. Jest to normalny przepływ w strukturze dokumentu HTML (od góry do dołu). Atrybuty: left, top, right, bottom nie wpływają w tym wypadku na elementy, nawet jeśli zostały zdefiniowane.
  • fixed – jak mówi sama nazwa – jest to pozycjonowanie stałe, a więc związane z oknem przeglądarki. Atrybuty left, top, right, bottom pozwalają nam ustalić pozycję elementu względem okna przeglądarki. Często możemy się spotkać z efektem przyklejonego górnego menu podczas scrollowania. To własnie efekt pozycjonowania stałego. Pozostałe elementy zachowują się tak, jakby elementów typu fixed w ogóle nie było w strukturze HTML.
  • relative – w zasadzie różni się od pozycjonowania statycznego tym, że tym razem atrybuty left, top, right, bottom mają realne odzwierciedlenie i ustawione dla danego elementu pozwalają przesuwać go względem jego oryginalnej pozycji. Pozostałe elementy traktują taki element jakby był on pozycjonowany statycznie i nieprzesunięty względem swojego oryginalnego położenia. Elementy mogą na siebie zachodzić, a warstwy definiować możemy za pomocą atrybutu: z-index.
  • absolute – pozycjonowanie bezwzględne, które w zasadzie posiada dwa stany:
    • jeżeli dla elementów (w górę) nie ustawiono pozycjonowania innego niż statyczne, to w zasadzie można to przyrównać to pozycjonowania stałego
    • jeżeli któryś element (pierwszy w górę) ma ustawione pozycjonowanie inne niż statyczne, to elementy ustawione jako absolute będą pozycjonowane względem tego elementu

    Co warto dodać, to informacja, że elementy pozycjonowane bezwzględnie nie zabierają miejsca i są traktowane przez pozostałe elementy jakby nie istniały w strukturze dokumentu HTML.

Pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript (CSS Display and Visibility)

Widocznością elementów możemy sterować z poziomu CSS za pomocą dwóch atrybutów:

  • display
  • visibility

Różnicę pomiędzy nimi pokażę Wam na dwóch prostych przykładach. Pierwszy z nich prezentować będzie użycie display, a drugi visibility. Oba przykłady zawierać będą zdefiniowane trzy boxy z różnymi kolorami, gdzie dla środkowego boxa ustawiony zostanie odpowiedni atrybut widoczności.

display

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

visibility

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Różnicę bardzo łatwo jest zauważyć. W przypadku użycia display: none ukrywamy całkowicie środkowy box i znika on ze struktury HTML. Gdy używamy visibility: hidden, to wprawdzie element również znika, ale nie znika ze struktury HTML i zajmuje w pełni swoje miejsce.

Widocznością sterować możemy także z poziomu JavaScript:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pobieramy referencje do środkowego boxa oraz przycisku, a następnie tworzymy funkcję, która sprawdza, czy środkowy box jest widoczny lub nie i przypisuje odwrotną wartość do atrybutu display. Na końcu deklarujemy obsługę zdarzenia click dla przycisku i możemy się cieszyć możliwością ukrywania / pokazywania zielonego boxa.

Po więcej zapraszam oczywiście do materiałów na stronie w3schools. Zachęcam również do zapoznania się z biblioteką jQuery, która pozwala na dużo prostsze manipulowanie elementami HTML.

Transformacje 2D z wykorzystaniem CSS3 (CSS3 2D Transforms)

Ostatnim tematem wpisu są transformacje 2D, które możemy wykonać przy użyciu CSS3. Transformacje 2D wykonywane są w dwóch wymiarach i pozwalają zmieniać położenie, rozmiar oraz kształt elementów. Transformacje działają we wszystkich nowych wersjach przeglądarek, ale wymagają odpowiednich przedrostków dla atrybutu: transform:

  • Chrome, Safari, nowa Opera (15+) -webkit-
  • Firefox -moz-
  • Internet Explorer (9) -ms-
  • starsza Opera (< 15) -o-

Do dyspozycji mamy w zasadzie pięć funkcji, które przyjmowane są jako parametr dla transform (przykłady ze strony w3schools):

  • translate – przesunięcie względem osi X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Przesunięcie o 50px w prawo i 100px w dół.
  • rotate – obracanie elementu wokół własnej osi o zadaną liczbę stopni
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Obrót o 30 stopni względem wskazówek zegara. Podanie ujemnych wartości powoduje obrót przeciwny do wskazówek zegara.
  • scale – zmiana wielkości elementu względem wielokrotności wartości X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Powiększenie 2 razy w poziomie i 4 razy w pionie.
  • scew – odchylenie od osi X i Y wyrażane w stopniach
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Odchylenie o 30 stopni od osi X i o 20 stopni od osi Y.
  • matrix – kombinacja pozostałych czterech metod w jedną, gdzie ozostałe funkcje są w zasadzie jakąś wersją funkcji matrix i zarazem aliasem do niej
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Zapraszam do własnych eksperymentów!

70-480 – Wstęp do HTML5, JavaScript i CSS3

70-480

Jako, że zaczynam przygotowania do egzaminu 70-480, to potraktuję to miejsce jako zbiór swoich notatek oraz postaram się w ten sposób stworzyć materiał, który wykorzystać będzie mógł każdy, kto spróbuje swych sił z HTML5, JavaScript oraz CSS3.

Egzamin 70-480 ujęty jest w ścieżce certyfikacyjnej Microsoft i ma na celu zbadanie umiejętności zdającego w obszarach wykorzystania HTML5, CSS3 oraz języka JavaScript. Jest także częścią ścieżek:  MCSD: Web ApplicationsMicrosoft Specialist Certification. Zakres egzaminu określiłbym raczej jako podstawowy dla doświadczonej osoby, ale z racji darmowej możliwości wykorzystania vouchera, chętnie poświęcę trochę czasu i przygotuję się do niego, tworząc przy okazji gotowe kompendium.

Pełen zakres egzaminu oraz poszczególne artykuły można znaleźć na stronie: Egzamin 70-480 – Programming in HTML5 with JavaScript and CSS3

Postaram się poza tym, by wpisy były zwięzłe i opisywały tylko konkretne informacje. Tym samym zapraszam Was do całej ich serii.

Roundup #13 – VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

Roundup #13 - VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

VintageJS

vintageJS is a tool where you can upload your images and apply a custom retro, vintage look to them for free. Just try it out: upload your photo, apply the vintage effect and share the retro image it with your friends via Facebook or Twitter.

Vintage Effect for Photos with VintageJS jQuery Plugin


Bonsai

Bonsai is a JavaScript graphics library.
Bonsai’s main features include:

  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more…
Bonsai – A Powerful JavaScript Graphics Library

Bourbon

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.

Bourbon – A comprehensive library of sass mixins


ImageMapster

ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster – A jQuery plugin that activates HTML imagemaps


Base

A super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers.

A Simple, Responsive CSS Framework – Base


responsive-carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard.

responsive-carousel – A jQuery-based script for responsive carousels


Jarallax

Jarallax is an open-source JavaScript library which makes adjusting css based on interaction easy. With Jarallax it’s easy to create a parallax scrolling website.

Parallax Scrolling Made Easy – Jarallax


[1], [2], [3]

Roundup #12 – Mobiscroll, TideSDK, Terrific Composer, iView Slider, Tooltipster, Yeoman, Neat, Prefix free, This Is Responsive

Roundup #12 - Mobiscroll, TideSDK, Terrific Composer, iView Slider, Tooltipster, Yeoman, Neat, Prefix free, This Is Responsive

Mobiscroll

Mobiscroll is a powerful, easy to set-up HTML5 control, that makes selecting values for your smartphone & tablet users a breeze. It is an Open Source control built on solid ground with jQuery. It is your one-stop solution for everything scrollable list. Its customizable and modular nature provides a great foundation you can build on.

Mobiscroll – The customizable HTML5 spinner control for touch devices


TideSDK

Create multi-platform desktop apps with HTML5, CSS3 and JavaScript TideSDK formerly known as Titanium Desktop is the best way to create beautiful, unique desktop apps using your web development skills.

Create Desktop Apps With HTML5, CSS3 And JavaScript With TideSDK


Terrific Composer

Terrific Composer is a Frontend Development Framework specifically designed for building deluxe frontends based on the Terrific concept

Terrific Composer – A framework designed for building deluxe frontends


iView Slider

iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

iView Slider – A responsive slider with animated captions


Tooltipster

Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.

  • Supports HTML tags inside the tooltip
  • Lightweight and degradable
  • Extremely flexible & fast to set up
  • Easily styled with 100% CSS – no images needed
  • Plays nicely with IE
Good-Looking & Lightweight Tooltips: Tooltipster

Yeoman

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.


Neat

Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts. Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and store these values in project-wide variables to DRY up your code.

Bourbon Neat – A simple responsive grid framework built on top of Sass and Bourbon


Prefix free

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Break Free From CSS Prefix with -Prefix-free JS Plugin


This Is Responsive

This Is Responsive. Patterns, resources and news for creating responsive web experiences.

A Place To Find Any Information On Responsive Layouts: This Is Responsive


[1], [2], [3]

Roundup #10 – OpenKeyval, Socialist, Reveal, SwipeView, BookBlock, Happy, jsDraw2DX

Roundup #10 - OpenKeyval, Socialist, Reveal, SwipeView, BookBlock, Happy, jsDraw2DX

OpenKeyval

OpenKeyval is a completely open key-value data store, exposed as a drop-dead simple web service. The goal is to make this a very easy way to persist data in web applications.

OpenKeyval – Instant & Web-Based Database For Any Project


Socialist

Socialist is a jQuery social plugin that creates a social stream (or social “wall”) from multiple social media feeds in one place. Use it to pull content from Facebook pages, Twitter, LinkedIn, YouTube and other social. networks..

Socialist – A jQuery social media plugin


Reveal

reveal.js is a framework for easily creating beautiful presentations using HTML. You’ll need a browser with support for CSS 3D transforms to see it in its full glory.

The Beautiful HTML Presentation Framework


SwipeView

SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. It’s memory conservative as it uses only three elements at any given time, it’s smooth as velvet since it takes advantage of hardware acceleration, it’s bandwidth friendly with its 1.5kb minified/gzipped footprint.

SwipeView – Infinite Carousels For Mobile Web


BookBlock

A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

v


Happy

Yes, there a million form validation plugins already – but I like this approach and the good news is, if you don’t, you have other options. In fact, if you want something really full-featured for jQuery. Use this one. Personally I wanted something really lightweight and extendable (because it’s hard to be happy when you’re bloated).

Lightweight jQuery Form Validation Plugin: Happy.js


jsDraw2DX

jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers).

Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.

SVG Graphics Library For JavaScript: jsDraw2DX


[1], [2], [3], [4]

Roundup #9 – gridster, Avgrund Modal, Sequence, BigScreen, D3 Charts, Toast, SlabText

Roundup #9 - gridster, Avgrund Modal, Sequence, D3 Charts, Toast, SlabText

gridster

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

gridster.js – a jQuery plugin for building intuitive draggable layouts


Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Avgrund Modal


Sequence

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Sequence.js – The jQuery slider plugin with infinite style


BigScreen

BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you’re working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.

Full Screen Mode for Images & Videos in Web Apps


D3 Charts

In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.

MULTIPLE AREA CHARTS WITH D3.JS


Toast

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast – A simple responsive CSS framework


SlabText

SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

jQuery Plugin for Producing Bold Responsive Headlines


[1], [2], [3], [4]