Bootstrap grid system PoC in QML

colattachedtype.cpp

#include "colattachedtype.h"
#include <QQuickItem>
#include <QQuickWindow>
#include <QQmlInfo>

ColAttachedType::ColAttachedType(QObject* parent) :
	QObject{parent},
	m_item{qobject_cast<QQuickItem*>(parent)}
{
	if (!m_item) {
		qmlInfo(parent) << "Col must be attached to an Item";
		return;
	}
	connect(m_item, &QQuickItem::windowChanged, this, &ColAttachedType::handleWindowChange);
	connect(m_item, &QQuickItem::parentChanged, this, &ColAttachedType::handleParentChange);
	handleParentChange();
	handleWindowChange();
}

int ColAttachedType::xs() const
{
	return m_xs;
}

void ColAttachedType::setXS(int xs)
{
	if (m_xs == xs)
		return;

	m_xs = xs;
	emit xsChanged();
}

int ColAttachedType::sm() const
{
	return m_sm;
}

void ColAttachedType::setSm(int sm)
{
	if (m_sm == sm)
		return;

	m_sm = sm;
	emit smChanged();
}

int ColAttachedType::md() const
{
	return m_md;
}

void ColAttachedType::setMd(int md)
{
	if (m_md == md)
		return;

	m_md = md;
	emit mdChanged();
}

int ColAttachedType::lg() const
{
	return m_lg;
}

void ColAttachedType::setLg(int lg)
{
	if (m_lg == lg)
		return;

	m_lg = lg;
	emit lgChanged();
}

ColAttachedType* ColAttachedType::qmlAttachedProperties(QObject* object)
{
	return new ColAttachedType(object);
}

void ColAttachedType::handleWindowChange()
{
	if (m_window)
		disconnect(m_window, &QQuickWindow::widthChanged, this, &ColAttachedType::updateWidth);

	m_window = m_item->window();
	if (m_window) {
		connect(m_window, &QQuickWindow::widthChanged, this, &ColAttachedType::updateWidth);
		if (m_parent)
			updateWidth();
	}
}

void ColAttachedType::handleParentChange()
{
	if (m_parent)
		disconnect(m_parent, &QQuickItem::widthChanged, this, &ColAttachedType::updateWidth);

	m_parent = m_item->parentItem();
	if (m_parent) {
		connect(m_parent, &QQuickItem::widthChanged, this, &ColAttachedType::updateWidth);
		if (m_window)
			updateWidth();
	}
}

void ColAttachedType::updateWidth()
{
	int windowWidth = m_window->width();
	qreal parentWidth = m_item->parentItem()->width();

	if (windowWidth >= 1200 && m_lg) {
		m_item->setWidth(parentWidth * m_lg / 12);
		return;
	}
	if (windowWidth >= 992 && m_md) {
		m_item->setWidth(parentWidth * m_md / 12);
		return;
	}
	if (windowWidth >= 768 && m_sm) {
		m_item->setWidth(parentWidth * m_sm / 12);
		return;
	}
	if (m_xs) {
		m_item->setWidth(parentWidth * m_xs / 12);
		return;
	}
	m_item->setWidth(parentWidth);
}

static void registerColTypes()
{
		qmlRegisterUncreatableType<ColAttachedType>("fr.grecko.Col", 0, 1, "Col", "Col is only available via attached properties");
}

Q_COREAPP_STARTUP_FUNCTION(registerColTypes)

colattachedtype.h

#ifndef COLATTACHEDTYPE_H
#define COLATTACHEDTYPE_H

#include <QObject>
#include <QtQml>
class QQuickItem;
class QQuickWindow;

class ColAttachedType : public QObject
{
	Q_OBJECT
	Q_PROPERTY(int xs READ xs WRITE setXS NOTIFY xsChanged)
	Q_PROPERTY(int sm READ sm WRITE setSm NOTIFY smChanged)
	Q_PROPERTY(int md READ md WRITE setMd NOTIFY mdChanged)
	Q_PROPERTY(int lg READ lg WRITE setLg NOTIFY lgChanged)


public:
	explicit ColAttachedType(QObject* parent = nullptr);

	int xs() const;
	void setXS(int xs);

	int sm() const;
	void setSm(int sm);

	int md() const;
	void setMd(int md);

	int lg() const;
	void setLg(int lg);

	static ColAttachedType* qmlAttachedProperties(QObject* object);

signals:
	void xsChanged();
	void mdChanged();
	void lgChanged();
	void smChanged();

private slots:
	void handleWindowChange();
	void handleParentChange();
	void updateWidth();

private:
	QQuickItem* m_item;
	QQuickItem* m_parent = nullptr;
	QQuickWindow* m_window = nullptr;
	int m_xs = 0;
	int m_sm = 0;
	int m_md = 0;
	int m_lg = 0;
};

QML_DECLARE_TYPEINFO(ColAttachedType, QML_HAS_ATTACHED_PROPERTIES)

#endif // COLATTACHEDTYPE_H

usage.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import fr.grecko.Col 0.1

ApplicationWindow {
    id: window
    visible: true

    Flow {
        width: parent.width
        height: parent.height
        Rectangle {
            color: "green"
            height: 60
            Col.lg: 4
            Col.md: 6
            Col.sm: 8
            Col.xs: 1
        }
        Rectangle {
            color: "yellow"
            height: 60
            Col.lg: 4
            Col.md: 6
        }
        Rectangle {
            color: "red"
            height: 60
            Col.lg: 4
            Col.md: 6
            Col.sm: 8
        }
    }
}