GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → StefanKovac → Flex Layout Attribute

StefanKovac / Flex Layout Attribute

Licence: mit
HTML layout helper based on CSS flexbox specification —

Labels

htmlcsslayoutflexbox

Projects that are alternatives of or similar to Flex Layout Attribute

how-to-css
howtocss.dev
Stars: ✭ 48 (-93.19%)
Mutual labels:  layout, flexbox
Flex Layout
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Stars: ✭ 5,705 (+709.22%)
Mutual labels:  layout, flexbox
nice-react-layout
Create complex and nice Flexbox-based layouts, without even knowing what flexbox means
Stars: ✭ 70 (-90.07%)
Mutual labels:  layout, flexbox
Core Layout
Flexbox & CSS-style Layout in Swift.
Stars: ✭ 215 (-69.5%)
Mutual labels:  layout, flexbox
Layout Demo
Various Layouts Of CSS
Stars: ✭ 264 (-62.55%)
Mutual labels:  layout, flexbox
Flexml
🚀基于Litho的Android高性能动态业务容器。
Stars: ✭ 225 (-68.09%)
Mutual labels:  layout, flexbox
StackViewLayout
Coming soon!
Stars: ✭ 26 (-96.31%)
Mutual labels:  layout, flexbox
Interfacss
The CSS-inspired styling and layout framework for iOS
Stars: ✭ 92 (-86.95%)
Mutual labels:  layout, flexbox
flexbin
Pure CSS, flexible and gapless image gallery layout like Google Images and 500px.com
Stars: ✭ 93 (-86.81%)
Mutual labels:  layout, flexbox
gymnast
🤸 Configurable grid and layout engine for React
Stars: ✭ 35 (-95.04%)
Mutual labels:  layout, flexbox
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+194.89%)
Mutual labels:  layout, flexbox
Flexbox React
Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
Stars: ✭ 319 (-54.75%)
Mutual labels:  layout, flexbox
Flexlib
FlexLib是一个基于flexbox模型，使用xml文件进行界面布局的框架，融合了web快速布局的能力，让iOS界面开发像写网页一样简单快速
Stars: ✭ 1,569 (+122.55%)
Mutual labels:  layout, flexbox
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (-96.17%)
Mutual labels:  layout, flexbox
Flexlayout
FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.
Stars: ✭ 1,342 (+90.35%)
Mutual labels:  layout, flexbox
griding
🧱 lean grid & responsive for react
Stars: ✭ 18 (-97.45%)
Mutual labels:  layout, flexbox
Flexbox
CSS library for easier work with flex boxes
Stars: ✭ 17 (-97.59%)
Mutual labels:  layout, flexbox
Allkit
🛠 Async List Layout Kit
Stars: ✭ 40 (-94.33%)
Mutual labels:  layout, flexbox
react-flex-columns
Easy layout columns for React - Using Flexbox under the hood.
Stars: ✭ 18 (-97.45%)
Mutual labels:  layout, flexbox
React Flexview
A powerful React component to abstract over flexbox and create any layout on any browser
Stars: ✭ 276 (-60.85%)
Mutual labels:  layout, flexbox
View All Similar Projects ➔

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>

Try live — interactive demo

View demo

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

  1. Insert flex-layout-attribute.min.css in document HEAD:
<link href="path/to/css/flex-layout-attribute.min.css" rel="stylesheet">
  1. Add layout attribute to html elements:
<div layout="row center-justify">
    ...
</div>

Development

  1. Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
  2. Install dependencies: npm run setup.
  3. 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].