We've designed Glitch in Bio to be open and extensible, so that community members can share and reuse remixes! If you see a cool remix, you can include its code in your own to achieve the same effect. The parts of the project you import into yours will depend on which bits of the site the creator has edited.
Have you already started working on your own Glitch in Bio site?
- If not, the quickest option is to remix the version you like and add your own links.
- If you have work in your own remix that you want to keep, you can import the theme from the cool project you've seen–read on to learn how to do that.
Style rules
Most themes will just be defined by a CSS file in the project. The styles are defined in a base sheet styles.css combined with a theme CSS sheet in the public/styles/themes/ folder. In the remix you like, open the source code (by choosing view source from the project page) and navigate to settings.json to see which theme is selected.
The JSON theme property will tell you the name of the theme currently displayed in the remix, for example in the original default app it's glitch.
Once you have the name of the theme, find it in public/styles/layout/ and open it.
Select everything in the CSS file and copy it to your clipboard.
Now, do the following:
- In your own project, create a new file in
public/styles/layout/ - Give the file the same name as the one in the project you're copying from (or another name as long as you use
.cssextension). - Paste the CSS you copied into your new file.
- In your own
settings.json, update thethemeproperty to use the filename you added to your project, e.g.portfolio.
With any luck your site will now look the same as the one you like! If not there may be other changes in the project to look for.
Additional extensions
- The
styles.cssfile may also have changes in it - The
index.htmlpage may have additional layout components or a different layout - The partial HTML files in the
layoutfolder may have been added to or edited - The settings JSON may have extra properties in it
- The site config in
vite.config.jsmay have been extended to alter the functionality
Hopefully the creator will have provided detail of what they did with their Glitch in Bio remix! Check out the project README and any other information in it for clues.