In 2019, I created a CSS framework called Rotala.css. After some refactoring and tweaking, I finally released the toy framework in 2020. But it’s still in prototyping because I don’t think my solution is elegant yet.

At the beginning

The reason I built this framework was simple: I wanted a CSS framework myself.

I knew it would take a lot of time to build it from scratch. Therefore, I wanted to create such a framework on top of other powerful tools to speed up development.

Initially, I started prototyping using SASS. It is a tool that lets you combine many unique syntax so that you can experience CSS design as programming.

@mixin button-icon {
  margin: 0 2px;
}

.button {
  padding: 2px;

  @include button-icon;
}
Copy the code

To be honest, I learned a lot of good techniques from other well-known frameworks such as Bootstrap and Bulma and Spectre and Miligram. I borrowed some good designs from them, especially from Spectre.CSS (there’s no shame in copying someone else to reinvent the wheel).

retry

CSS has never been my forte, so I didn’t expect anything good from my initial prototype design. The first thing I did was fragile and copy-cat. There is no “I created” in the frame.

Even if it was just an inexperienced attempt, how could I afford such a bad result?

Without a doubt, I started from scratch. This time, I’m gonna make a great one. Good enough to make me smile.

By chance, I saw a video about a different CSS framework, Tailwind. CSS, which makes everything better. Maybe it’s time to give it a try.

Tailwind. CSS allows you to build your own frameworks with their “partical” style classes. I like this solution because it is the original use of HTML templates.

<button class="mx-4 p-2 text-gray-600 bg-gray-300">button</button>
Copy the code

Everything in tailwind.css is subdivided, so writing these classes into elements is like putting building blocks together.

However, my Rotala.css outputs stylesheets instead of templates. So, I had to find a way to get it to spit out some files at build time.

Research proved that my fears were unwarranted, as all styles in Tailwind. CSS can be compiled into a small CSS file with appropriate configuration just like SASS.

/* Base */
@import "tailwindcss/base";
@import "./base.pcss";

/* Components */
@import "tailwindcss/components";
@import "./components.pcss";
Copy the code

Use PostCSS-CLI to make compilation easy

$ postcss docs/main.pcss -o docs/assets/css/rotala.css
...
Copy the code

As you can see from the build command, I abandoned SASS entirely and migrated to Postcss. There’s nothing bad about SASS, but I just want my framework to use only one technique to avoid some of the complexity.

Building a source folder

After rebooting everything over and over again, I finally found a pattern that kept my codebase in good shape.

The source folder structure is as follows:

rotala/
  docs/
  style/
  CHANGELOG.md
  README.md
  package.json
  postcss.config.js
Copy the code

The docs/ folder is used to hold static files that can help with the output of the presentation. This is also an alternative setting for Github pages, which can easily help publish static pages without additional routing parameters.

docs/
  assets/
  base/
  components/
  index.html
  main.pcss
Copy the code

Style/contains all source styles. Initially, I made about 20 components because I thought they were essential to building the basics of a modern website. These styles are largely based on Spectre.CSS and Bulma (I’m a fan of these frameworks).

style/
  base/
  components/
    Accordion/
    Typography/
    Badge/
    Breadcrumb/
    Tooltip/
    Button/
    Checkbox/
    Divider/
    Drawer/
    Table Group/
    Form Group/
    Input/
    Tab/
    Avatar/
    Link/
    Menu/
    Modal/
    Notification/
    Pagination/
    Popover/
    Radio/
    Select/
  base.pcss
  components.pcss
  main.pcss
  prefix.pcss
Copy the code

Create different

When you read this line, you might ask: Since you’ve copied a lot of other frameworks’ designs, how is this different from other frameworks?

I had the same problem in mind, and my intention was to create my own CSS framework.

Remaking someone else’s work doesn’t seem like a “make it for yourself” spirit. This means that this little frame will always be my toy and of no value to other developers.

In fact, I want others to benefit from what I build. But I’m tired of reinventing everything from scratch. Is there an easy way to bring this moribund project back to life by adding some finishing touches?

It’s hard to be “different,” especially if you don’t have a great idea.

If I take a step back and consider the pros and cons of Tailwind. CSS, can I build a new feature based on the tradition of Tailwind. CSS and its “cons”? I think the answer is YES.

<div class="md:flex bg-white rounded-lg p-6">
  <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" />
  <div class="text-center md:text-left">
    <h2 class="text-lg">Erin Lindford</h2>
    <div class="text-purple-500">Customer Support</div>
    <div class="text-gray-600">[email protected]</div>
    <div class="text-gray-600">(555) 765-4321</div>
  </div>
</div>
Copy the code

Advantages of Tailwind. CSS:

  • There is no inflexible style
  • Low-level utility class
  • Customizable design
  • Plug-in system
  • Based on the Postcss ecosystem

Disadvantages of Tailwind. CSS:

  • Templates may be too “crowded”
  • The file size is “large” and needs to be cleaned up at build time.
  • Utilities have less semantics

Even if Tailwind. CSS has some disadvantages, I think these disadvantages are more than offset by the advantages. So in my framework, I need to come up with a plan to deal with these shortcomings.

I have to say that the second and third drawbacks are already part of the “feature” of tailwind.CSS, and I can’t get rid of them. But the first “crowded template” seems easy to balance. Thanks to the power of Tailwind. CSS, I can also write styles in the following ways:

.container {
  @apply bg-white rounded-lg p-6;

  @screen md {
    @applyflex; }}Copy the code

I’m sure “blow” looks a lot better, doesn’t it?

If I want to change the.container slightly, I can also decorate it directly using the “template style”.

<div class="container font-bold mx-2">.</div>
Copy the code

I know and understand that I’m not the first one to think this way, but at least it can be a nice feature for my framework to stand out from other frameworks.

The core function

Because I wanted to make a difference for my framework, I came up with these core features to do it: design-free and extensible.

First, Tailwind. CSS is “design-free” and gives our developers complete styling control. I’ll follow this and make sure that all of my components are just skeletons with very simple styles. The component will have the font text-size color background-color padding margins and so on, if desired.

.button {
  @apply appearance-none;
  @apply select-none;
  @apply align-middle;
  @apply font-medium;
  @apply text-center;
  @apply text-base;
  @apply no-underline;
  @apply leading-normal;
  @apply whitespace-no-wrap;
  @apply inline-block;
  @apply cursor-pointer;
  @apply rounded-sm;
  @apply py-1 px-3;
}
Copy the code

In this way, all components can be modified to the desired shape simply by adding a new style overlay. It follows the original practice of how we should deal with CSS styles.

Let’s say we’re styling a “skeleton button.”

From this:

To this:

<button class="button text-gray-700 bg-gray-300 hover:bg-gray-500 transition-colors duration-150">
  Background Gray
</button>
Copy the code

Simply put: Class + Utilities = your fashionable components.

The template looks too crowded, so a better way to use it might be to extend the current class.

.button {
  @apply text-gray-700;
  @apply bg-gray-300;
  @apply transition-colors
  @apply duration-150;

  &:hover {
    @apply bg-gray-500; }}Copy the code

conclusion

The rest of the task will be to implement all the other components I want to have in the framework. Each component takes less time to create than before, because I’ve defined how to use “skeleton” components as core functionality.

Now, all the necessary components can be used to build the site. There are still a lot of drawbacks, but I think building something from scratch that I’m not good at is an achievement for me.

Anyway, I’m going to keep developing the framework, and I hope you’re interested in my little job here.

Original text: pitayan.com/posts/css-f… Translated by Yanze Dai: Front-end Full Stack Developer