Just write content and we'll take care of the rest!
What is Boxes.css?
A CSS framework for building landing pages
Getting Started Videos 🎥
What problem does it solve?
Let's you publish an idea quickly (and for free)
✅ Almost no code or configuration
✅ Get your message out into the world
🚫 Complex website builders
🚫 Complex CSS frameworks
What are the available solutions?
Email marketing landing pages
Startup landing page builders
Build it yourself from scratch
😖 Lots of account setup & pages too simple
😖 Costs money & design is inflexible
😖 Tons of coding & bug fixes
What makes Boxes.css better?
⛵️ Doesn't require much code or setup
⛵️ Doesn't cost money
⛵️ Host it for free (GitHub/GitLab/Cloudflare Pages or Netlify/Render/AWS S3)
➡️ Basically: You get to stay 100% focused on your idea
Website built with Boxes.css
Todopal — a todo list that helps you prioritize big projects (source code)
MVL Guide — a guide launching products in the fastest way possible
Other Benefits
✅ Everything looks good by default
✅ It's easy to customize the layout how you want
✅ Easy to think about
Simple two column layout
Colors/sizing/spacing handled automatically
Design for 1 screen size and you've designed for them all!
How to use it (basic)
Throw down some section elements (i.e. boxes)
Put some content in them
Everything looks great by default on every screen size
Launch 🚀
Add the CSS to your page 🕺
Minified version
<link rel="stylesheet" type="text/css" href="https://unpkg.com/boxes-css@0.5.1/boxes.min.css">
HTML
Unminified version
<link rel="stylesheet" type="text/css" href="https://unpkg.com/boxes-css@0.5.1/boxes.css">
HTML
How you use it (detailed)
You just woke up from a dream with the best idea ever — you want to get it out into the world now! Instead of reaching for some paid site builder, you reach for Boxes.css and start writing:
"Minimum Viable Launch"
"Learn how to launch products quickly, while staying true to your vision"
Main button: "Sign up for updates"
With a normal page builder, you'd have to sign up, pay, upload logos and images, customize font and colors and configure forms and emails. It'd be half a day before you got to see results.
With Boxes.css, it's just:
<section class="content">
<h1>Minimum Viable Launch</h1>
<h2>Learn how to launch products quickly, while staying true to your vision</h2>
<form>
<fieldset>
<input id="email" type="email" name="email">
<label for="email">Enter your email address</label>
</fieldset>
<button class="button" type="submit">Sign up for updates</button>
</form>
</section>
<section class="media">
<img src="./mvl.png" alt="the MVL pup riding a paper airplane">
</section>
HTML
Detailed Docs
Overview
Aspect ratio is maintained automatically (so you can use the same images/videos across every screen size)
Heading and text sizes are automatic (based on the screen size)
Spacing is automatic
Button colors are automatic based on the background color
Define for one screen size and they'll all look great automatically
What makes it unique?
No container or row elements to worry about
Only 3 screen sizes to think about (mobile, tablet, desktop)
Page layout determines content just as much as content determines layout
Media always has a 5:4 aspect ratio
Text needs to fit inside its box, so be brief!
How it works
The page is made up of boxes (i.e. section elements)
Boxes can either have media (class: media) or text (class: content)
Boxes inside of each other will have half their normal width & height
Colors
If you add a background color to the body element or a box (i.e. section) element, the color of the buttons and text inside it will adapt to look good
Responsiveness
On desktop, boxes are stacked next to each other and have the same 5:4 aspect ratio
On tablet, boxes are stacked on top of each other — except inner boxes, which will be next to each other
On mobile, all boxes are stacked on top of each other and content boxes are allowed to expand/contract to their natural height
Boxes
section elements preserve aspect ratio
Sizes
Top-level boxes
Inner boxes
Types
Content boxes
Attach a .content class to a section to make a content box
Media boxes
Attach a .media class to a section to make a media box
Then put an img, video, or svg with a 5:4 width:height ratio inside it — it willbe automatically sized
Raster images (png, jpg) should have a width of 1500px and a height of 1200px so they look good on retina displays
Vector images (svg) should have a width of 750px and a height of 600px (the max size any box will reach)
Container boxes (Have inner boxes)
the default box type
just use a section without a .media or .content class
Variants
.tall
.wide
Caveat: use variants freely on inner boxes, but only use on top-level boxes if they're section.media or section.content boxes
Non-section elements are just normal elements
Can add .content class to add padding and make it a row
Weird behavior, but good for
headings
nav
footer
vertical space! (especially)
Buttons
.button
.button.secondary
Button color applied automatically based on background color
Typography
Heading sizes
Font weight
100 - 900 in 100 increments
Forms
surround an input next to a label with a fieldset to turn the label into a floating label (technique from: https://csslayout.io/floating-label/)
<fieldset>
<input id="email" type="email">
<label for="email">Enter your email address</label>
</fieldset>
HTML
Colors
Background colors
Regular
.background-green
.background-blue
.background-yellow
Dark
.background-dark
.background-dark-green
.background-dark-blue
.background-dark-yellow
Light
.background-light-green
.background-light-blue
.background-light-yellow
Text colors
.white
.black
.green
.blue
.yellow
Utilities
Display type
.inline
.block
.flex
.grid
.inline-block
.inline-grid
.inline-flex
Responsive display type
Prepend display type with .mobile-, .tablet-, or .desktop- to make them only display that way on certain screen sizes (or use them without display types to default to display: block)
For example
<div class="mobile-inline">Hello</div> will display its element as display: inline on ONLY mobile devices — and will be hidden on tablet and desktop screens
<div class="mobile-flex desktop-flex">Hello</div> will display its element as display: flex on BOTH mobile and tablet screens, but will be hidden on tablet screens
<div class="mobile tablet">Hello</div> will display its element as display: block on BOTH mobile and tablet screens, but will be hidden on desktop screens
Alignment
General alignment
.vertical-center
this is the default alignment for section.content boxes
.horizontal-left
this is the default for div.content boxes
.vertical-top
Center (text and containers)
.center
Text align
just .left-align
Opacity
.5 - .9 in 5 increments
Weird classes, but so simple to use — you just need to include the . when defining the class: <div class=".65">Low opacity text</div>
Extras
Nav & logo
wrap your logo and nav elements in a <div class="content wide"> element (this will make it display as a row):
<div class="content wide">
<img class="logo" src="logo.svg">
<nav>
<a href="/user/signup">Sign up</a>
<a href="/user/login">Login</a>
</nav>
</div>
HTML
Note: you should probably only have max 2 links in your nav for now
Ignore aspect ratio for inner content boxes (on tablet)
.tablet-wide-inner-content-boxes
This can make some content look a lot better on tablet devices
Attach it to a top-level section element (i.e. a box)
It makes inner boxes expand to their full width and natural height on tablet devices instead of putting them in 4 aspect ratio boxes that each take up a quarter of a larger box
Will look good if you have 4 inner .content boxes inside a top-level section element, but not as useful if one of the inner boxes is a .media box
Shift (only desktop screens for now — because you'll most likely want to shift things around a bit on desktop screens)
centering
.desktop-shift-contents-left-to-center
.desktop-body-top-space-same-as-sides
small shifts (small, regular, large)
.desktop-shift-contents-left-small
.desktop-shift-contents-right-small
.desktop-shift-contents-left
.desktop-shift-contents-right
.desktop-shift-contents-left-large
.desktop-shift-contents-right-large
Clickable media
.clickable-media
Youtube video popup
Use this library: https://appleple.github.io/modal-video/
new ModalVideo('.todopal-overview-video');
Boxes.css Philosophy
The reason people aren't buying your products
Isn't because of
The font you use
The colors you use
It is because of
The words you use
Responsiveness
We find a shortcut around all the issues here by always having two columns and stacking them on top of each other on tablet/mobile
Things look good on desktop, but not ultra wide
Things look fine on tablet, but we don't care too much — such a low market share and as long as the info is there, we're good
DO
Trust the defaults
Include inline CSS to adapt layout on the fly
Repeat sections and content and just hide some of them on different screen sizes
DO NOT
Add a custom font — the system font is fast, beautiful, and perfect
Try to customize the button or background colors — only use what's there
Use media queries
Instead of writing custom media queries, just copy and paste an entire section of your page, add the styles you want on (e.g. mobile) inline