stefankovac / flex-layout-attribute Goto Github PK

View Code? Open in Web Editor NEW

714.0 26.0 57.0 46 KB

HTML layout helper based on CSS flexbox specification —

Home Page: http://progressivered.com/fla/

License: MIT License

CSS 91.46% JavaScript 8.54%

flexbox layout css html fla attribute

flex-layout-attribute's Introduction

Flex Layout Attribute (FLA)

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self.

Basic example

Items distributed in a row and centered within container:

<div layout="row center-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Benefits

Dedicated HTML attribute — separated layout markup, semantic & concise syntax.
Beyond grids — ratio relationships, element sizes based on a scale.
Rapid prototyping — design in browser, quick iterations, no need to write CSS for layout.
Solid base — ease to extend and customize.

Quick start

Several quick start options are available:

Download the latest release
Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
Install with npm: npm install flex-layout-attribute.

Usage

Insert flex-layout-attribute.min.css in document HEAD:

<link href="path/to/css/flex-layout-attribute.min.css" rel="stylesheet">

Add layout attribute to html elements:

<div layout="row center-justify">
    ...
</div>

Development

Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
Install dependencies: npm run setup.
Build FLA: gulp or set watcher: gulp watch

Learn more

Interactive demo, documentation and snippets — http://progressivered.com/fla/

License

FLA is released under the MIT license.

flex-layout-attribute's People

Contributors

Stargazers

Watchers

Forkers

kikesan debuggerpk quatmo mohitsadaria edisplay jpkcom kapustis marufsiddiqui pandahisham zptcsoft chrisemoulton gonzalotorreras bonifico cargarg7 jsaddict kublaj underfire9 eguitarz fernanz umarmughal fiatluox katiadobra lesleyandrez metaphacts parfienczyk waynecz nullnotfound mankorn lilchow damianrk laxiston manta151 sebconejo cncowboy tony-jones davidmr001 fourpixels forkprogram resfront 471118842 chardy guidanceprod jmouriz stantoxt carlguo2016 hanxu317317 linebreaker pwfoo felixblue nickhollow cjl5678 drhisham-code jwebdev06 heckme muhamadsuryanegara

flex-layout-attribute's Issues

[question] Bower or Npm?

This is awesome.

Like really awesome.

I first saw a sort of this technique while inspecting Material Design Icons Page, since then I've always have a file like this to quick prototype for clients

But this is hole other level! 💥

Are you considering support package managers?

Thanks.

Websites created with FLA?

Hey guys, if you've used FLA or found a website created with FLA, please share a link in the comments ;)

Let's start:

Browser Support??

What browsers has this been tested on? Perhaps future versions could have flexibilty integration?

Why not use “align-self:flex-start” instead of “top”？

"margin-bottom: auto" had no effect in some browsers

Hello,
your idea, working with additional syntax in div element, is very good. But what about the W3C Validation.
I tried it on my own and W3C gives me the following Error: "Error: Attribute layout not allowed on element div at this point."

Browser support?

Hi, looks great! Thank you for sharing our work here :)

I see the display: -ms-flexbox;, but it seems not work with ie10.
Tested your demo with chrome, ff, ie11, edge and older ie versions (ietester).

Modern browser work fine!
But would ie10 support (old syntax) possible? ie 8 / 9 could be optional done with flexibility maybe...

You should add some (cross) browser support information to the readme file. ;)

Edge performance problems

Hi Stefan!
There's a known performance problems for rendering attribute rules by Edge. A dedicated research (here)[https://medium.com/@andreygoncharov/edge-hates-you-attributes-d15faf162939]. Would you consider moving to classes in the next major version?

Baseline aligment missing.

Hey @StefanKovac,

can you add baseline, so that one can use for e.g. bottom-justify?

Attribute selector performance over class selectors

I really like the concept of this library! Traditionally though attribute selectors have been known to be a lot slower than classes as they are universal selectors. I'm curious, have you done any performance tests to see if there is a big difference?

Centering seems to have failed in the online demo

I was just playing around in the nice, and slightly addictive demo, until this state, where item 2, which claims to be centered, isn't. (I thought it may be vertical centering only, but item 1 has its horizontal position similarly displayed, and the parameter list also says "center" for the horizontal position.)

If it's indeed a problem, I think it happened right after setting "left" to item 1.

Anyway, HTH. Very nice work, nonetheless!

Bower package

I see you're on npm but could you please make a Bower package too?

Thanks

Choose width of main container

Maybe I am missing something obvious (it is probably intentionaly left out), but I believe it would be a good addition.

I would like to choose different widths for the main flex container, along with the option to have it horizontally centered.

The way it is now, it always defaults to 100%(then again, maybe I am missing something). It would be nice to have an option to choose let's say 70% width and center it. Also, maybe to use the already predefined widths for sm-, md- and lg-.

p.s. Almost forgot to add. Thanks for the great library, I am using this in production on two sites I am working on now !

The latest version problem on npm

Hello @StefanKovac,
I am the member of cdnjs project.
We want to host this library.
I downloaded the latest version v1.0.2, but I found the version description of files such as flex-layout-attribute.min.css, flex-layout-attribute.css which downloaded from npm were wrong, and the version description is still v1.0.1. Could you update the latest version description on npm?
Thanks very much!

cdnjs/cdnjs#8174

Explicit size weirdly always operates on width

If size-x<n> rules use flex to size along the main flex axis, then conceptually size-<n>of<m> rules should also work on the main flex axis. Instead, they are locked to always work on width, i.e., always on the horizontal axis, even for layouts that use column direction.

Attributes do not work with ReactJS

Hey,
The "layout" and "self" attributes do not work with React, because it removes them automatically.
I tried to change the names in "_vars.scss" file, but it's still not working.

There is a workaround in React to include "custom" attributes by writing:
<div is layout="row center center"> but it's not as clean as data-attributes.
Is it possible that the names of the attributes are hard-coded ?