Shulou(Shulou.com)06/02 Report--

This article focuses on "how to create your own CSS framework". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to create your own CSS framework.

At first

The reason I built this framework is simple: I want a CSS framework myself.

I know it takes a lot of time to build it from scratch. Therefore, I want to stand on top of other powerful tools to create such a framework to speed up development.

Initially, I started prototyping using SASS. It is a tool that allows you to combine many unique grammars so that you can experience CSS design like programming.

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

Frankly, 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 is no shame in reinventing the wheel by imitating others).

Try again

CSS was never my specialty, so I didn't expect anything good from my original prototyping. The first thing I did was fragile and "copy-cat". There is no "what I created" in the framework.

Even if it is only an inexperienced attempt, how can I bear such a bad result?

There is no doubt that I will start from scratch. This time, I'm going to make a great one. It's great 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 try.

Https://tailwindui.com/

Tailwind.css allows you to build your own framework with their "partical" style classes. I like this solution very much because it is the original use of HTML templates.

Button

Everything in Tailwind.css is subdivided, so writing these classes to 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 when it was built.

Research has proved that my concerns are superfluous, and all styles in Tailwind.css can be compiled into a small css file with proper configuration, just like SASS.

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

Use postcss-cli to make compilation easier

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

As you can see from the build command, I completely abandoned SASS and migrated to Postcss. There's nothing wrong with SASS, but I just want my framework to use only one technology to avoid some complexity.

Build source folder

As I restarted everything over and over again, I finally found a pattern that kept my code base in good shape.

The source folder structure is as follows:

Rotala/ docs/ style/ CHANGELOG.md README.md package.json postcss.config.js

The docs/ folder is used to save static files that can help demonstrate output. This is also an alternative to Github pages and can easily help publish static pages without the need for additional routing parameters.

Docs/ assets/ base/ components/ index.html main.pcss

Style/ contains all source styles. Initially, I made about 20 components because I thought they were necessary to build the basic parts of a modern website. These styles are largely based on Spectre.css and Bulma (I'm a big 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

Make a difference

When you read this line, you may ask: since you have copied the design of many other frameworks, how is it different from other frameworks?

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

Reshaping the work of others does not seem like a spirit of "creating for yourself". This means that this mini-framework will always be my toy and will have no value to other developers.

In fact, I also hope that others can benefit from what I have built. But I'm tired of recreating 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 good inspiration.

If I step back and consider the pros and cons of Tailwind.css, can I build a new feature based on Tailwind.css traditions and its "shortcomings"? I think the answer is YES.

Erin Lindford Customer Support erinlindford@example.com (555) 765-4321

Advantages of Tailwind.css:

An unopinionated style.

Low-level practical class

The design can be customized

Plug-in system

Based on 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 can be far 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 shortcomings are already part of the "feature" of Tailwind.css, and I can't get rid of it. 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 pmur6; @ screen md {@ apply flex;}}

I believe the use of blow looks much better, doesn't it?

If I want to change .container a little bit, I can also decorate it directly with "template style".

...

I know and understand that I am not the first person to think so, but at least it can be a good feature that makes my framework stand out from other frameworks.

Core function

Because I want to make differences for my framework, I propose such core features to accomplish: no design and extensibility.

First of all, Tailwind.css is "undesigned", which provides our developers with complete control of the style. I will follow this and make sure that all my components just contain very simple style skeletons. If necessary, the component will have fonts, text-size color background-color padding margins, and so on.

.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 inline-block; @ apply cursor-pointer; @ apply rounded-sm; @ apply py-1 px-3;}

In this way, all components can be modified to the desired shape as long as a new style overlay is added. It follows the original practice of how we should deal with the CSS style.

Suppose we are designing the style of the "skeleton button".

From this:

To this point:

Background Gray

Put simply: Class + Utilities = your fashion components.

The template looks too crowded, so a better way to use it may 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;}} at this point, I believe you have a better understanding of "how to create your own CSS framework". You might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.