2.5 KiB
create-svelte
Everything you need to build a Svelte project, powered by create-svelte.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
Developing
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
////////////////
Right now, my signup page is set up like that:
svelte:head </svelte:head>
{#if showModal} <Modal {modalMessage} on:close={closeModal} /> {/if}
And input is set up like that in styles/forms.scss:
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select { padding: 12px 0px; margin: 8px 0; box-sizing: border-box; border: none; border-bottom: 5px solid $fg-color; background-color: $bg-color; color: $fg-color; font-size: 1.2rem; font-weight: 400; &:focus { outline: none; border-bottom: 5px solid $red; } }
So the email field has a red border on bottom when focused.
I would like that borer to become green when the email is valid.