setmy-info-less-extended 3.0.0

package/cucumber.js

@@ -0,0 +1,9 @@
+module.exports = {
+    default: [
+        `--format-options '{"snippetInterface": "synchronous"}'`,
+        '--require ./src/test/js/bdd/given.js',
+        '--require ./src/test/js/bdd/when.js',
+        '--require ./src/test/js/bdd/then.js',
+        './src/test/gherkin'
+    ].join(' ')
+};

package/dist/main.css

@@ -0,0 +1,76 @@
+/* values/main.less */
+/* values/colors/main.less */
+/* values/fonts/main.less */
+body.framesDefaultPadding {
+  height: calc(100% - 0px);
+  width: calc(100% - 0px);
+  padding: 0px;
+}
+.contentHeader {
+  width: 100%;
+  height: 50px;
+}
+.defaultHeader {
+  width: 100%;
+  height: 25px;
+}
+.content {
+  width: 100%;
+  height: calc(100% - 75px);
+}
+.contentFooter {
+  width: 100%;
+  height: 25px;
+}
+.sectionLeft {
+  width: calc(30% - 8px - 4px);
+  height: 100%;
+}
+.verticalSeparator {
+  width: 8px;
+  height: 100%;
+  display: block;
+}
+.sectionRight {
+  width: 70%;
+  height: 100%;
+}
+.sectionHeader {
+  width: 100%;
+  height: 25px;
+}
+.sectionLeftUp {
+  width: 100%;
+  height: calc(60% - 4px - 8px);
+}
+.contentLeftUp {
+  width: 100%;
+  height: calc(100% - 25px);
+}
+.horizontalSeparator {
+  height: 4px;
+}
+.sectionLeftBottom {
+  width: 100%;
+  height: calc(40%);
+}
+.contentLeftBottom {
+  width: 100%;
+  height: calc(100% - 25px);
+}
+.sectionRightUp {
+  width: 100%;
+  height: 30%;
+}
+.contentRightUp {
+  width: 100%;
+  height: calc(100% - 25px);
+}
+.sectionRightBottom {
+  width: 100%;
+  height: calc(70% - 4px - 8px);
+}
+.contentRightBottom {
+  width: 100%;
+  height: calc(100% - 25px);
+}

package/dist/main.min.css

@@ -0,0 +1 @@
+body.framesDefaultPadding{height:calc(100% - 0px);width:calc(100% - 0px);padding:0}.contentHeader{width:100%;height:50px}.defaultHeader{width:100%;height:25px}.content{width:100%;height:calc(100% - 75px)}.contentFooter{width:100%;height:25px}.sectionLeft{width:calc(30% - 8px - 4px);height:100%}.verticalSeparator{width:8px;height:100%;display:block}.sectionRight{width:70%;height:100%}.sectionHeader{width:100%;height:25px}.sectionLeftUp{width:100%;height:calc(60% - 4px - 8px)}.contentLeftUp{width:100%;height:calc(100% - 25px)}.horizontalSeparator{height:4px}.sectionLeftBottom{width:100%;height:calc(40%)}.contentLeftBottom{width:100%;height:calc(100% - 25px)}.sectionRightUp{width:100%;height:30%}.contentRightUp{width:100%;height:calc(100% - 25px)}.sectionRightBottom{width:100%;height:calc(70% - 4px - 8px)}.contentRightBottom{width:100%;height:calc(100% - 25px)}

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "setmy-info-less-extended",
+    "version": "3.0.0",
+    "description": "SMI LESS project",
+    "main": "dist/main.min.css",
+    "dependencies": {
+        "setmy-info-less": "*"
+    },
+    "scripts": {
+        "build": "npm run css && npm run css-min && npm run html",
+        "build:experimental": "npm run css:experimental",
+        "css": "lessc ./src/main/less/main.less dist/main.css",
+        "css:experimental": "lessc ./src/main/less/experimental/main.less dist/experimental.css",
+        "css-min": "lessc ./src/main/less/main.less dist/main.min.css --clean-css",
+        "css:debug": "lessc --modify-var=debug=true ./src/main/less/main.less dist/main.css",
+        "html": "node ./src/test/js/pugBuild.js",
+        "start": "node ./src/test/js/server.js",
+        "watch": "less-watch-compiler ./src/main/less dist main.less",
+        "watch:pug": "node ./src/test/js/pugWatch.js",
+        "clean": "rimraf dist",
+        "clean:all": "rimraf dist node_modules",
+        "verify": "npm test && npm run e2e && npm run lint:less && npm run cucumber",
+        "test": "jest",
+        "e2e": "npx playwright test --config=playwright.config.js",
+        "e2e:one": "npx playwright test --config=playwright.config.js",
+        "cucumber": "cucumber-js",
+        "lint:less": "stylelint ./src/main/less/**/*.less",
+        "lint:fix-less": "stylelint ./src/main/less/**/*.less --fix"
+    },
+    "keywords": [
+        "less",
+        "css",
+        "pug",
+        "playwright",
+        "jest"
+    ],
+    "author": "Imre Tabur <imre.tabur@mail.ee>",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/setmy-info/setmy-info-less.git"
+    },
+    "homepage": "https://github.com/setmy-info/setmy-info-less",
+    "devDependencies": {
+        "@cucumber/cucumber": "^12.6.0",
+        "@playwright/test": "^1.53.1",
+        "express": "^5.1.0",
+        "jest": "^30.2.0",
+        "less": "^4.3.0",
+        "less-plugin-clean-css": "^1.6.0",
+        "less-watch-compiler": "^1.16.3",
+        "playwright": "^1.53.1",
+        "postcss-less": "^6.0.0",
+        "pug": "^3.0.3",
+        "rimraf": "^6.0.1",
+        "stylelint": "^16.21.1",
+        "stylelint-config-standard": "^38.0.0",
+        "stylelint-less": "^3.0.1"
+    }
+}

