Updated

Signed-off-by: Avior <github@avior.me>

src/Col/Col.module.styl

@@ -0,0 +1,55 @@
+@import "../config"
+
+.col
+	max-width 100%
+	flex-basis 0
+	flex-grow 1
+	padding $gapSize 0 0 $gapSize
+
+	&.nogrow
+		max-width initial
+		flex-grow 0
+		flex-basis initial
+
+for i in (0...$colCount+1)
+	.col-{i}
+		if i == 0
+			display none
+		else
+			flex 0 0 ((i / 12) * 100)%
+			min-width ((i / 12) * 100)%
+
+	if i != $colCount and i != 0
+		.offset-{i}
+			margin-left ((i / 12) * 100)% + (i * $gapSize + $gapSize)px
+
+@media (max-width $tablet)
+	.col.tabletGrow
+		flex-grow 1
+
+	for i in (0...$colCountTablet+1)
+		.col-tablet-{i}
+			if i == 0
+				display none
+			else
+				flex 0 0 ((i / $colCountTablet) * 100)%
+				min-width ((i / $colCountTablet) * 100)%
+
+		if i != $colCountTablet and i != 0
+			.offset-tablet-{i}
+				margin-left ((i / $colCountTablet) * 100)% + (i * $gapSize - $gapSize)
+
+@media (max-width $mobile)
+	.col.mobileGrow
+		flex-grow 1
+
+	for i in (0...$colCountMobile+1)
+		.col-mobile-{i}
+			if i == 0
+				display none
+			else
+				flex 0 0 ((i / $colCountMobile) * 100)%
+				min-width ((i / $colCountMobile) * 100)%
+		if i != $colCountMobile and i != 0
+			.offset-tablet-{i}
+				margin-left ((i / $colCountMobile) * 100)% + (i * $gapSize - $gapSize)

src/Col/DebugCols.module.styl

@@ -0,0 +1,12 @@
+.row
+	position fixed
+	top 0
+	left 0
+	height 100%
+	width 100%
+	z-index 10000
+	pointer-events none
+
+.col > div
+	background rgba(red, .2)
+	height 100%

src/Col/DebugCols.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import Row from '../Row'
+
+import css from './DebugCols.module.styl'
+
+import Col from '../Col'
+
+enum Breakpoint {
+	MOBILE,
+	TABLET,
+	COMPUT
+}
+
+interface States {
+	breakpoint: Breakpoint
+}
+
+
+export default class DebugCols extends React.Component<unknown, States> {
+
+	public state: States = {
+		breakpoint: Breakpoint.COMPUT
+	}
+
+	public componentDidMount() {
+		this.onResize()
+		window.addEventListener('resize', this.onResize)
+	}
+
+	public componentWillUnmount() {
+		window.removeEventListener('resize', this.onResize)
+	}
+
+	public render = () => (
+		<Row className={css.row}>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
+			{this.state.breakpoint !== Breakpoint.MOBILE && (
+				<>
+					{this.state.breakpoint !== Breakpoint.TABLET && (
+						<>
+							<Col size={1} className={css.col}><div></div></Col>
+							<Col size={1} className={css.col}><div></div></Col>
+							<Col size={1} className={css.col}><div></div></Col>
+							<Col size={1} className={css.col}><div></div></Col>
+						</>
+					)}
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+					<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
+				</>
+			)}
+		</Row>
+	)
+
+	private onResize = async () => {
+		const currentBreakpoint =
+			window.innerWidth <= 768 ?
+				Breakpoint.MOBILE :
+				window.innerWidth <= 1200 ?
+					Breakpoint.TABLET :
+					Breakpoint.COMPUT
+		const hasChanged = currentBreakpoint !== this.state.breakpoint
+		if (hasChanged) {
+			this.setState({ breakpoint: currentBreakpoint })
+		}
+	}
+
+}

src/Col/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { buildClassName } from '../Util'
+import css from './Col.module.styl'
+
+interface Props {
+	size?: 0|1|2|3|4|5|6|7|8|9|10|11|12
+	offset?: 1|2|3|4|5|6|7|8|9|10|11
+	children?: React.ReactNode
+	className?: string
+	nogrow?: boolean
+
+	// Tablet related
+	tabletSize?: 0|1|2|3|4|5|6|7|8
+	tabletoffset?: 1|2|3|4|5|6|7
+	tabletGrow?: boolean
+
+
+	// Mobile related
+	mobileSize?: 0|1|2|3|4
+	mobileoffset?: 1|2|3
+	mobileGrow?: boolean
+}
+
+export default class Col extends React.Component<Props> {
+
+	public render = () => (
+		<div className={buildClassName(
+			css.col,
+
+			// Normal
+			[css[`col-${this.props.size}`], typeof this.props.size === 'number'],
+			[css[`offset-${this.props.offset}`], this.props.offset],
+
+			// Tablet
+			[css[`col-tablet-${this.props.tabletSize}`], typeof this.props.tabletSize === 'number'],
+			[css[`offset-tablet-${this.props.tabletoffset}`], this.props.tabletoffset],
+
+			// Mobile
+			[css[`col-mobile-${this.props.mobileSize}`], typeof this.props.mobileSize === 'number'],
+			[css[`offset-mobile-${this.props.mobileoffset}`], this.props.mobileoffset],
+			[css.nogrow, this.props.nogrow],
+			[css.mobileGrow, this.props.mobileGrow],
+			this.props.className
+		)}>
+			{this.props.children}
+		</div>
+	)
+
+}