Grid based on CSS3 flexbox

Related tags

CSS flexboxgrid
Overview

Flexbox Grid

flexboxgrid.com

Grid based on the flex display property.

Install

npm

npm i flexboxgrid --save

bower

bower install flexboxgrid

cdn

CDNJS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >

css

Add the flexboxgrid.css development or flexboxgrid.min.css production to your html page.

<link rel="stylesheet" href="css/flexboxgrid.min.css" type="text/css">

Inspiration

Comments
  • Implement and document `hide-` classes

    Implement and document `hide-` classes

    As requested in #138, I've implemented and documented some classes that provide the ability to hide or show content based on viewport size.

    The classes are:

    • hide-xs, hide-sm, hide-md, hide-lg: Hide only on the viewports specified.
    • hide-sm-up: Same as hide-sm hide-md hide-lg.
    • hide-md-up: Same as hide-md hide-lg.
    • hide-sm-down: Same as hide-xs hide-sm.
    • hide-md-down: Same as hide-xs hide-sm hide-md.

    New documentation visible at: http://derflatulator.github.io/flexboxgrid/#hiding

    There is no real need for show- classes, as at most two hide- classes would be required for any configuration.

    opened by azz 13
  • 7.0

    7.0

    Opening this PR so people can follow along with the progress since 7.0 will be a major change. it will:

    • [ ] Add multiple source files
      • [x] CSSNext
      • [x] Sass
      • [ ] Less
      • [ ] Stylus
    • [x] Move all marketing site code to gh-pages branch ONLY
    • [ ] Create an examples repo
    • [ ] Update flexboxgrid.com
      • [ ] Add browser support badge
    opened by kristoferjoseph 12
  • Grid broken in IE 10+

    Grid broken in IE 10+

    Tested in IE11 - (VM available from modern.ie)

    Broken Grid.

    Removing the padding from the column/offset classes corrects the grid, but clearly the padding is required for the gutters.

    Fixed grid

    opened by benschwarz 12
  • "display:-webkit-box;" causes issue in newer version of Safari

    From what I can gather, this set of rules present on .row:

    display:-webkit-flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:flex;
    

    ...causes issues in newer version of safari. Here's the details...

    I'm viewing a site using flexbox grid in Safari 9.

    Because safari ignores the display:flex; rule, it falls back to display:-webkit-box. But, since that rule is specific to older versions of safari, it does nothing.

    Yet, even though it does nothing, the browser doesn't continue to fall back to the display:-webkit-flex declaration... so the elements with class .row remain "unflexed".

    I suspect the fix is to simply re-order the rules like so...

    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    
    opened by kristianwithak 11
  • Support old flexbox syntax?

    Support old flexbox syntax?

    Android stock browser still uses old syntax, as well as a few other randoms out there. With just a few tweaks to your css, you could support them. Do you guys want/plan that for this tool, or is this new syntax support only?

    I found that box-pack and box-orient just needed to be changed, and all else seemed to work. Thought I'd throw this on the radar.

    opened by argyleink 11
  • Prefer widths under 100%

    Prefer widths under 100%

    Usage of 16.667% can lead to widths totaling up to greater than 100%, forcing columns to the next row on certain widths:

    Example fiddle: http://jsfiddle.net/c9dymmy1/ Example fiddle with this branch: http://jsfiddle.net/0k2jpbdL/1/

    Bootstrap gets around this by rounding differently on left/right padding but we're using rems there instead, so we can't do the calculation ahead of time.

    opened by stephen 10
  • How to implement full-width layouts?

    How to implement full-width layouts?

    If one was to implement this: http://getbootstrap.com/examples/dashboard/

    Making the root element a row enables horizontal scrolling due to: https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css#L42-L43

    Making the root element a container-fluid like bootstrap then making the next level a row leaves padding space on the sides.

    Any reason for the negative margin on row?

    opened by rayshan 10
  • The .container's width is too large

    The .container's width is too large

    The .container variant of flexboxgrid has some issues regarding its width:

    1. If you make the screen smaller, you'll notice a horizontal scrollbar appearing
    2. At the exact breakpoints (e.g. 1200px) the .container-fluid and .container aren't aligned, the .container doesn't have the --outer-margin

    See http://codepen.io/ckuijjer/pen/xwENJv for this issue.

    opened by ckuijjer 9
  • How to have boxes of equal height inside a row

    How to have boxes of equal height inside a row

    Hi,

    I would like to have equal size blocks inside of a container (row), how is it possible with flexboxgrid? Should be achievable using the syntax align-items: stretch on the container

    opened by Kerruba 8
  • preprocessor agnostic gutter configuration

    preprocessor agnostic gutter configuration

    currently can't see a good way to use npm install to install flexboxgrid if you also need to adjust the gutters.

    Kind of sucks there's not really a good way to expose user-configurable variables for style components, even with preprocessors. Not sure a good pre/post processor-agnostic solution other than exposing a css generator and allowing users to pass in the gutter sizes as variables. Perhaps a cli app?

    In my case, I want to remove the gutter completely because the gutter makes certain styles impossible, so perhaps the simplest thing that would work would be special-casing zero gutters (due to aforementioned restriction) and including a zero gutters version in the distribution.

    opened by timoxley 8
  • Remove gh-page specific files from master

    Remove gh-page specific files from master

    Currently we add all of the files needed to for the gh-page as well as the grid in the master branch. After seeing a few projects that accidentally include the flexboxgrid.com code I am thinking only having the grid code in master is a better idea.

    Since I have been the only person updating the site it makes sense to just pull in PRs by hand.

    opened by kristoferjoseph 8
  • You can reduce css size

    You can reduce css size

    Hi . You can use *[class*="col-xs"] instead of using bellow codes :

    .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12

    and you can do it for md and lg and other sizes and reduce css file size .

    opened by mrlaseptima 0
  • space-evenly

    space-evenly

    Briefly ( tweet size ) describe your issue and how you discovered it.

    The justify-content: space-evenly; is missing

    Expected behavior

    full functionality

    Actual behavior

    not there

    You could simply add via: .evenly-lg .evenly-md .evenly-sm .evenly-xs { justify-content: space-evenly;}

    I did it by myself, works great and is no work :-)

    opened by JLO2801 0
  • Improve Docs

    Improve Docs

    Description

    ...

    Check List

    instruction : terminal command

    • [ ] run the build script grunt
    • [ ] open index.html in a browser & resize to test visual issues
    opened by pandeysujan-44 0
  • upgrade package.json and fix errors @extends within @media

    upgrade package.json and fix errors @extends within @media

    Description

    • upgrade package.json
    • fix errors @extends within @media

    ...

    Check List

    instruction : terminal command

    • [x] run the build script grunt
    • [x] open index.html in a browser & resize to test visual issues
    opened by ngnam 0
  • Added gutter collapse capability

    Added gutter collapse capability

    Description

    ...

    Check List

    instruction : terminal command

    • [ ] run the build script grunt
    • [ ] open index.html in a browser & resize to test visual issues
    opened by willmarple-ba 0