package/playwright.config.js

@@ -0,0 +1,16 @@
+const {defineConfig} = require('@playwright/test');
+const firefoxHelper = require('./src/test/js/firefoxHelper');
+
+const firefoxPath = firefoxHelper.getFirefoxPath();
+
+module.exports = defineConfig({
+    testDir: 'src/test/js',
+    timeout: 30000,
+    retries: 0,
+    use: {
+        headless: false,
+        browserName: 'firefox',
+        executablePath: firefoxPath
+    },
+    testMatch: '**/*.e2e.js'
+});

package/src/main/less/experimental/experimental-frames-colors.less

@@ -0,0 +1,35 @@
+.AliceBlue {
+    background: @blue-300;
+}
+
+.MoreBlue {
+    background: @blue-600;
+}
+
+.blanchedalmond {
+    background: blanchedalmond;
+}
+
+.Aquamarine {
+    background: Aquamarine;
+}
+
+.Beige {
+    background: Beige;
+}
+
+.Bisque {
+    background: Bisque;
+}
+
+.BurlyWood {
+    background: BurlyWood;
+}
+
+.Cornsilk {
+    background: Cornsilk;
+}
+
+.Cyan {
+    background: Cyan;
+}

package/src/main/less/experimental/main.less

@@ -0,0 +1,3 @@
+/* experimental.less */
+@import url("../../../../../setmy-info-less/src/main/less/values/index.less");
+@import url("experimental-frames-colors.less");

package/src/main/less/frames/index.less

