• Stars
    star
    1,138
  • Rank 40,938 (Top 0.9 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 11 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CSS only Gallery

Gallery.css

Gallery.css is all CSS. Think: Simple, maintainable and understandable galleries without the use of Javascript.

What? No script!? Why? β€” Gallery css started as an experiment to build interactive, fluid componentry without the need for jQuery, or a jQuery carousel script. Use this library, or don't β€” either way, hopefully you'll learn from the techniques used within.

Installation

The preferred method to install gallery-css is by using Bower, a package manager for front-end components.

bower install gallery-css

Otherwise, if you want to keep it simple, check the dist directory.

Getting started

You've got a couple options with how you'd like to use gallery.css:

* Without autoplaying animation
* With autoplaying animation
* With or without browser prefixes

Read the getting started guide, or checkout the examples

How does it work?

Gallery CSS screencast: Building advanced web componentry using only CSS

I've prepared a screencast that will take you through how to build something like Gallery-css from scratch, theres tonnes of tiny details that I learnt myself while building it. Its $15, you'll learn and it'll help me keep building for the web. How good is that?

Browser support

Safari Firefox Chrome IE8 IE9 IE10
βœ” βœ” βœ” βœ–β€  βœ” βœ”

† Absolutely possible using a variety of JS selector shims, although not recommended.

Build instructions

Gallery CSS is built using grunt & RubySASS.

You'll need:

  • Ruby (and sass - gem install sass)
  • Run npm install from the root directory.
  • To run a build, you'll simply need to run grunt.

More Repositories

1

metaquery

A declarative responsive web design syntax. Breakpoints, defined in `<meta>`
JavaScript
324
star
2

passenger-stack

Sprinkles for Apache, Passenger, Memcached, Git, Mysql or Postgres
Ruby
315
star
3

bonsai

A tiny static web site generator
Ruby
296
star
4

currency.io

An offline-capable, html5 currency converter app for the iPhone
JavaScript
296
star
5

sublime-bower

Install Bower packages from within Sublime
Python
228
star
6

developers.whatwg.org

Used to create the contents of developers.whatwg.org
198
star
7

amnesia

A Sinatra rack middleware that presents memcached server stats
Ruby
177
star
8

am-grid

Experiemental attribute module grid system
CSS
81
star
9

cache.js

localStorage with timed expiry
JavaScript
55
star
10

smoke

It isn't ready yet
Ruby
47
star
11

bonsai-site

The Bonsai web site source
JavaScript
29
star
12

open-uri-memcached

Ruby's OpenURI with Memcached for caching
Ruby
24
star
13

bom-weather

Weather from the Australian Bureau of Meteorology
Ruby
24
star
14

w3c-spec-styles

An alternate stylesheet for W3C specification pages
JavaScript
23
star
15

heroku-electron-buildpack

Shell
20
star
16

postie

A Sinatra based Rack middleware that provides Australian postcode information via JSON
Ruby
18
star
17

responsive-sass

The source files to a screencast
Ruby
12
star
18

choones

A jQuery plugin to provide monologue style messaging. Inspired by Growl's music video theme.
JavaScript
11
star
19

bower-badges

Show that your project is available in Bower by using a bower badge!
JavaScript
11
star
20

registry

For dirt simple plugin architecture
Ruby
11
star
21

skeet

a heroku ready screen shot application
Ruby
11
star
22

leonardo

A simple ass, half done sparkline graph using Raphael
JavaScript
9
star
23

yahoo-stock

A Yahoo! stocks scraper
Ruby
9
star
24

muxtape-rb

A ruby based gem to download muxtapes
Ruby
9
star
25

grid

A tiny grid system.
Ruby
9
star
26

gifcity

JavaScript
9
star
27

munch

A simple sinatra app to test yahoo pipes to pull down recipes from many web sites
Ruby
9
star
28

transcoder

Transcode from common web based formats into plain old Ruby
Ruby
9
star
29

chrome-request-interception

JavaScript
9
star
30

html5forAuthors

HTML5 (Edition for Web Authors)
JavaScript
8
star
31

rack-smoke

Expose Smoke sources and transcode them into JSON, XML or YAML
Ruby
7
star
32

flickr-rest

A light interface to call flickr 'restful' api methods
Ruby
7
star
33

HTML5.tmbundle

Ruby
7
star
34

flickr-wrapper

A dead project. Here for nostalgia and reference
Ruby
6
star
35

homebrew-sassc

Ruby
6
star
36

Hillegass-Macruby

Cocoa Programming for Mac OS X examples rewritten for MacRuby
Ruby
5
star
37

watch

A simple directory watcher
Ruby
4
star
38

ae

A rack middleware to allow for accessibility on any page.
4
star
39

gitnotify

Enables a post-commit hook to your repositories that sends growl notifications around your local network
Ruby
4
star
40

benschwarz-site-v2

My *new* web site
Ruby
3
star
41

railscamp-13

JavaScript
3
star
42

attr-chain

attr_chain for chainable, single method attribute (get|setters)
Ruby
2
star
43

openuri_recorder

Its like a VCR for the web that you can take on the plane with you
Ruby
2
star
44

benschwarz

2
star
45

smoke-manual

A book about smoke, the ruby dsl
Ruby
2
star
46

html5-workshop-site

The web site from which I'll release details about my HTML5 workshop
JavaScript
1
star
47

dotjs

My ~/.js extensions
JavaScript
1
star