stefankovac / flex-layout-attribute Goto Github PK
View Code? Open in Web Editor NEWHTML layout helper based on CSS flexbox specification —
Home Page: http://progressivered.com/fla/
License: MIT License
HTML layout helper based on CSS flexbox specification —
Home Page: http://progressivered.com/fla/
License: MIT License
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 ?
I see you're on npm but could you please make a Bower package too?
Thanks
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!
"margin-bottom: auto" had no effect in some browsers
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.
Hey @StefanKovac,
can you add baseline, so that one can use for e.g. bottom-justify
?
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."
Does this invalidate the HTML?
What browsers has this been tested on? Perhaps future versions could have flexibilty integration?
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. ;)
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!
Hey guys, if you've used FLA or found a website created with FLA, please share a link in the comments ;)
Let's start:
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?
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?
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 !
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
Are you considering support package managers?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.