@@ -0,0 +1,115 @@
+@numberOfMenuPanels: 2;
+@headerHeight: @numberOfMenuPanels * @halfDefaultHeight;
+@footerHeight: @halfDefaultHeight;
+
+@sectionHeaderHeight: @halfDefaultHeight;
+
+@verticalSeparatorWidth: 8px;
+@horizontalSeparatorHeight: 4px;
+
+@paddingValue: 0px;
+@doublePaddingValue: @paddingValue * 2;
+
+@headerFooterSum: @headerHeight + @footerHeight;
+
+body.framesDefaultPadding {
+    height: calc(100% - @doublePaddingValue);
+    width: calc(100% - @doublePaddingValue);
+    padding: @paddingValue;
+}
+
+.contentHeader {
+    width: 100%;
+    height: @headerHeight;
+}
+
+.defaultHeader {
+    width: 100%;
+    height: @halfDefaultHeight
+}
+
+.content {
+    width: 100%;
+    height: calc(100% - @headerFooterSum);
+}
+
+.contentFooter {
+    width: 100%;
+    height: @footerHeight;
+}
+
+@leftWidth: 30%;
+@rightWidth: 100% - @leftWidth;
+
+.sectionLeft {
+    width: calc(@leftWidth - @verticalSeparatorWidth - @defaultBorderVerticalAmount);
+    height: 100%;
+}
+
+.verticalSeparator {
+    width: @verticalSeparatorWidth;
+    height: 100%;
+    display: block;
+}
+
+.sectionRight {
+    width: @rightWidth;
+    height: 100%;
+}
+
+.sectionHeader {
+    width: 100%;
+    height: @sectionHeaderHeight;
+}
+
+@contentLeftUpHeight: 60%;
+@contentLeftBottomHeight: 100% - @contentLeftUpHeight;
+@doubleDefaultBorderHorizontalAmount: 2 * @defaultBorderHorizontalAmount;
+@x: @horizontalSeparatorHeight - @doubleDefaultBorderHorizontalAmount;
+
+.sectionLeftUp {
+    width: 100%;
+    height: calc(@contentLeftUpHeight - @horizontalSeparatorHeight - @doubleDefaultBorderHorizontalAmount);
+}
+
+.contentLeftUp {
+    width: 100%;
+    height: calc(100% - @sectionHeaderHeight);
+}
+
+.horizontalSeparator {
+    height: @horizontalSeparatorHeight;
+}
+
+.sectionLeftBottom {
+    width: 100%;
+    height: calc(@contentLeftBottomHeight);
+}
+
+.contentLeftBottom {
+    width: 100%;
+    height: calc(100% - @sectionHeaderHeight);
+}
+
+@contentRightUpHeight: 30%;
+@contentRightBottomHeight: 100% - @contentRightUpHeight;
+
+.sectionRightUp {
+    width: 100%;
+    height: @contentRightUpHeight;
+}
+
+.contentRightUp {
+    width: 100%;
+    height: calc(100% - @sectionHeaderHeight);
+}
+
+.sectionRightBottom {
+    width: 100%;
+    height: calc(@contentRightBottomHeight - @horizontalSeparatorHeight - @doubleDefaultBorderHorizontalAmount);
+}
+
+.contentRightBottom {
+    width: 100%;
+    height: calc(100% - @sectionHeaderHeight);
+}

package/src/main/less/main.less

@@ -0,0 +1,3 @@
+@import url("../../../../setmy-info-less/src/main/less/values/index.less");
+@import url("frames/index.less");
+

package/src/test/gherkin/body.feature

@@ -0,0 +1,20 @@
+Feature: body page
+
+    Scenario: body rendering with specific properties
+        Given page name is "body"
+        When page is rendered
+        And page element ID is "body"
+        Then page should have title "body.html"
+        And page element margin should be "0px 0px 0px 0px"
+        And page element padding should be "0px 0px 0px 0px"
+        And page element font family should be "DejaVu Serif, Roboto, Arial, Noto Sans, Noto, sans-serif"
+        And page element font size should be "16px"
+        And page element X should be 0
+        And page element Y should be 0
+        And page element WIDTH should be 2000
+        And page element HEIGHT should be 1200
+        And page element TOP should be 0
+        And page element LEFT should be 0
+        And page element background color should be "rgba(0, 0, 0, 0)"
+        And page element color should be "rgb(0, 0, 0)"
+        And page is closed

package/src/test/js/bdd/given.js

@@ -0,0 +1,7 @@
+const {Given} = require('@cucumber/cucumber');
+const pageHelper = require('../pageHelper');
+
+Given('page name is {string}', function (name) {
+    pageHelper.pageName(name);
+    pageHelper.getPath();
+});

package/src/test/js/bdd/then.js

