├── .gitignore
├── LICENSE.txt
├── README.md
├── dist
├── bootstrap
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── bulma
│ ├── bulma.css
│ ├── bulma.css.map
│ ├── bulma.min.css
│ └── bulma.min.css.map
├── package-lock.json
├── package.json
├── public
└── test-purge-css.html
├── purged
└── .gitkeep
└── scss
├── bootstrap
├── bootstrap.scss
└── maxmaxmax
│ ├── _extension-max-width.scss
│ └── _variables.scss
└── bulma
├── bulma.scss
└── maxmaxmax
├── _extension-max-spacing.scss
├── _extension-max-width.scss
└── _variables.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | purged/*.css
4 | purged/*.css.map
5 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # maxmaxmax
3 |
4 | Add the two best Tailwind CSS features to Bootstrap and Bulma!
5 |
6 | ## Motivation
7 |
8 | We are the team that created [Shuffle](https://shuffle.dev), a visual editor for Tailwind CSS, Bootstrap, Bulma, and Material-UI. We create 2-4 new UI libraries per month for these frameworks, and then we add them to our editor.
9 |
10 | Tailwind CSS has the greatest number of them in Shuffle because the easiest way for us is to create a new library in this technology in the first place. Only later do we port a library to subsequent technologies.
11 |
12 | Why development in Tailwind CSS is the fastest (for us)?
13 |
14 | We have been thinking about it and according to our subjective assessment it is about ***two features that are responsible for 80% of the convenience in building a layout with Tailwind CSS***.
15 |
16 | ___
17 | * If you are interested in how we port the UI library from Tailwind CSS to Bootstrap, please check [Zeus for Tailwind CSS](https://shuffle.dev/project/new-project?library=tailwind-zeus/1.0.0) and [Zeus for Bootstrap](https://shuffle.dev/project/new-project?library=bootstrap-zeus/1.0.0) in our editor.
18 |
19 |
20 | ## 🥇 Two best Tailwind CSS features
21 |
22 | ### 1. Much larger range of spacing-values in the basic version.
23 |
24 | Have you ever used such a structure in HTML in order to give the container the largest possible spacing without writing your own CSS?
25 |
26 | ```html
27 |
28 | // Content
29 |
30 | ```
31 |
32 | Bootstrap and Bulma in the basic version provide spacing values in the range 0 - 3rem, divided into six classes, e.g. mt-0, mt-1, mt-2, mt-3, mt-4, mt-5.
33 |
34 | Tailwind CSS has 30 of these classes in the range of 0 - 24rem. The classes are named using the format {property}{sides}-{size} where size is one of 0-12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96.
35 |
36 | This extension adds identical values to the resulting CSS as in Tailwind CSS.
37 |
38 | 
39 |
40 | ### 2. The .max-w-* classes that allow the width of the container to be managed "rigidly".
41 |
42 | Have you ever used such a structure in Bootstrap in order to give the section header the maximum width? Or the equivalent for Bulma?
43 |
44 | ```html
45 |
47 |
Section header
48 |
Description
49 |
61 |
62 |
Section header
63 |
Description
64 |
65 |