CSS Styleguide
Use Tailwind CSS classes
<template>
<div class="mb-5 w-full">
<!-- content... -->
</div>
</template>
This is correct
<template>
<div class="wrapper">
<!-- content... -->
</div>
</template>
<style lang="scss" scoped>
.wrapper {
width: full;
margin-bottom: 1.25rem;
}
</style>
This will make your code hard to read
Avoid using @apply in <style>
<template>
<Desk class="border-r border-red-400 pr-3" />
</template>
This is correct
<template>
<Desk class="desk" />
</template>
<style lang="scss" scoped>
.desk {
@apply border-r border-red-400 pr-3;
}
</style>
This will make your code hard to read
Do not add outer L/R margin or padding
<template>
<Block class="border-t border-black">
<!-- content... -->
</Block>
</template>
This is correct
<template>
<Block class="border-t border-black p-5">
<!-- content... -->
</Block>
</template>
In development, blocks must be full width as in production, they are wrapped within the restrictions of the
SpacingProvider
. Adding extra padding/margin will make your block look weird.
Apply aspect-ratio + object-cover to images
Storipress comes with
@tailwindcss/aspect-ratio
. Use it directly in your blocks.
<template>
<div class="aspect-w-16 aspect-h-9 relative">
<ResponsiveImage class="object-cover" :src="#" />
</div>
</template>
This is correct
<template>
<div class="relative">
<ResponsiveImage :src="#" />
</div>
</template>
When a user uploads a photo with a weird aspect ratio, this will break your block's intended look