yaru.css/exampledark.html

<html>
    <head>
        <!--This is the Ubuntu Font beginning. INCLUDE THIS!-->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
        <!--This is the Ubuntu Font ending. INCLUDE THIS!-->
        <link href='./output/yaru-dark.css' rel='stylesheet'>
    </head>
    <body>
        <div class="header">
            Hello yaru!
        </div>
        <div class="box">
            <div class="sidebar">
                <button class="sb_button">lorem ipsum</button>
                <button class="sb_button">dolor sit amet</button>
            </div>
            <div class="box-content-1">
                <div class="box-v">
                    <div class="box-content-1">
                        <h1>Hello yaru!</h1>
                        <h2>Hello yaru!</h2>
                        <h3>Hello yaru!</h3>
                        <p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>
                        <button>Test</button>
                    </div>
                    <div class="box-content-1">
                        <h1>Hello again yaru!</h1>
                        <h2>Hello again yaru!</h2>
                        <h3>Hello again yaru!</h3>
                        <p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>
                        <button>Test again</button>
                    </div>
                </div>               
            </div>
        </div>
    </body>
</html>
Create colors file, and add basic classes such as button, h1, h2, h3, and a headerbar div 2024-12-05 05:33:27 +00:00			`<html>`
			`<head>`
			`<!--This is the Ubuntu Font beginning. INCLUDE THIS!-->`
			`<link rel="preconnect" href="https://fonts.googleapis.com">`
			`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
			`<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">`
			`<!--This is the Ubuntu Font ending. INCLUDE THIS!-->`
			`<link href='./output/yaru-dark.css' rel='stylesheet'>`
			`</head>`
			`<body>`
			`<div class="header">`
			`Hello yaru!`
			`</div>`
add boxes and sidebars 2024-12-05 07:18:52 +00:00			`<div class="box">`
			`<div class="sidebar">`
			`<button class="sb_button">lorem ipsum</button>`
			`<button class="sb_button">dolor sit amet</button>`
			`</div>`
			`<div class="box-content-1">`
Add boxes and sidebar 2024-12-05 07:22:09 +00:00			`<div class="box-v">`
			`<div class="box-content-1">`
			`<h1>Hello yaru!</h1>`
			`<h2>Hello yaru!</h2>`
			`<h3>Hello yaru!</h3>`
			`<p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>`
			`<button>Test</button>`
			`</div>`
			`<div class="box-content-1">`
			`<h1>Hello again yaru!</h1>`
			`<h2>Hello again yaru!</h2>`
			`<h3>Hello again yaru!</h3>`
			`<p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>`
			`<button>Test again</button>`
			`</div>`
			`</div>`
add boxes and sidebars 2024-12-05 07:18:52 +00:00			`</div>`
			`</div>`
Create colors file, and add basic classes such as button, h1, h2, h3, and a headerbar div 2024-12-05 05:33:27 +00:00			`</body>`
			`</html>`