@ -2,110 +2,70 @@
import Icon from '../components/icon.html';
import Icon from '../components/icon.html';
import Logo from '../components/logo.html';
import Logo from '../components/logo.html';
import Iso from '../components/isometry.html';
import Iso from '../components/isometry.html';
let sy = 0;
< / script > < / script >
< svelte:head > < svelte:head >
< title > Svelte • The magical disappearing UI framework< / title >
< title > Svelte • The magical disappearing UI framework< / title >
< / svelte:head > < / svelte:head >
<!-- <svelte:window bind:scrollY={sy}/> -->
< section class = 'container' > < section class = 'container' >
< div class = 'logo' >
< img class = "logo" src = "logo.svg" style = "transform: translate(0,{sy * 0.2}px)" >
< Logo size = {90} / >
< h1 > SVELTE< / h1 >
< h2 > The magical disappearing< br / > UI framework< / h2 >
< / div >
<!-- possibly not the best solution - better use classes for button? -->
< h2 > What if web apps could write themselves?< / h2 >
< a rel = 'prefetch' href = 'guide' class = 'learn-btn' >
< h1 > Svelte< / h1 >
< button class = 'bg-prime white' > Learn Svelte
< Icon name = 'arrow-right' / > < / button >
< / a >
< / section > < / section >
< section class = 'container py0 align-c '> < section class = 'container' >
< ul class = 'grid stretch' >
< ul class = 'grid stretch' >
< li class = 'box bg-prime white' >
< li class = 'box bg-prime white' >
< Logo size = {88} outer = 'none' inner = 'fill:none; stroke:white;' / >
< h2 style = 'padding:2.4rem 0 0 0' > Write less code< / h2 >
< h2 style = 'padding:2.4rem 0 0 0' > Solved: The web's JavaScript bloat crisis< / h2 >
< p > Write boilerplate-free components using languages you already know — HTML, CSS and JavaScript< / p >
< p > Svelte turns your templates into tiny, framework-less vanilla JavaScript< / p >
< a href = "TODO-blog-post-on-loc" > learn more< / a >
< / li >
< / li >
< li class = 'box bg-flash white' >
< li class = 'box bg-flash white' >
< Logo size = {88} outer = 'none' inner = 'fill:none; stroke:white;' / >
< h2 style = 'padding:2.4rem 0 0 0' > No virtual DOM overhead< / h2 >
< h2 style = 'padding:2.4rem 0 0 0' > Simple and familiar< / h2 >
< p > Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast< / p >
< p > Build apps out of composable, easy-to-write blocks using languages you already know< / p >
< a href = "TODO-blog-post-on-vdom-overhead" > learn more< / a >
< / li >
< / li >
< li class = 'box bg-second white' >
< li class = 'box bg-second white' >
< Logo size = {88} outer = 'none' inner = 'fill:none; stroke:white;' / >
< h2 style = 'padding:2.4rem 0 0 0' > Truly reactive< / h2 >
< h2 style = 'padding:2.4rem 0 0 0' > Super fast, rock solid< / h2 >
< p > No more complex state management libraries — Svelte brings reactivity to JavaScript itself< / p >
< p > Compile-time static analysis ensures the browser does no more work than it needs to< / p >
< / li >
< / ul >
< / section >
< section class = 'container' > < a href = "TODO-blog-post-on-reactivity" > learn more< / a >
< ul class = 'grid half' >
< li >
< h2 > The why-headline here< / h2 >
< p > < b > Copyplat< / b > – < / p >
< / li >
< li class = 'align-c cols-2' >
< Iso size = {180} style = 'fill:var(--flash); stroke:var(--second)' / >
< Iso size = {180} style = 'fill:#ccc; stroke:var(--second)' / >
< Iso size = {180} style = 'fill:var(--prime); stroke:var(--second)' / >
< p class = 'legend' > < b > – – < / b > < br / > informative grafics here< / p >
< / li >
< / li >
< / ul >
< / ul >
< h6 class = 'bg-second white' > NOTE< br / > I didn't spend much time on contents or the right Illustrations here. Let's
discuss look'n'feel first.< / h6 >
< / section > < / section >
< section class = 'container back-light' > < section class = "container grid half" >
< ul class = 'grid' >
< div >
< li class = 'align-c cols-2' >
< p > Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the < em > browser< / em > , Svelte shifts that work into a < em > compile step< / em > that happens when you build your app.< / p >
< Iso size = {140} style = 'fill:var(--flash); stroke:var(--second)' / >
< Iso size = {140} style = 'fill:#ccc; stroke:var(--second)' / >
< Iso size = {140} style = 'fill:var(--prime); stroke:var(--second)' / >
< p class = 'legend' > < b > – – < / b > < br / > informative grafics here< / p >
< / li >
< li >
< h2 > The how-headline here< / h2 >
< p >
< b > Copyplat< / b > –
Blindtext. Fera voluptatis debitis aut laut harum sitiandus. Ant labo. Nequod modisquia illabo. Nametur sequis ut
entiberibeat facerfe rovitatemqui beatis minvenis consequi quid quo et.
< / p >
< / li >
< / ul >
< / section >
< section class = 'container' > < p > Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.< / p >
< ul class = 'grid half' >
< / div >
< li >
< h2 > The benefits-headline here< / h2 >
< div >
< p >
< p > TODO a video intro< / p >
< b > Copyplat< / b > –
< / div >
< / p >
< / li >
< li class = 'align-c' >
< Iso size = {120} style = 'fill:var(--flash); stroke:var(--second)' / >
< Iso size = {80} style = 'fill:#ccc; stroke:var(--second)' / >
< Iso size = {50} style = 'fill:var(--prime); stroke:var(--second)' / >
< p class = 'legend' > < b > – – < / b > < br / > informative grafics here< / p >
< / li >
< / ul >
< / section > < / section >
< section class = 'container bg-second' > < section class = "container grid half" >
< a rel = 'prefetch' href = 'themer' class = 'learn-btn' >
< p > TODO finish building this page. Ideas: Who's using Svelte? Example code (interactive, ideally). What else?< / p >
< button class = 'back prime' > just because we can
< Icon name = 'arrow-right' / > < / button >
< / a >
< / section > < / section >
<!-- TODO example code transformation (interactive REPL?) -->
< style > < style >
.container {
.container {
padding : 10rem var(--side-page);
margin : 10rem var(--side-page);
}
}
.container ul {
.container ul {
@ -123,25 +83,33 @@
}
}
.logo {
.logo {
text-align: center;
position: absolute;
}
left: -120px;
top: -120px;
.logo > :global(svg) {
width: 80vmin;
position: relative;
height: 80vmin;
opacity: 0.1;
will-change: transform;
}
}
.logo > h1 {
h1 {
text-align: center;
margin: 2rem 0;
margin: 2rem 0;
font-size: 4.8rem;
font-size: 6rem;
color: var(--header);
color: var(--heading);
font-weight: 300;
font-weight: 100;
letter-spacing: .12em;
text-transform: uppercase;
}
}
.logo > h2 {
h2 {
text-align: center;
display: block;
position: relative;
position: relative;
font-size: 1.7rem;
font-size: 3.2 rem;
text-align: center;
text-align: center;
animation: slow-fade-demo 6s var(--inout-cubic) infinite;
width: 100%;
text-transform: lowercase;
}
}
.learn-btn {
.learn-btn {
@ -149,24 +117,30 @@
cursor: pointer;
cursor: pointer;
display: block;
display: block;
margin-top: 4rem;
margin-top: 4rem;
text-align: center;
}
}
.legend { padding-top: 4rem }
.legend { padding-top: 4rem }
.box {
.box {
padding-top : 3. 2r em
padding: 2em;
}
}
.box > h2 {
.box > h2 {
padding: 2.4rem 0;
padding: 0;
font-size: var(--h5);
margin: 0 0 0.5em 0;
font-size: var(--h2);
color: white;
text-align: left;
}
}
.box > p {
.box > p {
font-size: var(--h5);
font-size: var(--h5);
}
}
.box a {
text-align: right;
}
h6 {
h6 {
max-width: 25em;
max-width: 25em;
padding: 2.4rem;
padding: 2.4rem;
@ -175,30 +149,12 @@
text-align: center;
text-align: center;
}
}
/* simple placeholder-animation */
@keyframes slow-fade-demo {
0%, 75%, 100% { opacity: 1 }
85% { opacity: 0 }
}
@media screen and (min-width: 870px) {
@media screen and (min-width: 870px) {
.logo {
h1 {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.logo > h1 {
position: relative;
position: relative;
top: -.8rem;
top: -.8rem;
font-size: 5.6 rem;
font-size: 18rem;
margin: 2rem 2rem 0 1rem;
margin: 2rem 2rem 0 1rem;
}
}
.logo > h2 {
top: .6rem;
text-align: left;
}
}
}
< / style > < / style >
Rich Harris
7 years ago