@@ -0,0 +1,60 @@
+const {Then} = require('@cucumber/cucumber');
+const {expect} = require('@playwright/test');
+const pageHelper = require('../pageHelper');
+
+Then('page should have title {string}', async function (expectedTitle) {
+    const title = await pageHelper.data.page.title();
+    expect(title).toBe(expectedTitle);
+});
+
+Then('page element margin should be {string}', function (expectedMargin) {
+    expect(pageHelper.data.computedStyles.margin).toBe(expectedMargin);
+});
+
+Then('page element padding should be {string}', async function (expectedPadding) {
+    expect(pageHelper.data.computedStyles.padding).toBe(expectedPadding);
+});
+
+Then('page element font family should be {string}', async function (expectedFontFamily) {
+    expect(pageHelper.data.computedStyles.fontFamily).toBe(expectedFontFamily);
+});
+
+Then('page element font size should be {string}', async function (expectedFontSize) {
+    expect(pageHelper.data.computedStyles.fontSize).toBe(expectedFontSize);
+});
+
+Then('page element X should be {int}', async function (expectedX) {
+    expect(pageHelper.data.computedStyles.x).toBe(expectedX);
+});
+
+Then('page element Y should be {int}', async function (expectedY) {
+    expect(pageHelper.data.computedStyles.y).toBe(expectedY);
+});
+
+Then('page element WIDTH should be {int}', async function (expectedWidth) {
+    expect(pageHelper.data.computedStyles.width).toBe(expectedWidth);
+});
+
+Then('page element HEIGHT should be {int}', async function (expectedHeight) {
+    expect(pageHelper.data.computedStyles.height).toBe(expectedHeight);
+});
+
+Then('page element TOP should be {int}', async function (expectedTop) {
+    expect(pageHelper.data.computedStyles.top).toBe(expectedTop);
+});
+
+Then('page element LEFT should be {int}', async function (expectedLeft) {
+    expect(pageHelper.data.computedStyles.left).toBe(expectedLeft);
+});
+
+Then('page element background color should be {string}', async function (expectedBackColor) {
+    expect(pageHelper.data.computedStyles.backgroundColor).toBe(expectedBackColor);
+});
+
+Then('page element color should be {string}', async function (expectedColor) {
+    expect(pageHelper.data.computedStyles.color).toBe(expectedColor);
+});
+
+Then('page is closed', async function () {
+    await pageHelper.pageClose();
+});

package/src/test/js/bdd/when.js

@@ -0,0 +1,10 @@
+const {When} = require('@cucumber/cucumber');
+const pageHelper = require('../pageHelper');
+
+When('page is rendered', async function () {
+    await pageHelper.pageIsRendered();
+});
+
+When('page element ID is {string}', async function (elementId) {
+    await pageHelper.elementIdIs(elementId);
+});

package/src/test/js/e2e/body.e2e.js

@@ -0,0 +1,38 @@
+const {test, expect} = require('@playwright/test');
+const pageHelper = require('../pageHelper');
+const getTestPageName = require('../testPageName');
+
+const pageName = getTestPageName();
+
+test.describe(pageName + ' page layout tests', async () => {
+
+    test.beforeAll(async () => {
+        pageHelper.pageName(pageName);
+        pageHelper.getPath();
+        await pageHelper.pageIsRendered();
+    });
+
+    test('should load the page and check title', async () => {
+
+        const title = await pageHelper.data.page.title();
+        expect(title).toBe('body.html');
+
+        await pageHelper.elementExpectations(
+            'body',
+            {
+                margin: '0px 0px 0px 0px',
+                padding: '0px 0px 0px 0px',
+                fontFamily: 'DejaVu Serif, Roboto, Arial, Noto Sans, Noto, sans-serif',
+                fontSize: '16px',
+                x: 0,
+                y: 0,
+                width: 2000,
+                height: 1200,
+                top: 0,
+                left: 0,
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                color: 'rgb(0, 0, 0)'
+            }
+        );
+    });
+});

package/src/test/js/firefoxHelper.js

@@ -0,0 +1,17 @@
+const os = require('os');
+const path = require('path');
+
+function getFirefoxPath() {
+    let firefoxPath;
+    if (os.platform() === 'win32') {
+        firefoxPath = path.join('C:', 'Program Files', 'Mozilla Firefox', 'firefox.exe');
+    } else if (os.platform() === 'linux') {
+        firefoxPath = '/opt/firefox/firefox';
+    }
+    console.log("Firefox path: ", firefoxPath)
+    return firefoxPath;
+}
+
+module.exports = {
+    getFirefoxPath
+};

package/src/test/js/pageHelper.js

