Styling
CSS styling for PieDAO frontend apps uses tailwindcss as a framework. In addition to the default style options, which are searchable on the excellent tailwindcss docs site, we have included several additional options outlined in this section.
We use the following media sizes for responsiveness.
sm: 640px
md: 768px
lg: 960px
xl: 1200px
xxl: 1600px
When creating your base style, use a "smallest first" approach. Your style sheet should define how elements will look at 480px width (the implied smallest width). Individual styles can be overridden by using a @media <size> { ... } block.
/* Stylesheet */
div.label {
@apply w-100pc bg-blue rounded;
}
@screen lg {
div.label {
@apply w-80px;
}
}
<!-- DOM -->
<div className="label">...</div>```
In the example above, the div would always have a blue background and rounded edges. It would be 100 percent width until the screen is 960px wide or more, at which point it would decrease to 80 percent width.
Convention is critical to maintaining a clean codebase. We ask you to follow the practices outline in this section is you write your CSS.
Soft tabs, two spaces
Wrap your components in a class named `.<component>-container`.
const Footer = () => (
<div className="footer-container">
<!-- ... -->
</div>
);
Group your styles by component
/* Global */
body { ... }
h1 { ... }
/* Header */
.header-container { ... }
.header-container .left { ... }
.header-container .right { ... }
/* Footer */
.footer-container { ... }
Prefer `@apply` over inline classes to achieve maximum separation of concerns.
We do not want a bunch of classes polluting the JSX files.
<img src="/assets/img/aragon.svg" className="aragon lg:ml-20px lg:mt-0" />
.footer-container .aragon {
@apply h-30px mt-10px;
}
You can override the default @media breakpoints when it makes sense, but use sparingly. When you do, use one override for an entire section of CSS.
/* good */
@media (max-width: 800px) {
.footer-container {
flex-direction: column;
}
.footer-container .left {
flex-direction: column;
}
.footer-container .right {
flex-direction: column;
}
}
/* bad */
@media (max-width: 800px) {
.footer-container {
flex-direction: column;
}
}
/* ... other styles ... */
@media (max-width: 800px) {
.footer-container .left {
flex-direction: column;
}
}
/* ... other styles ... */
@media (max-width: 800px) {
.footer-container .right {
flex-direction: column;
}
}
We have a core set of colors, several variants of grey, and a core set of label colors. We will be working to standardize these a bit further in the future. All of these colors are also available for background, border, placeholder, and text use.
.text-black { color: #000000; }
.text-blue { color: #7d78d1; }
.text-green { color: #2db400; }
.text-grey { color: #b7b7b7; }
.text-pink { color: #f40a50; }
.text-red { color: #ff0000; }
.text-white { color: #ffffff; }
.border-grey-10 { border-color: #0a0a0a; }
.border-grey-51 { border-color: #333333; }
.border-grey-115 { border-color: #737373; }
.border-grey-204 { border-color: #cccccc; }
.border-grey-243 { border-color: #f3f3f3; }
.border-grey-246 { border-color: #f6f6f6; }
.bg-label-blue { background-color: #305cee; }
.bg-label-cyan { background-color: #1ec0ff; }
.bg-label-gradient { background-color: linear-gradient(to right, #f10096 0%, #21d7ff 100%); }
.bg-label-green { background-color: #2db400; }
.bg-label-pink { background-color: #fc02a7; }
.bg-label-purple { background-color: #9080dc; }
.bg-label-red { background-color: #ff0053; }
.bg-label-teal { background-color: #79f2c3; }
.bg-label-yellow { background-color: #f8e71c; }
.bg-label-yellow-alt { background-color: #ffcd1d; }
In the default tailwindcss configuration, spacing scale is shared by padding, margin, width, and height. We extend that to include min and max width and min and max height.
REM spacing is relative to the font size of the html element (which for most browsers is 16px by default). As tailwindcss mentions in their section on the default spacing scale, one spacing unit is equal to 0.25rem, which will usually equal 4px. Tailwind provides intermittent intervals up to 16rem, we extend that to 60rem and provide every increment.
.h-0 { height: 0; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
/* ... */
.h-237 { height: 59.25rem; }
.h-238 { height: 59.5rem; }
.h-239 { height: 59.75rem; }
.h-240 { height: 60rem; }
Because REM spacing is relative, we also provide pixel values for more exact use cases. Specifically, whole number values from 1px to 100px, and by tens from 100px to 1280px.
.w-1px { width: 1px; }
.w-2px { width: 2px; }
/* ... */
.w-99px { width: 99px; }
.w-100px { width: 100px; }
.w-110px { width: 110px; }
.w-120px { width: 120px; }
/* ... */
.w-1260px { width: 1260px; }
.w-1270px { width: 1270px; }
.w-1280px { width: 1280px; }
Classes for values from 1% to 100% are also included.
.p-1pc { padding: 1%; }
.p-2pc { padding: 2%; }
/* ... */
.p-99pc { padding: 99%; }
.p-100pc { padding: 100%; }
This class provides our standard button styling. It is not scoped to the <button> element. The full style provided can be seen at the Github repo for @pie-dao/tailwind.
Provides a 90% transparent overlay class and a class for the close button. The full style can be seen at the Github repo for @pie-dao/tailwind. A sample implementation can be seen in the Header component of the frontend-template repository.
These classes can be used with @apply. More details about utilities and creating your own can be found in the tailwindcss docs.
This class provides the core styles for a component's container. The full style provided can be seen at the Github repo for @pie-dao/tailwind.
.header-container {
@apply content font-secondary;
}
This class is the same as .cursor-pointer. We use it often enough that a shorthand version was desired.
.pointer { cursor: pointer; }
The following default tailwindcss classes have been overridden. You should not trust the official documentation for these sections and instead use the values below.
See the colors section above.
We've overridden the defaults and added both pixel and percentage values. Pixel values are provided from 1px to 50px. Percentage values are provided from 1% to 100%.
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 1rem; }
.rounded { border-radius: 2rem; }
.rounded-md { border-radius: 2.5rem; }
.rounded-lg { border-radius: 4rem; }
.rounded-1px { border-radius: 1px; }
.rounded-2px { border-radius: 2px; }
/* ... */
.rounded-49px { border-radius: 49px; }
.rounded-50px { border-radius: 50px; }
.rounded-1pc { border-radius: 1%; }
.rounded-2pc { border-radius: 2%; }
/* ... */
.rounded-99pc { border-radius: 99%; }
.rounded-100pc { border-radius: 100%; }
There are two fonts, primary and secondary, that override the font family configuration shown here.
.font-primary { font-family: Rubik, sans-serif; }
.font-secondary { font-family: Roboto, monospace; }
There are nine default sizes and seven mobile sizes. We also provide view window sizes from values 1 to 20.
.text-xxs { font-size: 0.8rem; }
.text-xs { font-size: 0.83rem; }
.text-sm { font-size: 0.9rem; }
.text-md { font-size: 1rem; }
.text-base { font-size: 1.1rem; }
.text-lg { font-size: 1.5rem; }
.text-xl { font-size: 2.3rem; }
.text-xxl { font-size: 4rem; }
.text-xxxl { font-size: 6rem; }
.text-xxxxl { font-size: 10rem; }
.text-m-xs { font-size: 0.5rem; }
.text-m-sm { font-size: 0.6rem; }
.text-m-lg { font-size: 1.3rem; }
.text-m-xl { font-size: 2rem; }
.text-m-xxl { font-size: 5rem; }
.text-m-xxxl { font-size: 7rem; }
.text-vw1 { font-size: 1vw; }
.text-vw2 { font-size: 2vw; }
.text-vw3 { font-size: 3vw; }
.text-vw4 { font-size: 4vw; }
.text-vw5 { font-size: 5vw; }
.text-vw6 { font-size: 6vw; }
.text-vw7 { font-size: 7vw; }
.text-vw8 { font-size: 8vw; }
.text-vw9 { font-size: 8vw; }
.text-vw10 { font-size: 10vw; }
.text-vw11 { font-size: 11vw; }
.text-vw12 { font-size: 12vw; }
.text-vw13 { font-size: 13vw; }
.text-vw14 { font-size: 14vw; }
.text-vw15 { font-size: 15vw; }
.text-vw16 { font-size: 16vw; }
.text-vw17 { font-size: 17vw; }
.text-vw18 { font-size: 18vw; }
.text-vw19 { font-size: 19vw; }
.text-vw20 { font-size: 20vw; }
We've replaced the default nine weights with only four.
.font-thin { font-weight: 100; }
.font-normal { font-weight: 300; }
.font-bold { font-weight: 500; }
.font-bolder { font-weight: 700; }
Opacity classes are provided by tenths, leaving namespace room for custom values in the hundreths.
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }
The following sections has additions beyond the tailwindcss default values. All of the defaults are included for these sections. The additions below are also available.
Percentage classes from 1% to 100% have been added to the three default background size classes.
.bg-1pc { background-size: 1%; }
.bg-2pc { background-size: 2%; }
/* ... */
.bg-99pc { background-size: 99%; }
.bg-100pc { background-size: 100%; }
The default border width settings provide classes for 2px, 4px, and 8px. We added the missing ones in between. These additions exist for both the all sides classes and the individual sides classes.
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }
.border-6 { border-width: 6px; }
.border-7 { border-width: 7px; }
.border-8 { border-width: 8px; }
See the spacing section above. Height also contains several classes beyond the ones provided by the spacing settings. You can view these on the tailwindcss documentation.
In addition to the tailwindcss default line heights, we've included all REM values up to 60rem as described in the spacing section above.
See the spacing section above.
See the spacing section above. Height also contains several classes beyond the ones provided by the spacing settings. You can view these on the tailwindcss documentation.
See the spacing section above. Height also contains many classes beyond the ones provided by the spacing settings. You can view these on the tailwindcss documentation.
See the spacing section above. Height also contains several classes beyond the ones provided by the spacing settings. You can view these on the tailwindcss documentation.
See the spacing section above. Height also contains several classes beyond the ones provided by the spacing settings. You can view these on the tailwindcss documentation.
See the spacing section above.
We've added a single extra class to the defaults provided by tailwindcss. Every percentage from 1% to 100% are also available.
.inset-1/2 {
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
}
.top-1pc { top: 1%; }
/* ... */
.top-100pc { top: 100%; }
See the spacing section above. Width also contains many class beyond the ones provided by the spacing settings. You can view these on the tailwindcss documentation.