Owner
kj
Dream ⌁ Create ⌁ Collaborate
kj
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A new flexbox based CSS micro-framework.

Strawberry CSS What Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox's utilities focused on making your life easier and

Andrea Simone Costa 74 Sep 26, 2022
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

Selectivizr CSS3 selectors for IE 6-8 selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explor

Keith Clark 1.7k Dec 18, 2022
Jason Johnston 2.8k Dec 26, 2022
A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

Chad Mazzola 1.3k Nov 8, 2022
Semantic is a UI component framework based around useful principles from natural language.

Semantic UI Semantic is a UI framework designed for theming. Key Features 50+ UI elements 3000 + CSS variables 3 Levels of variable inheritance (simil

Semantic Org 50.3k Dec 31, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
A markdown based documentation system for style guides.

Hologram Hologram is a Ruby gem that parses comments in your CSS and helps you turn them into a beautiful style guide. There are two steps to building

Trulia, LLC. 2.2k Nov 12, 2022
Markdown-based styleguide generator

Styledown Write maintainable CSS styleguides efficiently using a Markdown. See example ▸ Installation $ npm install -g styledown $ styledown --help Ho

Styledown 674 Nov 21, 2022
Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects. inuitcss is a framework in its truest sense: it does not pro

inuitcss 1.8k Dec 30, 2022
Text-based user interface CSS library

TuiCss Text-based user interface CSS library -- Documentation -- About TuiCss is a library focused to create web applications using an interface based

Vinicius Reif Biavatti 1.2k Jan 2, 2023
Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

Joash 587 Jan 2, 2023
A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

Roman Nurik 21 Oct 9, 2022
Config-based action debouncing made easy

Pinia Debounce Debounce any action in your pinia ?? store! This is also a very good example of how to create a pinia plugin and how to type it. Instal

Eduardo San Martin Morote 40 Dec 5, 2022
Apply CSS based on your browser's text rendering engine

Type Rendering Mix Type Rendering Mix website Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user ag

Bram Stein 496 Dec 6, 2022
Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

null 11 Jan 1, 2023
A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

Yash Sehgal 17 Aug 8, 2022
A modern, responsive CSS boilerplate library to kickstart any web-based project.

Peacock CSS Peacock is a modern, responsive CSS boilerplate library to kickstart any web-based project. It is simple, lightweight and it contains all

Binary Birds 8 Jan 23, 2022
Grid based on CSS3 flexbox

Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS <

kj 9.3k Dec 31, 2022
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.

tb-grid Lightweight (<1kb gzipped) 12 column grid system, built with css grid. ?? Demos & Playground Have a look at those examples: Main Demo: https:/

Taskbase 26 Dec 28, 2022