You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.5 KiB
131 lines
3.5 KiB
<script>
|
|
import {link} from 'svelte-spa-router';
|
|
import Icon from './components/Icon.svelte';
|
|
</script>
|
|
|
|
<style>
|
|
hero {
|
|
display: block;
|
|
padding: 3rem;
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
hero h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
aside a {
|
|
--text-decoration: underline;
|
|
}
|
|
|
|
rationale {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1.5em;
|
|
padding-left: 4rem;
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
#demo-link {
|
|
margin-top: 1.5rem;
|
|
padding: 2rem;
|
|
font-size: 2em;
|
|
}
|
|
|
|
quote {
|
|
box-shadow: 4px 4px 4px 4px var(--color-shadow);
|
|
padding: 1em;
|
|
font-style: italic;
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
</style>
|
|
|
|
<hero>
|
|
<h1>fsck CSS</h1>
|
|
<p>An experiment in cleaning up CSS and HTML with modern tools like <b>flexbox</b> and <b>grids</b>.</p>
|
|
</hero>
|
|
|
|
<hr>
|
|
|
|
<section>
|
|
<aside>
|
|
<h3>Remove Classes</h3>
|
|
<Icon name="code" size="64" />
|
|
<p>Using a classless style like <a href="https://andybrewer.github.io/mvp/">MVP.css</a>, you
|
|
bring back CSS specificity to its original intent.</p>
|
|
</aside>
|
|
|
|
<aside>
|
|
<h3>Add Flexbox + Grids</h3>
|
|
<Icon name="box" size="64" />
|
|
<p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grids</a> you can layout anything you want without structure divs.</p>
|
|
</aside>
|
|
|
|
<aside>
|
|
<h3>Modify with Variables</h3>
|
|
<Icon name="sliders" size="64" />
|
|
<p>Using CSS variables you can replace many uses of classes and ids, avoiding most specificity
|
|
issues. Try the dark mode button below.
|
|
</p>
|
|
</aside>
|
|
</section>
|
|
|
|
|
|
<rationale>
|
|
<section>
|
|
<h1>Cleaner CSS</h1>
|
|
</section>
|
|
|
|
<p>This website is nothing more than a set of small demos for the idea of
|
|
using flexbox and grids to clean up and simplify CSS. Most everything else
|
|
about CSS stays. Filters, transforms, attributes, and everything that
|
|
applies to the visual display of the components of a design. What gets
|
|
removed is <b>div</b> heavy, class heavy, not-semantic-at-all layout
|
|
systems cluttering the real information available through simple HTML
|
|
tags.</p>
|
|
|
|
<p>In short, if you're writing this:</p>
|
|
|
|
<section>
|
|
<aside>
|
|
<pre>
|
|
<div class="grid col-1">
|
|
<div class="card">
|
|
...
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</aside>
|
|
</section>
|
|
|
|
<p>You could write this if you use flexbox, grids, and variables:</p>
|
|
|
|
<section>
|
|
<aside>
|
|
<pre>
|
|
<card>
|
|
...
|
|
</card>
|
|
</pre>
|
|
</aside>
|
|
</section>
|
|
|
|
<hr>
|
|
<section>
|
|
<p>I demonstrate the idea with a series of copies of existing websites and other layout problems
|
|
people frequently encounter. If you have a suggested layout challenge for me, then tell me on Twitter <a href="https://twitter.com/lzsthw">@lzsthw</a> and I'll give it a shot.
|
|
</p>
|
|
<a href="/demos" use:link><button id="demo-link">View The Demos</button></a>
|
|
</section>
|
|
|
|
<hr>
|
|
<section>
|
|
<h2>Version 0.1 Notice</h2>
|
|
|
|
<quote>
|
|
This website is a learning project by Zed A. Shaw, the author of many courses at <a href="https://learncodethehardway.org">Learn Code the Hard Way</a> and will hopefully result in a good CSS component to <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a>. If you find flaws in the reasoning or have suggestions for how to do it better, contact me <a href="https://twitter.com/lzsthw">@lzsthw on Twitter</a> and get a special thank you in the credits of this site and the course.
|
|
</quote>
|
|
</section>
|
|
|
|
</rationale>
|
|
|