Giter Site home page Giter Site logo

pyrokinesisstudio / lef_responsive_grid Goto Github PK

View Code? Open in Web Editor NEW

This project forked from s-leger/lef_responsive_grid

1.0 2.0 0.0 116 KB

Typo3 extension of bootstrap_package and gridelements provides grids with extended support for responsive images

PHP 93.71% CSS 3.56% JavaScript 2.73%

lef_responsive_grid's Introduction

lef_responsive_grid gridelements compagnion for lef_responsive_images

A typo3 bootstrap_package extension to allow real image width generation for any breakpoint in fluid design

Currently, typo3 core only allow to set width of images without any layout relationship.

This ends up into providing images far larger than client would have needed (think about a picture in a 6 column layout rendered at 1200 / 600 / 300 px while only making 100px). Not only this consume bandwidth, but also energy to downsize images in the browsers.

Providing some care, it's possible to pre-compute real image size in nearly every layout for every breakpoint. Adding full support for correct img srcset and picture tag, and data-attributes lazyload solution, and css background.

The cons :

  • Precomputing 5 to 10 images (breakpoints +1) * 2 if retina can be time consuming on first load of the page.
  • Configuration to take account of grid system, breakpoints, and content frames.
  • Adapting templates to make system aware of layout.
  • Not artistic direction friendly (but there is currently no one in typo3)

The pros :

  • Less bandwith
  • Less energy
  • Less time to load
  • Automagic once configuration done, but with standards grids setups it should be ok right out of the box.

Why not ? Who wants it ?

lef_responsive_grid's People

Contributors

s-leger avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.