@@ -0,0 +1,102 @@
+//const pugTranspile = require('./pugTranspile');
+const path = require("path");
+const {firefox} = require('playwright');
+const firefoxHelper = require("./firefoxHelper");
+const {expect} = require("@playwright/test");
+
+const data = {
+    browserConfig: {
+        headless: false,
+        firefoxPath: firefoxHelper.getFirefoxPath()
+    },
+    windowConfig: {
+        viewport: {width: 2000, height: 1200}
+    },
+};
+
+function pageName(name) {
+    data.name = name;
+}
+
+function getPath() {
+    const filePath = 'file://' + path.resolve(__dirname, '../../../dist/' + data.name + '.html');
+    data.filePath = filePath;
+    return data.filePath;
+}
+
+async function pageIsRendered() {
+    data.browser = await firefox.launch(data.browserConfig);
+    data.context = await data.browser.newContext(data.windowConfig);
+    data.page = await data.context.newPage();
+    await data.page.goto(data.filePath);
+}
+
+async function elementExpectations(elementId, exp) {
+    await elementIdIs(elementId);
+    expectations(exp);
+}
+
+async function elementIdIs(elementId) {
+    data.elementId = elementId;
+    data.selector = `#${data.elementId}`;
+    data.elementHandle = await data.page.$(data.selector);
+    if (!data.elementHandle) {
+        throw new Error(`Element with ID '${data.elementId}' not found`);
+    }
+    data.computedStyles = await data.page.evaluate((sel) => {
+        const el = document.querySelector(sel);
+        const style = window.getComputedStyle(el);
+        const rect = el.getBoundingClientRect();
+        const allStyles = {};
+        for (let i = 0; i < style.length; i++) {
+            const prop = style[i];
+            allStyles[prop] = style.getPropertyValue(prop);
+        }
+        return {
+            margin: `${style.marginTop} ${style.marginRight} ${style.marginBottom} ${style.marginLeft}`,
+            padding: `${style.paddingTop} ${style.paddingRight} ${style.paddingBottom} ${style.paddingLeft}`,
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            x: rect.x,
+            y: rect.y,
+            top: Math.round(rect.top),
+            left: Math.round(rect.left),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+            backgroundColor: style.backgroundColor,
+            color: style.color,
+            allStyles: allStyles
+        };
+    }, data.selector);
+}
+
+function expectations(ex) {
+    expect(data.computedStyles.margin).toBe(ex.margin);
+    expect(data.computedStyles.padding).toBe(ex.padding);
+    expect(data.computedStyles.fontFamily).toContain(ex.fontFamily);
+    expect(data.computedStyles.fontSize).toBe(ex.fontSize);
+    expect(data.computedStyles.width).toBe(ex.width);
+    expect(data.computedStyles.height).toBe(ex.height);
+    expect(data.computedStyles.backgroundColor).toBe(ex.backgroundColor);
+    expect(data.computedStyles.color).toBe(ex.color);
+    expect(data.computedStyles.top).toBe(ex.top);
+    expect(data.computedStyles.left).toBe(ex.left);
+    expect(data.computedStyles.x).toBe(ex.x);
+    expect(data.computedStyles.y).toBe(ex.y);
+}
+
+async function pageClose() {
+    await data.page.close();
+    await data.browser.close();
+}
+
+module.exports = {
+    pageName,
+    getPath,
+    pageIsRendered,
+    elementIdIs,
+    data,
+    expectations,
+    elementExpectations,
+    pageClose
+};

package/src/test/js/pugBuild.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+const pugTranspile = require('./pugTranspile');
+
+const inputDir = path.join(__dirname, '../pug');
+const partialsDir = path.join(inputDir, 'partials');
+
+function getPartials() {
+    return fs.readdirSync(partialsDir)
+        .filter(file => file.endsWith('.pug'))
+        .map(file => path.basename(file, '.pug'));
+}
+
+function main() {
+    const dir = inputDir;
+    const files = fs.readdirSync(dir);
+    files.forEach((file) => {
+        const filePath = path.join(dir, file);
+        const stat = fs.statSync(filePath);
+        if (stat.isFile() && file.endsWith('.pug')) {
+            const pageName = path.basename(filePath, path.extname(filePath));
+            if (pageName === "main") {
+                const partials = getPartials();
+                for (const partial of partials) {
+                    pugTranspile.transpileHtml(pageName, {
+                        title: partial + '.html',
+                        page: partial
+                    });
+                }
+            } else {
+                pugTranspile.transpileHtml(pageName, {title: pageName + ".html"});
+            }
+        }
+    });
+}
+
+main();

