daggrcss
Version:
A light-weight CSS style framework that focuses on useful responsive default styling and utilities. Daggr leaves the creative parts to the user.
380 lines (329 loc) • 14.4 kB
HTML
<html lang="en">
<head>
<title>Daggr CSS</title>
<link rel="stylesheet" href="daggr.min.css">
<style>
.red {
color: red;
}
.white {
color: white;
}
.hero {
width: 100%;
height: 100vh;
}
.hero::after {
content: "";
background: white;
background: url(images/double_dagger.jpg) fixed center no-repeat;
background-size: cover;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.btn {
background: red;
border-radius: 10px;
font-size: 1em;
}
.btn:hover {
background: orangered;
filter: brightness(120%);
}
.btn-alt {
/* border: 3px solid black; */
/* border-radius: 10px; */
font-size: 1em;
background: transparent;
color: black;
}
.btn-alt:hover {
/* border-color: orangered;
color: orangered; */
background: transparent;
}
.uline {
border: 10px solid red;
border-top:0; border-left: 0; border-right: 0;
border-image: url(images/underline.webp) 0 0 100% 10;
/* border-image-slice: 379 39;
border-image-repeat: round; */
}
body code {
background: #555;
color: #ddd;
padding: 5px;
}
.uline:hover {
color: blue;
}
body hr {
border: 0;
border-top: 1px solid #8c8c8c;
border-bottom: 1px solid #fff;
}
body footer {
background: #555;
color: #fff;
}
</style>
</head>
<body>
<header class="p-xs pos-abs w-100">
<nav class="container row">
<h1 class="m-none mr-auto">Dagg<span class="red">r</span></h1>
<a class="m-none ml-auto bold uline p-xs" target="_blank" href="https://www.deviantart.com/users/outgoing?http://www.josephqiu.com">Check Out Artist Joseph Qui</a>
</nav>
</header>
<section class="hero flex">
<div class="container p-xs">
<h2>Easy mobile-first CSS layout Framework</h2>
<div class="row">
<button class="m-xs btn px-sm py-xs white" onclick="window.location='https:\/\/github.com\/NerdVenture\/DaggrCSS\/releases\/tag\/v1.0'">Download v1.0</button>
<button class="m-xs btn-alt uline bold p-none" onclick="window.location='#first-section'">Learn More</button>
</div>
</div>
</section>
<main class="gutters-b-sm">
<section id="first-section" class="p-xs pt-sm">
<div class="container">
<h5>
Because responsive web layouts should be easy. Daggr focuses on simple layout utility classes and sensible defaults. Based on <a href="https://github.com/NerdVenture/CentricCSS" target="_blank" class="uline">Centric.css</a>,
almost every element is centered by default. Not to mention it's super lightweight at only <strong>4kb gzipped!</strong>
</h5>
<div class="m-xs">
<a href="https://github.com/NerdVenture/DaggrCSS" class="uline my-sm">Fork it on Github!</a>
</div>
</div>
</section>
<section id="second-section" class="p-xs">
<div class="container row gutters-r-xs">
<div class="col-5 desktop-col-4 m-none">
<h5>
Daggr's philosophy is simple. Make layouts easy.
</h5>
<p>
Everything is mobile-first and centered by default. Changing setting, such as a columns width for
desktop is as simple as using <code>desktop-col-3</code>. Only 1 breakpoint is used. This simplifies the process of
building complex responsive layouts because you only have to think about 2 sizes.
<br/><br/>
Most ustilities can be prefixed with the desktop breakpoint. Imagine only building for 2 sizes - mobile and desktop, rather than
multiple breakpoints. Simple.
</p>
</div>
<div class="col-6 desktop-col-3 m-none">
<h5>
Separation of Layout & Style
</h5>
<p>
Unfortunately the line has been blurred between HTML's job to handle layout and CSS's job to style. With Daggr I tried to
create a CSS framework that only serves the purpose of providing responsive utilities to aid in page layout.
<br/><br/>
The style of the page(colors, animations, etc.) are your responsibility or the responsibility of another framework.
</p>
</div>
</div>
</section>
<h3>Documentation</h3>
<hr/>
<section id="docs-settings-section" class="p-xs">
<div class="container">
<h4>Settings</h4>
<p>The following CSS variables can be configured:</p>
<div class="row">
<pre class="text-left p-xs"><code>:root {
--desktop-container-width: 70%;
--mobile-font-size: 22pt;
--indent-size: 1.5em;
}</code></pre>
</div>
</div>
</section>
<hr/>
<section id="docs-container-section" class="p-xs">
<div class="container">
<h4>Container</h4>
<p>
The container class restricts the maximum width of an element by the amount set in <code>--desktop-container-width</code>
and is full-screen on mobile. Use it to wrap other elements.
</p>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="container">
<div class="stays-in-container"></code></pre>
</div>
</div>
</section>
<hr/>
<section id="docs-spacing-section" class="p-xs">
<div class="container">
<h4>Spacing</h4>
<p>
Margins and padding classes can be formulated as follows:
</p>
<div class="row pt-xs">
<div class="col-6 m-none p-xs">
<h5 class="">Margins</h5>
<p class="bold">
m-(size | auto | none)<br/>
m(l,t,b,r)-(size | auto | none)<br/>
desktop-m-(size | auto | none)<br/>
desktop-m(l,t,b,r)-(size | auto | none)
</p>
</div>
<div class="col-6 m-none p-xs">
<h5 class="">Paddings</h5>
<p class="bold">
p-(size | auto | none)<br/>
p(l,t,b,r)-(size | auto | none)<br/>
desktop-p-(size | auto | none)<br/>
desktop-p(l,t,b,r)-(size | auto | none)
</p>
</div>
</div>
<p>
Where: <strong>l,t,b,r</strong> = left, top, bottom, right <br/>
and size is one of <strong>xs, sm, md, lg, xl</strong>.
</p>
<br/>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="<span class="red">m-md mx-xs desktop-m-lg</span>">
<div class="<span class="red">p-xl px-xs desktop-pr-sm</span>"></code></pre>
</div>
</div>
</section>
<hr/>
<section id="docs-position-section" class="p-xs">
<div class="container">
<h4>Positions</h4>
<p>
The following position classes are available:
<br/><br/>
<strong>pos-abs, pos-rel, pos-sticky, pos-fixed</strong>
<br/>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="<span class="red">pos-rel</span>">
<div class="<span class="red">pos-abs</span>"></code></pre>
</div>
</p>
</div>
</section>
<hr/>
<section id="docs-display-section" class="p-xs">
<div class="container">
<h4>display</h4>
<p>
The following display classes are available:
<br/><br/>
<strong>d-none, d-inline, d-block, d-iblock</strong>
<br/>
With desktop versions:
<br/>
<strong>desktop-d-none, desktop-d-inline, desktop-d-block, desktop-d-iblock</strong>
<br/>
<br/>
If you need something to appear only on desktop or mobile:
<br/>
<strong>mobile-only, desktop-only</strong>
<br/><br/>
For setting Z depth:
<br/>
<strong>z-(1-10), z-max, z-least</strong>
</p>
<br/>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="<span class="red">d-iblock z-2</span>">
<div class="<span class="red">desktop-only z-max</span>"></code></pre>
</div>
</div>
</section>
<hr/>
<section id="docs-dimensions-section" class="p-xs">
<div class="container">
<h4>Dimensions</h4>
<p>
Width and height are set in percentages using the following formula:
<br/>
<strong>w-(10 - 100)</strong> in increments of 10
or <strong>desktop-w-(10 - 100)</strong> in increments of 10
<br/>
<strong>h-(10-100)</strong> in increments of 10
or <strong>desktop-h-(10-100)</strong> in increments of 10
<br/><br/>
<strong>full-screen-width</strong> & <strong>full-screen-height</strong> set 100vw or 100vh - useful for
hero or other full screen sections.
</p>
<br/>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="<span class="red">w-100</span>">
<div class="<span class="red">h-20 desktop-h-50</span>"></code></pre>
</div>
</div>
</section>
<hr/>
<section id="docs-grid-section" class="p-xs">
<div class="container">
<h4>Grid system</h4>
<p>
Daggr's grid system is very similar to Bootstrap's
<br/><br/>
The <strong>.row</strong> class creates a flex environment where child elements are the columns - up to 12 across.
<br/><br/>
<strong>row</strong> - creates a grid row
<br/>
<strong>col-(1-12), desktop-col-(1-12)</strong>
<br/><br/>
If you need to change the order:
<strong>order-(1-12), desktop-order-(1-12)</strong>
<br/>
If you need to make sure a column appears first:
<strong>order-first, desktop-order-first</strong>
<br/><br/>
You can also use <strong>.flex</strong> to create a flex element directly
</p>
<br/>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="<span class="red">container row</span>">
<div class="<span class="red">col-12 desktop-col-6 order-first</span>"></code></pre>
</div>
</div>
</section>
<hr/>
<section id="docs-type-section" class="p-xs">
<div class="container">
<h4>Type</h4>
<p>
For alignment:
<br/>
<strong>text-left, text-center, text-right</strong>
<br/><br/>
For text style:
<strong>text-capitalize, text-upper, text-lower, italic, bold, bolder</strong>
<br/><br/>
Use <strong>.indent</strong> on paragraphs to get traditional indentation.
The amount of indention is configurable via --indent-size.
</p>
<br/>
<strong>Example:</strong>
<div class="row p-xs">
<pre class="text-left"><code><div class="<span class="red">text-left text-capitalize</span>"></code></pre>
</div>
</div>
</section>
</main>
<footer class="row p-xs mt-sm">
<span>A <a href="https://nerdventure.net">NerdVenture Project</a></span>
</footer>
</body>
</html>