CosmicElse Builder
A visual builder for real responsive pages.
Builder is for people who want to see the page while they make it, and keep a file when they are done. It is not a theme you fill in. It is the page itself: structure, type, pictures, and the three sizes a site has to survive.
You can open it now. The other CosmicElse tools cannot say that yet.
You edit the page, not a stand-in for the page.
What you arrange is the document: a header, a main, sections, rows, columns, type, and pictures. Flow is the ordinary way things sit. Something can be placed freely when a caption needs to overlap a photograph, as on the home page.
Preview shows that same document. Export writes it as HTML and CSS. There is not a second, prettier version waiting somewhere else.
Three sizes
Desktop, Tablet, and Mobile are edited on their own.
Tablet does not quietly become the phone. A change on one size stays there unless you also make it on the others. Type can drop, a row can stack, a picture can get shorter, and the navigation can wrap, each decision on purpose.
Desktop
1440
The wide page. Headlines can be large. Pictures can sit beside the words.
Tablet
768
A middle width. Rows often stack. The type comes down. Nothing is borrowed from the phone.
Mobile
390
The narrow page. Navigation wraps. Measures get shorter. The same document, a different set of decisions.
Pages
A site is more than a long home page.
This website is five pages in one document: Home, Builder, Products, About, and Contact. The header links are page links. In Preview they move you. In an export they become real paths.
You write each page on its own. The header and footer are part of each page, so a site can share a voice without pretending five pages are one scroll.
Home
The invitation, and the family at a glance.
Builder
The long explanation. This page.
Products
Each tool, with an honest status.
About
Why the tools are separate.
Contact
A note, and an address.
Structure
The page has parts, and the parts have names.
Header, navigation, main, sections, rows, columns, grids. Naming them is the work. A heading is not a picture of a heading, and a button is not an underlined address.
CosmicElse
Home
Builder
Products
About
Contact
Main
A heading you wrote.
Column
Type, sitting in the flow.
Image
A picture, with a fit and a description.
Footer
HTML / CSS · .celse
Header
Wordmark, navigation, and the way out to Builder.
Main
The page’s own argument. It changes. The header does not have to.
Footer
The family, About, Contact, and a credit that names the tool.
Repeat a structure. Know what does not follow.
The header on this site is built the same way on every page, then duplicated. Change the one on About, and Home keeps the header it had. That is useful, and it is also a limit.
Templates can carry a starting document into a new project. A single shared block that updates in every place at once is not in Builder yet. If you need that, you should know before you promise it to a client.
Pictures
A picture should survive the layout.
Images keep an address, a fit, and a description. The description is for the person who cannot see the picture, and for you, six months later, when the filename means nothing.
On a narrow page the same picture can be shorter without being a different file. Cover keeps the subject. The frame changes.
Slider
A slider is a sequence, not a stack of empty frames.
Each slide here has a picture, a heading, and a line. The arrows are the navigation.
Chapter
A chapter, not a teaser
A slide can be the start of something to read. The heading is the title. The line is the reason to continue.
Picture
A picture with a date
Or the slide is mostly the image, and the words stay short enough to leave it alone.
Notice
A notice people can use
A time, a place, a thing to bring. A slider can carry practical news without turning into a billboard.
Video
Motion, only when someone asks.
A page can hold a video. This one does not play on its own. The sound stays off, the controls stay on, and a poster sits there until a person decides to watch.
It is a short still life, not a tour of the product. Builder does not need a loud reel to prove the player works.
Forms
A form is part of the page.
Name, email, a message, a choice. The fields are real controls: type, placeholder, focus, a label written beside them. They are not a picture of a form.
Builder draws the fields. It does not yet deliver the message. On this site, a reply still goes through hello@cosmicelse.com. The full note lives on Contact.
A small specimen
Name
These two fields are here to show the control. They do not send.
Styling
Type, a little colour, and edges you can see.
Serif for the slow lines. Sans for the ordinary sentences. Mono for a status. Violet marks the current page and a few rules. Coral, blue, green, and ochre belong to the other tools. Borders stay thin. A wash can warm a section without becoming the subject.
Pages
Home, Builder, Products, About, Contact. Five pages, one document.
Navigation
Header links are page links. In Preview they move you.
Components
Heading, text, button, image, video, slider, form.
The file
HTML and CSS out. A .celse file you can open again.
Export
HTML and CSS.
A page can leave as ordinary HTML and CSS. No account required to read it. The structure you built is the structure that ships.
.celse
The project, portable.
A .celse file is the document and its manifest. Open it in Builder again. The pages, the type, and the links are still the same work.
The work should survive the tool.
You can export HTML and CSS. You can keep the .celse file and open it again. A project on this machine stays here unless you move it. Publishing is a separate step, not a lock.
A diary you cannot take with you is not a diary. A portfolio you cannot export is a display case. That is the standard the rest of the family is being held to.