package/src/test/js/pugTranspile.js

@@ -0,0 +1,16 @@
+const pug = require('pug');
+const fs = require('fs');
+const path = require('path');
+
+function transpileHtml(name, locals = {}) {
+    const outputName = locals.page || name;
+    const pugFile = path.join(__dirname, '../pug/' + name + ".pug");
+    const htmlFile = path.join(__dirname, '../../../dist/' + outputName + ".html");
+    const compiledFunction = pug.compileFile(pugFile);
+    fs.writeFileSync(htmlFile, compiledFunction(locals));
+    console.log(`✔ Compiled: ${pugFile} → ${htmlFile}`);
+}
+
+module.exports = {
+    transpileHtml
+};

package/src/test/js/pugWatch.js

@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+const pugTranspile = require('./pugTranspile');
+
+const inputDir = path.join(__dirname, '../pug');
+
+function main() {
+    console.log('Watching .pug files for changes...');
+
+    fs.watch(inputDir, {recursive: false}, (eventType, filename) => {
+        if (filename && filename.endsWith('.pug')) {
+            const pageName = path.basename(filename, path.extname(filename));
+            console.log(`Rebuilding ${filename}...`);
+            try {
+                pugTranspile.transpileHtml(pageName, {title: pageName + ".html"});
+            } catch (e) {
+                console.error(e);
+            }
+        }
+    });
+}
+
+main();

package/src/test/js/server.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = 3000;
+
+app.use(express.static(path.join(__dirname, '../../../dist')));
+
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, '../../../dist', 'index.html'));
+});
+
+app.listen(port, () => {
+    console.log(`Server listening at http://localhost:${port}`);
+});

package/src/test/js/testPageName.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = function getTestPageName() {
+    const caller = new Error().stack
+        .split('\n')[2]
+        .match(/\(([^)]+)\)/)?.[1] || '';
+    const fileName = path.basename(caller);
+    const pageName = fileName.split('.')[0];
+    return pageName;
+};

package/src/test/js/unit/main.test.js

@@ -0,0 +1,5 @@
+describe('Something', () => {
+    test('should have the correct TRUE', () => {
+        expect(true).toBe(true);
+    });
+});

package/src/test/pug/body.pug

@@ -0,0 +1,4 @@
+doctype html
+html(lang="en")
+    include include/head.pug
+    body(id="body")

package/src/test/pug/include/head.pug

@@ -0,0 +1,9 @@
+head(id="head")
+    title #{title}
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(name="description", content="HTML 5 CSS test pages")
+    meta(name="author", content="Imre Tabur")
+    link(rel="stylesheet", type="text/css", href="../../setmy-info-less/dist/main.css")
+    link(rel="stylesheet", type="text/css", href="main.css")
+    link(rel="stylesheet", type="text/css", href="experimental.css")

package/src/test/pug/main.pug

@@ -0,0 +1,12 @@
+doctype html
+html(lang="en")
+    include include/head.pug
+    body(id="body" class="framesDefaultPadding")
+        app(id="app")
+            div(id="application")
+                if page == 'abc'
+                    include ./partials/abc.pug
+                else if page == "experimental-frames"
+                    include ./partials/experimental-frames.pug
+                else
+                    div Error. Page Not found.

package/src/test/pug/partials/abc.pug

@@ -0,0 +1 @@
+span Hello World

package/src/test/pug/partials/experimental-frames.pug

