Description
A fluid grid of square units using HTML and CSS.
Fluid Squares preserves a unit's square proportion within a fluid layout. The number of columns also reduce to suit browser or device width using CSS media queries.
It works on all modern desktop browsers. Media queries are written Mobile First. IE8 doesn't support media queries, so the css3-mediaqueries.js polyfill is temporarily included.
See www.fluidsquares.com for more.
Fluid-Squares alternatives and similar libraries
Based on the "Boilerplates" category.
Alternatively, view Fluid-Squares alternatives based on common mentions on social networks and blogs.
-
html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites. -
Wasp
The fastest way to develop full-stack web apps with React & Node.js. -
Cerberus
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail. -
mobile-boilerplate
A front-end template that helps you build fast, modern mobile web apps. -
React PWA
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience. -
webplate
Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really easy to use. -
Mobile-First-RWD
An example of a mobile-first responsive web design -
full-page-intro-and-navigation
An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Fluid-Squares or a related project?
README
Fluid-Squares
What is it?
A fluid grid of square units using HTML and CSS.
Fluid Squares preserves a unit's square proportion within a fluid layout. The number of columns also reduce to suit browser or device width using CSS media queries.
It works on all modern desktop browsers. Media queries are written Mobile First. IE8 doesn't support media queries, so the css3-mediaqueries.js polyfill is temporarily included.
See www.fluidsquares.com for more.
What problem does Fluid Squares fix?
Without a fix, the result of reducing a browser window's width squashes a fluid grid's squares into rectangles.
To fix this each unit's padding-bottom size is set to match its width in percentages. On top of that each unit is a percentage of the global container to determine how many columns there are.
Setting a unit's width to 25% and padding-bottom to 25% will give you four units in a row that will remain square regardless of screen size or browser window resizing.
The ingredients
HTML
The basic structure of each unit is a div for content, which is nested in an anchor element:
<a href="url">
<div>content</div>
</a>
If you don't want the entire unit to be a link, a class has been created for that purpose. Just remove the anchor element and add class="category" to the div instead.
<div class="category">content</div>
CSS
Media queries control the number of columns displayed (1, 2, 3, and 4) on browser resize, as well as providing fine control over font sizes.
It includes a cut down CSS reset to suit this bare bones grid. Replace with a fresh Reset or Normalize and customise to suit your own needs.
No wrapper?
It uses the body tag as a wrapper, but would certainly work within a standard div wrapper or HTML5 block elements.