diff --git a/public/blockstart/blockstart.css b/public/blockstart/blockstart.css index 1eec267..c230ac5 100644 --- a/public/blockstart/blockstart.css +++ b/public/blockstart/blockstart.css @@ -1,138 +1,186 @@ :root { - --color-border: hsl(0, 0%, 50%); + --color-border: hsl(0, 0%, 0%); --border-radius: 5px; - --value0: hsl(0, 0%, 0%); - --value1: hsl(0, 0%, 11%); - --value2: hsl(0, 0%, 22%); - --value3: hsl(0, 0%, 33%); - --value4: hsl(0, 0%, 44%); - --value5: hsl(0, 0%, 55%); - --value6: hsl(0, 0%, 66%); - --value7: hsl(0, 0%, 77%); - --value8: hsl(0, 0%, 88%); - --value9: hsl(0, 0%, 100%); --text: 0; + --value: 9; + --value-scale: 12%; + --pad: 10px; + --bottom-margin: 2rem; + --w: initial; + --h: initial; + --value0: hsl(0, 0%, calc(0 * var(--value-scale))); + --value1: hsl(0, 0%, calc(1 * var(--value-scale))); + --value2: hsl(0, 0%, calc(2 * var(--value-scale))); + --value3: hsl(0, 0%, calc(3 * var(--value-scale))); + --value4: hsl(0, 0%, calc(4 * var(--value-scale))); + --value5: hsl(0, 0%, calc(5 * var(--value-scale))); + --value6: hsl(0, 0%, calc(6 * var(--value-scale))); + --value7: hsl(0, 0%, calc(7 * var(--value-scale))); + --value8: hsl(0, 0%, calc(8 * var(--value-scale))); + --value9: hsl(0, 0%, calc(9 * var(--value-scale))); } body { - color: hsl(0, 0%, calc(var(--text) * 11%)); + padding: 0px; + margin: 0px; +} + +blockstart { + background-color: #fff; + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); display: flex; flex-direction: column; justify-content: flex-start; padding: 0px; margin: 0px; + width: 100%; + min-width: 100%; + max-width: 100%; + height: 100%; + min-height: 100%; } -content { - display: flex; - flex-direction: column; +blockstart * { + font-size: 1.1em; } -a { - color: hsl(0, 0%, calc(var(--text) * 11%)); +blockstart > * + * { + margin-bottom: var(--bottom-margin); } -block { - color: hsl(0, 0%, calc(var(--text) * 11%)); - display: flex; +blockstart > *:last-child { + margin-bottom: 0px; +} + +blockstart a { + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); +} + +blockstart block { --spacing: space-evenly; + + display: flex; + background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); justify-content: var(--spacing); flex-direction: column; + padding: var(--pad); + width: var(--w); + min-width: var(--w); + max-width: var(--w); + height: var(--h); + min-height: var(--h); + max-height: var(--h); } -block > * { - color: hsl(0, 0%, calc(var(--text) * 11%)); - display: flex; - flex: 1 1 auto; +blockstart block > * { --spacing: flex-start; + --pad: 10px; + --w: initial; + --h: initial; + + background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); + display: flex; justify-content: var(--spacing); align-self: stretch; flex-direction: column; margin: 2px; + padding: var(--pad); + width: var(--w); + min-width: var(--w); + max-width: var(--w); + height: var(--h); + min-height: var(--h); + max-height: var(--h); } -.wide { +blockstart stack { + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 1fr; + grid-template-areas: "cover"; +} + +blockstart stack > * { + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); width: 100%; + height: 100%; + position: relative; + grid-area: cover; } -.no-flex { +blockstart stack > .top { + z-index: 10; +} + +blockstart .wide { + width: 100%; +} + +blockstart .no-flex { display: block; flex: unset; flex-direction: unset; align-self: unset; } -.center { +blockstart .center { justify-content: center; align-items: center; align-self: center; } -.center-text > * { +blockstart .center-text { text-align: center; + justify-content: center; + align-items: center; } -.center-self { +blockstart .center-self { align-self: center; } -.vertical { +blockstart .vertical { flex-direction: column; } -.horizontal { +blockstart .horizontal { flex-direction: row; } -grid { - --cols: 1fr 1fr; +blockstart grid { + --cols: auto; --rows: auto; --gap: 0.5rem; - color: hsl(0, 0%, calc(var(--text) * 11%)); + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); display: grid; grid-gap: var(--gap); - grid-template-columns: var(--cols); - grid-template-rows: var(--rows); + grid-template-columns: repeat(var(--cols), 1fr); + grid-template-rows: repeat(var(--rows), 1fr); } -stack { - color: hsl(0, 0%, calc(var(--text) * 11%)); - display: grid; - grid-template-rows: 1fr; - grid-template-columns: 1fr; - grid-template-areas: "cover"; -} - -stack > * { - color: hsl(0, 0%, calc(var(--text) * 11%)); - width: 100%; - height: 100%; - position: relative; - grid-area: cover; -} - -stack > .top { - z-index: 10; -} -hr { +blockstart hr { --height: 1rem; + min-height: var(--height); visibility: hidden; } -hr.huge { +blockstart hr.huge { --height: 3rem; } -shape { - --w: 100%; - --h: 100%; - --value: 4; +blockstart shape { + --value: 2; + --text: 9; + --pad: 1rem; - color: hsl(0, 0%, calc(var(--text) * 11%)); - background-color: hsl(0, 0%, calc(var(--value) * 11%)); + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); + background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); display: flex; width: var(--w); min-width: var(--w); @@ -144,57 +192,49 @@ shape { justify-content: center; align-items: center; align-self: center; + padding: pad; } -.debug { +blockstart .debug { border: 1px solid red; } -.debug > * { +blockstart .debug > * { border: 1px solid blue; } -.pad { - --pad: 1rem; - padding: var(--pad); +blockstart .border { + border: 2px solid var(--color-border); + border-radius: var(--border-radius); } -.sized { - --w: 100%; - --h: 100%; - width: var(--w); - min-width: var(--w); - max-width: var(--w); - height: var(--h); - min-height: var(--h); - max-height: var(--h); +blockstart .compact { + justify-content: flex-start; } -.border { - border: 1px solid var(--color-border); - border-radius: var(--border-radius); +blockstart .compact > * { + flex: unset; } .solid { - --value: 8; - background-color: hsl(0, 0%, calc(var(--value) * 11%)); + --value: 4; + --text: 9; } -.dots { - --pat-val: 7; - - background-image: radial-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px); - background-size: calc(10 * 1px) calc(10 * 1px); +.fill { + flex: 1 1 auto; } -.lines { - --pat-val: 7; - background-image: linear-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px), linear-gradient(to right, hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px); - background-size: 10px 10px; +button { + --value: 7; + --text: 0; + + background-color: hsl(0, 0%, calc(var(--value) * var(--value-scale))); + color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); + border: 2px solid var(--color-border); + border-radius: var(--border-radius); } -.stripes { - --pat-val: 7; - background-image: linear-gradient(90deg, transparent 50%, hsl(0, 0%, calc(var(--pat-val) * 11%)) 50%); - background-size: 10px 10px; +button:hover { + filter: brightness(90%); } diff --git a/public/blockstart/demos/asana.html b/public/blockstart/demos/asana.html index 0ab3304..1bfaf25 100644 --- a/public/blockstart/demos/asana.html +++ b/public/blockstart/demos/asana.html @@ -14,17 +14,18 @@ - - asana - G | M U + + + asana + G | M U - -
+ +

Bring products to market faster with Asana

Asana is the easiest way for product managers to track their team's work—and get results.

- +
@@ -53,7 +54,7 @@
- + @@ -66,7 +67,7 @@

Move fast without breaking things

Using Asana as your product roadmap tool helps you track project progress, identify blockers, and shift resources on the fly.

- + @@ -89,8 +90,8 @@
- -
+ +

Product Quotes

"Some dude says that some dude is great."
@@ -100,12 +101,13 @@

Ship product faster with Asana today

See why millions of people use asana...

- +
- +

Footer

 + diff --git a/public/blockstart/demos/breadcrumbs-2.html b/public/blockstart/demos/breadcrumbs-2.html index c072c2f..fa4e601 100644 --- a/public/blockstart/demos/breadcrumbs-2.html +++ b/public/blockstart/demos/breadcrumbs-2.html @@ -163,6 +163,7 @@ panel.dark { +
@@ -247,7 +248,7 @@ panel.dark {
Works with your tech stack in just a few clicks.
- Cardigan raclette tbh, kitsch lomo fanny pack vegan.
Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac. + Cardigan raclette tbh, kitsch lomo fanny pack vegan.
Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac. companies @@ -290,15 +291,15 @@ panel.dark { - +

Contact Scoring? Never Heard of it...

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

- Learn more about contact scoring - + Learn more about contact scoring +
- +

Pillars

 @@ -355,5 +356,6 @@ panel.dark { + diff --git a/public/blockstart/demos/breadcrumbs-3.html b/public/blockstart/demos/breadcrumbs-3.html index f9c52a3..2461f19 100644 --- a/public/blockstart/demos/breadcrumbs-3.html +++ b/public/blockstart/demos/breadcrumbs-3.html @@ -191,6 +191,7 @@ shape.yellow { +
@@ -275,7 +276,7 @@ shape.yellow {
Works with your tech stack in just a few clicks.
- Cardigan raclette tbh, kitsch lomo fanny pack vegan.
Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac. + Cardigan raclette tbh, kitsch lomo fanny pack vegan.
Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac. companies @@ -318,12 +319,12 @@ shape.yellow { - +

Contact Scoring? Never Heard of it...

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

- Learn more about contact scoring - + Learn more about contact scoring +
@@ -383,5 +384,6 @@ shape.yellow { + diff --git a/public/blockstart/demos/breadcrumbs.html b/public/blockstart/demos/breadcrumbs.html index 4c38b91..67d8134 100644 --- a/public/blockstart/demos/breadcrumbs.html +++ b/public/blockstart/demos/breadcrumbs.html @@ -14,7 +14,8 @@ - + + @@ -28,7 +29,7 @@ - +

Want More MQLs?

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

@@ -41,7 +42,7 @@ - +

Get Started in 3 Simple Steps

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa.

@@ -53,41 +54,41 @@ Learn more - +

Steps

 - - + +

People

 - +

Flexitarian Vice Poutine Synth

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

 - +

Don't Let Your Tech Stack Hold You Hostage

Meh art party locavore forage readymade raw denim trust fund humblebrag tumblr lyft. Fixie pour-over chicharrones farm-to-table tumblr, godard church-key live-edge dreamcatcher mixtape hot chicken.

 - +

Toolbox

 - +

Works with your tech stack in just a few clicks.

- Cardigan raclette tbh, kitsch lomo fanny pack vegan. Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac. + Cardigan raclette tbh, kitsch lomo fanny pack vegan. Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac. companies @@ -99,24 +100,24 @@ - - + +

Super Handshake

 - +

Life is Lonely Marooned on an Island

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

 - - + +

Time Kills Deals, For Real

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

 - +

Accountant

 @@ -124,22 +125,23 @@ - +

Contact Scoring? Never Heard of it...

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

- Learn more about contact scoring - + Learn more about contact scoring +
- +

Pillars

 - +

Footer

 + diff --git a/public/blockstart/demos/canva.html b/public/blockstart/demos/canva.html index 59131f8..48c1938 100644 --- a/public/blockstart/demos/canva.html +++ b/public/blockstart/demos/canva.html @@ -13,7 +13,8 @@ - + + Canva ? @@ -21,7 +22,7 @@ - +

Canva. Design for everyone.

Iceland bespoke polaroid pug raclette kinfolk tumblr lo-fi asymmetrical chillwave church-key. Bespoke sustainable +1 cred, heirloom chicharrones kitsch tousled. Mixtape schlitz air plant iceland hot chicken, bicycle rights poutine austin bespoke. Stumptown schlitz keytar meggings taiyaki vice next level ugh. Fam vaporware cliche jean shorts listicle narwhal gluten-free vape. Af godard health goth, iPhone edison bulb shaman you probably haven't heard of them mustache photo booth etsy gochujang subway tile cronut. Helvetica ugh seitan, semiotics before they sold out hella hot chicken gastropub try-hard.

@@ -35,14 +36,14 @@
- +

Demo Image
- +
Letterpress leggings bitters drinking vinegar asymmetrical godard slow-carb tumeric.
Tote bag bespoke whatever, godard stumptown hammock selvage hot chicken vinyl 3 wolf moon asymmetrical roof party farm-to-table.
@@ -56,7 +57,7 @@

Templates

- + @@ -74,8 +75,8 @@
- - + +

Work solo, or as a team

Letterpress leggings bitters drinking vinegar asymmetrical godard slow-carb tumeric.

 @@ -83,7 +84,7 @@
- +

Team folders to help you stay organized, store brand assets, and manage content

Plan, create, schedule and publish your social media posts directly from Canva

Real-time collaboration across countries, companies, and departments

@@ -95,16 +96,16 @@ - +
- +

A perfect fit for every team

- +

Canva Free

Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie. vetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health got

@@ -151,8 +152,9 @@
- +

Footer

 + diff --git a/public/blockstart/demos/earlybird.html b/public/blockstart/demos/earlybird.html index bea5ce8..399219e 100644 --- a/public/blockstart/demos/earlybird.html +++ b/public/blockstart/demos/earlybird.html @@ -22,14 +22,15 @@ block > * { - + + =
logo
- + - - + +

Invest early,
grow together.

I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

@@ -40,21 +41,10 @@ block > * {

  • Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.
    • - - - - - -     @@ -62,19 +52,17 @@ block > * {     - > - - -

    As Featured In

    - - Yahoo! - TechCrunch - MarketWatch - Business Insider - -     + + +

    WE’VE PARTNERED WITH THE BEST IN FAMILY AND FINANCE

    + + what to expect + babylist + BlackRock + +     - +

    FOR PARENTS

    Invest today,
    and change their
    @@ -84,11 +72,12 @@ block > * {

    Phone

     - + +

    Build your nest

    Cardigan raclette tbh, kitsch lomo fanny pack vegan. -     - + +
    @@ -122,7 +111,7 @@ block > * {

    See how we're different.

    - + Image @@ -152,21 +141,21 @@ block > * {     - + - +

    Already have a 529?

    -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

    - +

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

    +     - +

    Get ready to build the next.

    -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

    - +

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

    +     - +
    @@ -189,16 +178,17 @@ block > * {

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

     -     +     - -

    It's time to build the nest.

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    - + +

    It's time to build the nest.

    +

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    +     - -

    Footer

    + +

    Footer

     + diff --git a/public/blockstart/demos/index.html b/public/blockstart/demos/index.html index 99053d3..d2f56a2 100644 --- a/public/blockstart/demos/index.html +++ b/public/blockstart/demos/index.html @@ -19,6 +19,7 @@ grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; + max-width: 1080px; } @media only screen and (max-width: 600px) { @@ -30,6 +31,8 @@ + + blockstart.css
    @@ -40,10 +43,10 @@
    - +

    Demos

    -

    Here are a few simple demos of using blockstart.css to create copies of landing pages. Copying other websites is a great way to learn web development. The text in the demos is either taken from the "inspiration" site, or is from hipster ipsum.

    +

    Here are a few simple demos of using blockstart.css to create copies of landing pages. Copying other websites is a great way to learn web development. The text in the demos is either taken from the "inspiration" site, or is from hipster ipsum.

    WARNING The entire point of this project is to remove irrelevant details in the beginning of a project. Making a web page work on every imaginable aspect ratio just so Google and Apple don't have to make their browsers work correctly is exactly the kind of detail people should ignore when they start. What that means is NONE of these demos work on mobile. Maybe they do, maybe they don't, but they are on desktop because I use a desktop to make them and that's the easiest start. Nothing prevents you from starting with moblile using blockstart.css if you like "mobile first", so don't take me avoiding it in the start as some indication of a flaw. It's a choice, and I am aware of it.

    @@ -51,7 +54,7 @@
    - + Asana Canva Todoist @@ -60,11 +63,11 @@ Vimeo Wordstream Breadcrumbs + Breadcrumbs #2 + Breadcrumbs #3 Snapchat - Patreon - Slack - Zoom -     +     + diff --git a/public/blockstart/demos/pandadoc.html b/public/blockstart/demos/pandadoc.html index 2db28ac..824efa5 100644 --- a/public/blockstart/demos/pandadoc.html +++ b/public/blockstart/demos/pandadoc.html @@ -14,6 +14,7 @@ + blockstart.css
    @@ -25,5 +26,6 @@

    Coming soon...

    + diff --git a/public/blockstart/demos/patreon-2.html b/public/blockstart/demos/patreon-2.html deleted file mode 100644 index 2c2f490..0000000 --- a/public/blockstart/demos/patreon-2.html +++ /dev/null @@ -1,273 +0,0 @@ - - - - - - - Blockstart Patreon Demo - - - - - - - - -
    - - P - - Log In - Create on Patreon - = - - - -
    - - -

    Flexitarian Vice Poutine Synth

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    - Get started - -
    - -

    Video

    -     -     - - - -

    Thundercats Tonx Pok Pok Pork

    - - - - Search - -     - - - -

    What's Patreon?

    -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

    -     - - -

    Thundercats Tonx Pok Pok Pork

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    - -

    Person

    -     - Person Name -

    Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.

    -     - - -

    Flexitarian Vice Poutine Synth

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    - -

    Person

    -     - Person Name -

    Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.

    -     - - -

    This is another example block

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    - -

    Person

    -     - Person Name -

    Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.

    -     - - -

    Who uses Patreon?

    -

    - If you’re ready to take your work to the next level and willing to open your heart to your audience, Patreon is for you. -

    - - Flexitarian - Vice - Poutine - Synth - Thundercats - Tonx - Pok - Pok - Pork - Synth - Thundercats - Tonx - Pok - Pok - Pork - - -
    - -

    People Scroller

    -     -     - - - -

    Are you ready to take back control?

    - Get started -     -     - - -
    - -

    Footer

    -     - - -

    Links

    -     -
    - - diff --git a/public/blockstart/demos/patreon.html b/public/blockstart/demos/patreon.html deleted file mode 100644 index 325fb07..0000000 --- a/public/blockstart/demos/patreon.html +++ /dev/null @@ -1,131 +0,0 @@ - - - - - - - Blockstart Patreon Demo - - - - - - - - - - - P -
    - Log In - Create - = -
    -     - -     - - -

    Flexitarian Vice Poutine Synth

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    -
    - -
    - -
    - -

    Video

    -     -     - - - -

    Thundercats Tonx Pok Pok Pork

    - - - - - -     - - - -

    What's Patreon?

    -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

    -     - - -

    Thundercats Tonx Pok Pok Pork

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    - -

    Person

    -     - Person Name -

    Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.

    -     - - -

    Flexitarian Vice Poutine Synth

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    - -

    Person

    -     - Person Name -

    Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.

    -     - - -

    This is another example block

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    - -

    Person

    -     - Person Name -

    Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.

    -     - - -

    Who uses Patreon?

    - -
    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    -
    -
    - Flexitarian - Vice - Poutine - Synth - Thundercats - Tonx - Pok - Pok - Pork -
    - -
    - -

    People Scroller

    -     -     - - - -

    Are you ready to take back control?

    - -     -     - - - -

    Footer

    -     - - diff --git a/public/blockstart/demos/shopify.html b/public/blockstart/demos/shopify.html index 2db28ac..824efa5 100644 --- a/public/blockstart/demos/shopify.html +++ b/public/blockstart/demos/shopify.html @@ -14,6 +14,7 @@ + blockstart.css
    @@ -25,5 +26,6 @@

    Coming soon...

    + diff --git a/public/blockstart/demos/slack.html b/public/blockstart/demos/slack.html deleted file mode 100644 index 87b03a6..0000000 --- a/public/blockstart/demos/slack.html +++ /dev/null @@ -1,153 +0,0 @@ - - - - - - - Blockstart Slack Demo - - - - - - - - - SLACK -
    - Q   - =   -
    -     - - -

    Flexitarian Vice Poutine Synth

    -

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac..

    - - - -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    -
    - -

    Phone Demo

    -     -     - - -

    TRUSTED BY COMPANIES ALL OVER THE WORLD

    -
    -
    Flexitarian Vice Poutine Synth Flexitarian Vice Poutine Synth
    -     - - - -

    People Dancing For Work

    -     -     - - -

    Thundercats Tonx Pok Pok Pork

    - -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa.

    - Link to stuff. -     - -
    - - -

    People Dancing For Work

    -     -     - - -

    Thundercats Tonx Pok Pok Pork

    - -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa.

    - Link to stuff. -     - -
    - - -

    People Dancing For Work

    -     -     - - -

    Thundercats Tonx Pok Pok Pork

    - -

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa.

    - Link to stuff. -     - - -
    - - - -

    Thundercats Tonx Pok Pok Pork

    -

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    - - -     - - - -

    75%

    - Cardigan raclette tbh, kitsch lomo fanny pack vegan. -     - -

    84%

    - Cardigan raclette tbh, kitsch lomo fanny pack vegan. -     - -

    91%

    - Cardigan raclette tbh, kitsch lomo fanny pack vegan. -     -     -     - - -

    Video

    -     - - -
    - "I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa." -- Quote Person -
    -     - -
    - - -

    Card

    -     - -

    Card

    -     - -

    Card

    -     - -

    Card

    -     -     - -
    - - -

    Welcome to your new digital HQ

    - - - -     -     - -
    - -

    Footer

    -     - - - diff --git a/public/blockstart/demos/snapchat.html b/public/blockstart/demos/snapchat.html index 5a69fdf..d8cd44c 100644 --- a/public/blockstart/demos/snapchat.html +++ b/public/blockstart/demos/snapchat.html @@ -8,15 +8,18 @@ - - + - - + + + snap -
    +
    Advertisers Creators Developers @@ -26,8 +29,8 @@
    - -
    + +

    Open your
    Snapchat.

    @@ -44,20 +47,20 @@
    - +

    Screen

         - +

    Express yourself with millions of Lenses.
    - - + +

    Express yourself with millions of Lenses.

     @@ -68,20 +71,20 @@
    - +

    Screen

         - +

    Express yourself with millions of Lenses.
    - - + +

    Express yourself with millions of Lenses.

     @@ -92,12 +95,12 @@
    - +

    Ghost

     - + @@ -110,8 +113,9 @@

    Developers

     - +

    Footer

     + diff --git a/public/blockstart/demos/square.html b/public/blockstart/demos/square.html index 4427fcf..3db6ab3 100644 --- a/public/blockstart/demos/square.html +++ b/public/blockstart/demos/square.html @@ -16,17 +16,28 @@ h1 { +

    square

    S | =

     - -

    Flexible business solutions that work for you.

    - - - - + + +
    +

    Power your business with square.

    +

    Millions of brands of all sizes trust Square to accept payments, build customer relationships, and grow their business in-store and online.

    +
    + + + + + +     + + +

    Image

    +
    @@ -35,8 +46,8 @@ h1 {
    - - + +

    Tools that connect every side of your business.

     @@ -50,27 +61,27 @@ h1 {
    - - - + + + - +

    Ipad

         -     +     - +

    Solution sets for every business type and size.
    - +

    Retail

    + @@ -90,7 +101,7 @@ h1 {
    - +

    Meet the new Square Stand.

     @@ -99,7 +110,7 @@ h1 {
    - +

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    $149 or blah blah
    @@ -108,8 +119,8 @@ h1 {
    - - + +

    Resources to keep you moving forward.

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.
    Visit our fill resource hub @@ -120,7 +131,7 @@ h1 {
    - +

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.
    Visit our fill resource hub @@ -130,10 +141,10 @@ h1 {

    Person

    -     +     - +

    Get real support.

    @@ -152,9 +163,10 @@ h1 {
    - +

    Footer

     +     diff --git a/public/blockstart/demos/todoist.html b/public/blockstart/demos/todoist.html index cf5ce5f..2c7fc6b 100644 --- a/public/blockstart/demos/todoist.html +++ b/public/blockstart/demos/todoist.html @@ -1,4 +1,3 @@ - @@ -15,6 +14,7 @@ + todoist
    @@ -31,10 +31,10 @@

    Organize your work

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    - +

    Screenshot

     - + 300,000 reviews @@ -46,13 +46,13 @@
    - - - + + +

    Add your tasks.

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

     - +

    Phone

     @@ -61,12 +61,12 @@
    - +

    Phone

         - +

    Flexitarian Vice Poutine Synth

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.

     @@ -113,7 +113,7 @@

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    - + Icon
    30 million+
    @@ -136,7 +136,7 @@     -     +
    @@ -151,5 +151,6 @@

    Footer

     + diff --git a/public/blockstart/demos/vidyard.html b/public/blockstart/demos/vidyard.html index 2db28ac..824efa5 100644 --- a/public/blockstart/demos/vidyard.html +++ b/public/blockstart/demos/vidyard.html @@ -14,6 +14,7 @@ + blockstart.css
    @@ -25,5 +26,6 @@

    Coming soon...

    + diff --git a/public/blockstart/demos/vimeo.html b/public/blockstart/demos/vimeo.html index 1fd73b4..b44360c 100644 --- a/public/blockstart/demos/vimeo.html +++ b/public/blockstart/demos/vimeo.html @@ -14,36 +14,37 @@ - + + vimeo
    - -

    Scrolling thing

    -

    With Vimeo

    + +

    Scrolling thing

    +

    With Vimeo

    - - - - + + + +     - +

    Scroll Sample

         - +

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

     - +

    Video Marketing

     @@ -55,48 +56,48 @@     - - + +

    INTEGRATIONS

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

     - - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     - + +

    Company

    -     +     - +

    Flexitarian Vice Poutine Synth

    - +

    Scroller

     @@ -104,14 +105,15 @@

    Ready to unlock the power of video?

    - - - - + + + +     - +

    Footer

     +     diff --git a/public/blockstart/demos/wordstream.html b/public/blockstart/demos/wordstream.html index e1e6546..b4d7306 100644 --- a/public/blockstart/demos/wordstream.html +++ b/public/blockstart/demos/wordstream.html @@ -14,7 +14,8 @@ - + + wordstream
    =  |  @@ -22,7 +23,7 @@
    - +

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

    @@ -32,13 +33,13 @@     - +

    Charts

         - +

    Stop Guessing.

    Get Your Grade.

    @@ -57,10 +58,10 @@
    - +

    The WordStream Blog

    - +

    Image

     @@ -75,10 +76,10 @@     - +

    More Articles

    - +

    Image

     @@ -92,7 +93,7 @@     - +

    Flexitarian Vice Poutine Synth

    Thundercats Tonx Pok Pok Pork

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

    @@ -109,18 +110,18 @@
    - +

    Charts

         - +

    Thundercats Tonx Pok Pok Pork

    I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.

    - +

    300k

     @@ -135,7 +136,7 @@     - + Computer

    Flexitarian Vice Poutine Synth

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    @@ -145,11 +146,11 @@     - +

    Learn More About Marketing

    Link to stuff - +

    Image

     @@ -162,15 +163,16 @@     - +

    Cardigan raclette tbh, kitsch lomo fanny pack vegan.

    Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.

     - +

    Footer

     +     diff --git a/public/blockstart/demos/zoom.html b/public/blockstart/demos/zoom.html deleted file mode 100644 index 2db28ac..0000000 --- a/public/blockstart/demos/zoom.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - Blockstart Template - - - - - - - - - - blockstart.css -
    - About  |  - Docs  |  - Demos  |  - Download -
    -     - -

    Coming soon...

    - - diff --git a/public/blockstart/index.html b/public/blockstart/index.html index 3d64a2b..c40e18d 100644 --- a/public/blockstart/index.html +++ b/public/blockstart/index.html @@ -19,12 +19,17 @@ border-radius: var(--border-radius); font-size: 1.1em; } + + body { + font-size: 1.2em; + } - + + blockstart.css
    About  |  @@ -34,14 +39,15 @@
    - -
    + +

    The blockstart.css

    Quickly get your initial layout idea done with minimal CSS and HTML.

     - + +

    About blockstart.css

    The blockstart.css file gives you a simple set of basic layout primitives to get started. It allows you to follow a simple process:

    @@ -74,6 +80,20 @@

    I am inside a block.

    +

    Width and Height

    + +

    You can set the width and height of a <block> (or immediate children) by simply setting the --w and --h variables: + +

    
+<block style="--w: 400px; --h: 200px;">400x200 block</block>
+
    + +

    That will make a block that's 400px by 200px.

    + +

    .fill

    + +

    If you just want a block to fill its parent then give it the class .fill. That will probably make it expand to fill, but it's kind of dodgy whether it works as expected. If it's not working then just remove it and use the --h and --w.

    +

    Debugging

    Not sure where the boxes are? Add class="debug" to the block (or grid) and it will put a red border around the outer box, then a blue border around the children:

    @@ -99,17 +119,17 @@

    In that example, the "No Flex" lines are spaced normally because the code has class="no-flex" on that block.

    -

    Solid Blocks

    +

    Block Values and Text

    -

    You can make a block solid with class="solid"

    +

    All blocks have a --value variable that sets the backgrond value, and --text for the text value. A "value" is a number 0-9 that indicates the darkness or lightness of an object. Think of it as the amount of light in the object, with 0 meaning no light, and 9 being all the light. Here is a --value: 0; --text: 9;

    - +

    I am inside a solid block.

     -

    Notice how it takes up the whole page? Notice how it's monochrome? That's all you need. You can change the "value" of a solid block with a variable style="--value: 3":

    +

    Notice how it takes up the whole page width? Notice how it's monochrome? That's all you need. You can change the "value" of a solid block with a variable style="--value: 3":

    - +

    I am inside a solid dark block.

     @@ -122,18 +142,42 @@

    We can fix that last block's contrast with value 9 text using style="--text: 9;":

    - +

    I am inside a solid dark block too.

    If we use style="--value: 0; --text: 9;" we can get a high contast dark block:

    - +

    I am inside a solid black block.

    Values make it easier to solve contrast in your designs because you don't have to think about thousands of colors and their luminance levels. Just make the difference in value between your text (the subject) and background (the ground) to increase contrast. In the previous block the difference was 9 because background is value 0 and text is value 9.

    +

    Fixed Values

    + +

    There are 10 preset values you can use in other CSS settings:

    + +
    --value0: hsl(0, 0%, calc(0 * var(--value-scale)));
+--value1: hsl(0, 0%, calc(1 * var(--value-scale)));
+--value2: hsl(0, 0%, calc(2 * var(--value-scale)));
+--value3: hsl(0, 0%, calc(3 * var(--value-scale)));
+--value4: hsl(0, 0%, calc(4 * var(--value-scale)));
+--value5: hsl(0, 0%, calc(5 * var(--value-scale)));
+--value6: hsl(0, 0%, calc(6 * var(--value-scale)));
+--value7: hsl(0, 0%, calc(7 * var(--value-scale)));
+--value8: hsl(0, 0%, calc(8 * var(--value-scale)));
+--value9: hsl(0, 0%, calc(9 * var(--value-scale)));
+
    + +

    These are useful when you need to set something that's not covered by Blockstart. Say you want to add a bottom-border that's middle gray:

    + +
    <block style="border-bottom: 1px solid var(--value5);">
    + +

    .solid

    + +

    For convenience you can just add a class="solid" and get a default gray background + with light text.

    Shapes

    @@ -147,7 +191,7 @@

    Padding

    -

    Just add class="pad" to give a simple 1rem padding to a block. Use the variable style="--pad: 1rem" to change its padding.

    +

    Just the variable style="--pad: 1rem" to change its padding.

    Borders

    @@ -176,49 +220,12 @@

    You can also add class="center-self" on elements that you want to center but not really the contents, and when it's not explicitly a block tag but you want it centered.

    - - + + DEMO -

    Patterns

    - -

    Sometimes you need a little indicator for a block to make it different for later changes. You can use three patterns of stripes, lines, and dots.

    - - - -

    Solid

    -     - - -

    Dots

    -     - - -

    Lines

    -     -     - -

    You can change the line/dot/stripe color with --pat-val, and combine it with the block background setting --value. For example, these are all white patterns on black blocks:

    - - - -

    Dots

    -     - - -

    Lines

    -     - - -

    Stripes

    -     - -

    Horizontal

    By default blocks are vertical, like a web page, because blocks being horizontal by default is stupid. You can make a block horizontal with class="horizontal", and then make it vertical again with class="vertical". Here's a side-by-side block using horizontal:

    @@ -253,11 +260,11 @@

    You set the rows, columns, and gap with style variables --rows, --cols, and --gap like so: -

    <grid style="--rows: auto; --cols: 1fr 1fr 1fr; --gap: 1rem;">
    +
    <grid style="--rows: auto; --cols: 3; --gap: 1rem;">

    Here is that grid setting using blocks inside for each of the patterns:

    - +

    Grids

     @@ -266,15 +273,15 @@

    Solid

     - +

    Dots

     - +

    Lines

     - +

    Stripes

     @@ -283,17 +290,17 @@

    Solid

     -

    Dots

     -

    Lines

     -

    Stripes

     @@ -304,26 +311,25 @@

    Frequently you need to use multiple layers as in an image with text on top. You might not need this in the layout phase, but in the first statement it does come up. The stack tag will position all of it's children on top of each other in order, and you can set one as the top with class="top".

    -

    In this demo I have a block with "I'm on Bottom" that I cover with another block that uses a stripes pattern. This gives the effect of putting the text behind bars. Remember that these stack in the reverse order you write them, unless you tag one with class="top". +

    In this demo I have a block with "I'm on Bottom" that I cover with another block that uses a transparent gray background. This gives the effect of putting a "screen". Remember that these stack in the reverse order you write them, unless you tag one with class="top".

    - +

    I'm on Bottom

     - +

    I'm on Top

         -

    I put class="debug" around the "I'm on Top" class so you can see where it gets placed. The "top" block has the lines and you can read the text clearly. The "I'm on Bottom" text is hiding behined these lines. +

    I put class="debug" around the "I'm on Top" class so you can see where it gets placed. The "top" block has the transparent gray background. The "I'm on Bottom" text is hiding behined it, but looks like it has a gray background. View the source to see what I'm talking about.

    Content

    -

    Many times you want one section to take up the whole page width, but then content under that to be padded. You can just manually set the width most of the time, or use the content tag. Add on the class="pad" to give it padding, or class="sized" to set its width or height. -

    +

    If you toss <p> inside a block tag it'll act like any other tags, taking on the block settings. Remember that Blockstart is about big chunky layout blocks, so all you have to do is wrap your content in a regular old <div> and the content will display the way you expect.

    Getting Started

    @@ -364,6 +370,8 @@ npx http-server -d -c-1 public

    There's a lot you can add to an HTML page to make it work on different platforms, including all the icons ever invented by Apple, but this file gets you started when using the blockstart.css.

    - +
    +     +