responsive-elements

KO | EN

gitlite — search

#react #ai #llm #macos #java #nodejs #windows #cli #vue #pytorch #security #mcp #ios #open-source

responsive-elements

(★ 1,256)

Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It's a tiny javascript library that you can drop into your projects today.

File Explorer

Download Latest Version (.zip)

- buster.js
- tests.js
- - css3-mediaqueries.js
  - jquery-ui-touch-punch.js
  - jquery.js
  - style.css
  - style.sass
- index.html
.gitignore
bower.json
LICENSE
README.md
responsive-elements.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

##Responsive Elements
Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It's a tiny javascript library that you can drop into your projects today.

Feedback, bugs, questions? [email](mailto:contact@kumailht.com) me, I'll respond quickly, promise!

###Example
- [Responsive Elements Homepage](http://kumailht.com/responsive-elements/)

###Usage

####1. Load jQuery and `responsive-elements.js` right before your closing `</head>` tag

```html
<script src="jquery.min.js"></script>
<script src="responsive-elements.js"></script>
```

####2. Explicitly declare which elements you want to be responsive using a data-respond attribute

```html
<div class="quote" data-respond>
```

####3. Use 'less than' and 'greater than' classes as breakpoints to write responsive CSS
```css
.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red}
```

####4. Optionally declare start, end and interval values on your `data-respond` attribute to control breakpoint generation
```html
<div class="quote" data-respond="start: 100px; end: 900px; interval: 50px;">
```
- Start: What pixel value should breakpoint generation start at
- End: What pixel value should breakpoints end at
- Interval: How many pixels between breakpoints

responsive-elements

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

responsive-elements

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README