Bootstrap Studio Theme Generator

Ideas
1

I was looking for a way to definitively solve my problem to generate themes for Bootstrap, when when looking closely at the program I came across this field in the appearance tab.

image

I realized that it can be an excellent tool in the program, but it lacks some variables, such as:

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13,110,253;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 25,135,84;
  --bs-info-rgb: 13,202,240;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --bs-white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;
  --bs-body-color-rgb: 33,37,41;
  --bs-body-bg-rgb: 255,255,255;
  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

I believe that including all the “root” variables would solve the issue of having a theme generator for bootstrap.
I would be very happy if the Bootstrap Studio team could complete this tool.

But the ideal is to create a css file, or Scss, with these customizations, as it is, it wouldn’t work very well, that is, applying styles to fields and components in BSS.

image
image989Ă—441 35.8 KB

1 Like
2

Making this post even better!

It would be great for BSS to generate the custom file Bootstrap.css during site creation.

To do so, he would use the project definitions, import the Bootstrap code, both CSS and JS, just for the components and appearance used on the site.

That is, it would be created through @import, @include, or similar… only what is used in the project, as a result we would have a much cleaner and lighter code.

Likewise, when removing something in the site design, it would be removed from the theme codes, both in CSS and in JS.

I think it’s complicated to make these changes to the program, but the idea was shared.

As always, I appreciate everyone’s attention.

3

+1

The other drawback to changing the theme with the tools above is that they are not site wide, they are page wide unless you add it all to the files etc and if you have to do that then you may as well make a theme lol. Would love to see that tool get some love too.

2 Likes
4

Perhaps a more complex theme creator, an external tool, or within the theme configuration panel is better.
I really liked @richards project, it would be great, if we don’t get one in bss, to be able to help improve his tool, make it more complete.

5

People get too hung up on trying to make Bootstrap “leaner” by stripping out unused CSS from bootstrap.min.css. If you cut the size by 50%, the difference in page load on a typical 4G connection would be virtually imperceptible.

1 Like
6

I know that too and I agree with you, but the big question in this case is to use as little css customization as possible, with a theme already prepared the work would be much less, it’s not just the loading time, but the custom work time css that may already be done in the theme.
An example:
I hate the shadows of buttons or text boxes on forms, gray borders, etc, with a custom theme this is all done, the css we would need to do would be very small.

7

Glad you like it @gilmar. I do have plans for a more advanced version, which will give options for:
Rounded
Shadows
Gradients
Fonts
Negative Margins

I have a couple of big projects on the go at the moments, so I’m not sure when it will be.

1 Like