📒 docs(columns): Started working on column docs

.vscode/snippets.code-snippets

@@ -0,0 +1,25 @@
+{
+	// Place your Cirrus workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"Create CodeBlock": {
+		"scope": "javascriptreact ,typescriptreact ",
+		"prefix": "cb",
+		"body": [
+			"<CodeBlock code={``} language='htmlbars' />"
+		],
+	}
+}

cirrus-docs/src/App.tsx

@@ -44,6 +44,7 @@ import {
 import { GridGapPage, GridSpanPage, GridTemplatesPage } from './pages/grid';
 
 import './App.scss';
+import { ColumnsPage } from './pages/layout';
 
 function App() {
     library.add(fas);
@@ -101,6 +102,8 @@ function App() {
                 <DefaultLayoutRoute path="/grid/span" component={GridSpanPage} />
                 <DefaultLayoutRoute path="/grid/gap" component={GridGapPage} />
 
+                <DefaultLayoutRoute path="/layout/columns" component={ColumnsPage} />
+
                 <BlankLayoutRoute component={_404} />
             </Switch>
         </BrowserRouter>

cirrus-docs/src/config/sidebar.ts

@@ -329,7 +329,7 @@ export const sidebarConfig: SidebarConfig[] = [
                 fontWeight: 'semibold',
                 glyph: null,
                 text: 'Columns',
-                url: '#'
+                url: '/layout/columns'
             },
             {
                 fontWeight: 'semibold',

cirrus-docs/src/pages/layout/columns/index.scss

@@ -0,0 +1,19 @@
+#grids .col > div,
+#grids [class^='col-'] > div,
+#grids [class*=' col-'] > div,
+#grids .col > div,
+#grids [class^='w-'] > div,
+#grids [class*=' w-'] > div,
+#grids [class^='h-'] > div,
+#grids [class*=' h-'] > div {
+    background: #eee;
+    text-align: center;
+    border-radius: 5px;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    min-height: 30px !important;
+    line-height: 30px;
+    margin-bottom: 0.75rem;
+    font-weight: bold;
+    letter-spacing: 0.1rem;
+}

cirrus-docs/src/pages/layout/columns/toc.ts

@@ -0,0 +1,9 @@
+import { TableOfContentsEntry } from '../../../layouts/components/toc';
+
+export const toc: TableOfContentsEntry[] = [
+    {
+        name: 'Glyphs',
+        anchor: '#glyphs',
+        children: [],
+    },
+];

cirrus-docs/src/pages/layout/index.tsx

@@ -0,0 +1 @@
+export { ColumnsPage } from './columns';