@@ -0,0 +1,100 @@
+header(class="contentHeader AliceBlue")
+    menu
+        li(class="floatLeft Aquamarine halfHeight") Floating left A
+        li(class="floatLeft Aquamarine halfHeight") Floating left B
+        li(class="floatRight Aquamarine halfHeight") Floating right B
+        li(class="floatRight Aquamarine halfHeight") Floating right A
+        li(class="floatClear")
+    menu
+        li(class="floatLeft Aquamarine halfHeight") Floating left A
+        li(class="floatLeft Aquamarine halfHeight") Floating left B
+        li(class="floatRight Aquamarine halfHeight") Floating right B
+        li(class="floatRight Aquamarine halfHeight") Floating right A
+        li(class="floatClear")
+main(class="content")
+    section(class="sectionLeft floatLeft")
+        div(class="sectionLeftUp defaultBorder")
+            header(class="sectionHeader AliceBlue")
+                menu
+                    li(class="floatLeft Aquamarine halfHeight") A
+                    li(class="floatLeft Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") A
+                    li(class="floatClear")
+            div(class="contentLeftUp noWrap autoScrollBars Beige")
+                include lines
+        div(id="horizontalLeftDivider" class="horizontalSeparator cursorHorizontalResize")
+        div(class="sectionLeftBottom defaultBorder")
+            header(class="sectionHeader AliceBlue")
+                menu
+                    li(class="floatLeft Aquamarine halfHeight") A
+                    li(class="floatLeft Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") A
+                    li(class="floatClear")
+            div(class="contentLeftBottom noWrap autoScrollBars Bisque")
+                include lines
+    div(id="verticalDivider" class="verticalSeparator cursorVerticalResize floatLeft")
+    section(class="sectionRight floatLeft")
+        div(class="sectionRightUp defaultBorder")
+            header(class="sectionHeader AliceBlue")
+                menu
+                    li(class="floatLeft Aquamarine halfHeight") A
+                    li(class="floatLeft Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") A
+                    li(class="floatClear")
+            div(class="contentRightUp noWrap autoScrollBars BurlyWood")
+                include lines
+        div(id="horizontalRightDivider" class="horizontalSeparator cursorHorizontalResize")
+        div(class="sectionRightBottom defaultBorder")
+            header(class="sectionHeader AliceBlue")
+                menu
+                    li(class="floatLeft Aquamarine halfHeight") A
+                    li(class="floatLeft Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") B
+                    li(class="floatRight Aquamarine halfHeight") A
+                    li(class="floatClear")
+            div(class="contentRightBottom noWrap autoScrollBars Cornsilk")
+                include lines
+    div(class="floatClear")
+footer(class="contentFooter AliceBlue")
+    menu
+        li(class="floatLeft Aquamarine halfHeight") Floating left A
+        li(class="floatLeft Aquamarine halfHeight") Floating left B
+        li(class="floatRight Aquamarine halfHeight") Floating right B
+        li(class="floatRight Aquamarine halfHeight") Floating right A
+        li(class="floatClear")
+
+script.
+    // Broken for window re-sizing.
+    const verticalDivider = document.getElementById('verticalDivider');
+    const leftPanel = document.querySelector('.sectionLeft');
+    const rightPanel = document.querySelector('.sectionRight');
+    const computedStyleLeft = window.getComputedStyle(leftPanel);
+    const computedStyleRight = window.getComputedStyle(rightPanel);
+    console.log(computedStyleLeft)
+    console.log(computedStyleRight)
+    let isDragging = false;
+    verticalDivider.addEventListener('mousedown', function (e) {
+        isDragging = true;
+        document.body.style.cursor = 'col-resize';
+        e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', function (e) {
+        if (!isDragging) return;
+        const totalWidth = verticalDivider.parentElement.clientWidth;
+        const newLeftWidth = e.clientX;
+        const minWidth = 100;
+        if (newLeftWidth < minWidth || newLeftWidth > totalWidth - minWidth) return;
+        leftPanel.style.width = `${newLeftWidth}px`;
+        rightPanel.style.width = `${totalWidth - newLeftWidth - verticalDivider.offsetWidth}px`;
+    });
+
+    document.addEventListener('mouseup', function () {
+        if (isDragging) {
+            isDragging = false;
+            document.body.style.cursor = 'default';
+        }
+    });

package/src/test/pug/partials/lines.pug

@@ -0,0 +1,2 @@
+- for (let i = 0; i < 50; i++)
+    div Left Up #{i} Longer Longer Longer Longer Longer Longer Longer Longer Longer

package/stylelint.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    customSyntax: 'postcss-less',
+    configBasedir: "src/main/less",
+    extends: [
+        'stylelint-config-standard'
+    ],
+    rules: {
+        'block-no-empty': null,//true
+        'selector-class-pattern': null,
+        'media-feature-range-notation': 'prefix',
+        'declaration-property-value-no-unknown': null,
+        "selector-type-no-unknown": [true, {
+            ignoreTypes: ["app"]
+        }],
+    },
+    ignoreFiles: [
+        '**/node_modules/**',
+        '**/dist/**',
+        '**/experimental/**'
+    ]
+};