58 packages found
Svelte component to display image sets generated by web-image-gen.
LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leve
- lazyload
- vanilla
- responsive
- images
- picture
- srcset
- sizes
- native
- SEO
- intersectionObserver
- progressive
- performance
- perfmatters
- async
Global solution for responsive images in Eleventy, allowing authors to use Markdown syntax for image and yet get responsive images in generated HTML.
- static-site-generator
- static-site
- website
- blog
- generator
- eleventy
- eleventy-plugin
- 11ty
- html
- markdown
- image
- images
- responsive
- RWD
- View more
Global solution for responsive images, transforming simple image HTML syntax into better responsive images syntax.
The Fylgja Sizes offers Design Tokens (CSS props) for consistent and semantic sizes, in typography, spacing and general sizes
Create and compare files stats, and webpack bundle stats
Hoc to easily map window sizes to props.
Use advanced shorthand properties in CSS
- postcss
- css
- postcss-plugin
- shorthands
- asterisks
- colors
- backgrounds
- margins
- paddings
- spacings
- positions
- sizes
- sizings
- min-sizes
- View more
Body measurements data for a range of default sizes
a tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce or custom memo function for updates for optimal rendering.
gulp-compass-imagehelper clone for webpack
Modern responsive web image generation and tooling
A Sass function that helps you to define a perfectly responsive value without any effort
- responsive
- css
- scss
- scss tool
- scss function
- scss goody
- scss utility
- scss helper
- sass
- fab-unit
- fabunit
- typo
- fluid
- sizes
- View more
Create different images sizes.
PostHTML plugin which generates 'srcset' and 'sizes' attributes according to configured presets
Extend HTML image tags with srcset and sizes attributes to leverage native responsive images.
Responsive Screen Sizes built with Bootstrap 5. Check default pixel widths for different screen sizes supported by Bootstrap 5 responsiveness features.
A simple SCSS Media Query Library based on the Bootstrap sizing widths
RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be displayed. Try it!
- react
- hooks
- hook
- react-hooks
- window
- resize
- viewport
- viewport-sizes
- sizes
- dimensions
- typescript
- render
- validation
a tiny React hook which allows you to track state of open/close soft keyboard in mobile