Import shuffle.dev

I was considering using shuffle.dev as library as a quick start, but they use custom bootstrap classes like pb-8 which are written in scss in a different file. Do you have any idea how I would import these and make it work?

I tried to import the file, but I guess the BSS bootstrap file is not loading it or something like that.

Bump. Can anyone help me or point me to a guide how to implement this? :slight_smile:

Step 1

Step 2

Step 3

Good luck

You can download the examples.zip file on the site you mentioned which will show you the sass files and all the import and variable settings (example). I would start though if you are going down this rabbit hole to learn how to compile a standard bootstrap css file from the source files on the Bootstrap site. When looking at these “online theme builders” with easy components, you must remember if you choose to import the theme that the theme version number for the css should be the same as the version of the bootstrap.js file that Bootstrap Studio uses. If not then the theme.css file will always be ahead or behind the .js version Bootstrap Studio uses.

I think its better to learn from the theme builders but in the end…always build your own theme from what you have learned from the pros.

For example here are the variables in the examples file for the custome settings in scss…

// Variables
$enable-rounded: true !default;
$enable-rfs: true !default;
$enable-antialiasing: true !default;
$enable-negative-margins: true !default;

$border-width: 1px !default;
$border-color: #C2C9D2 !default;

$min-contrast-ratio: 2 !default;

$body-bg: #F1F5FB !default;
$body-color: #15181C !default;
$text-muted: #67798E !default;

$headings-color: #15181C !default;

$white: #fff !default;
$black: #000 !default;
$gray-100: #E1E4E8 !default;
$gray-200: #C2C9D2 !default;
$gray-300: #A4AFBB !default;
$gray-400: #8594A5 !default;
$gray-500: #67798E !default;
$gray-600: #526172 !default;
$gray-700: #3E4955 !default;
$gray-800: #293039 !default;
$gray-900: #15181C !default;

$primary: #382CDD !default;
$secondary: #67798E !default;
$success: #17BB84 !default;
$info: #2D70F5 !default;
$warning: #F67A28 !default;
$danger: #E85444 !default;
$light: #E1E4E8 !default;
$dark: #293039 !default;

$primary-light: #EBEAFC !default;
$secondary-light: #F1F5FB !default;
$success-light: #E8F8F3 !default;
$info-light: #EAF1FE !default;
$warning-light: #FEF2EA !default;
$danger-light: #FDEEEC !default;
$light-light: #F1F5FB !default;

$primary-dark: #161258 !default;
$secondary-dark: #293039 !default;
$success-dark: #094B35 !default;
$info-dark: #122D62 !default;
$warning-dark: #623110 !default;
$danger-dark: #5D221B !default;
$light-dark: #A4AFBB !default;

$theme-colors: (
    primary: $primary,
    secondary: $secondary,
    success: $success,
    info: $info,
    warning: $warning,
    danger: $danger,
    light: $light,
    dark: $dark,
    primary-light: $primary-light,
    secondary-light: $secondary-light,
    success-light: $success-light,
    info-light: $info-light,
    warning-light: $warning-light,
    danger-light: $danger-light,
    light-light: $light-light,
    primary-dark: $primary-dark,
    secondary-dark: $secondary-dark,
    success-dark: $success-dark,
    info-dark: $info-dark,
    warning-dark: $warning-dark,
    danger-dark: $danger-dark,
    light-dark: $light-dark
) !default;

$blue: #2D70F5 !default;
$red: #E85444 !default;
$orange: #F67A28 !default;
$green: #17BB84 !default;

$blue-100: #D5E2FD !default;
$blue-200: #ABC6FB !default;
$blue-300: #81A9F9 !default;
$blue-400: #578DF7 !default;
$blue-500: #2D70F5 !default;
$blue-600: #245AC4 !default;
$blue-700: #1B4393 !default;
$blue-800: #122D62 !default;
$blue-900: #D5E2FD !default;
$indigo-100: #D7D5F8 !default;
$indigo-200: #AFABF1 !default;
$indigo-300: #8880EB !default;
$indigo-400: #6056E4 !default;
$indigo-500: #382CDD !default;
$indigo-600: #2D23B1 !default;
$indigo-700: #221A85 !default;
$indigo-800: #161258 !default;
$indigo-900: #0B092C !default;
$purple-100: #E6D4F8 !default;
$purple-200: #CDA9F2 !default;
$purple-300: #B37EEB !default;
$purple-400: #9A53E5 !default;
$purple-500: #8128DE !default;
$purple-600: #6720B2 !default;
$purple-700: #4D1885 !default;
$purple-800: #341059 !default;
$purple-900: #1A082C !default;
$red-100: #FADDDA !default;
$red-200: #F6BBB4 !default;
$red-300: #F1988F !default;
$red-400: #ED7669 !default;
$red-500: #E85444 !default;
$red-600: #BA4336 !default;
$red-700: #8B3229 !default;
$red-800: #5D221B !default;
$red-900: #2E110E !default;
$orange-100: #FDE4D4 !default;
$orange-200: #FBCAA9 !default;
$orange-300: #FAAF7E !default;
$orange-400: #F89553 !default;
$orange-500: #F67A28 !default;
$orange-600: #C56220 !default;
$orange-700: #944918 !default;
$orange-800: #623110 !default;
$orange-900: #311808 !default;
$green-100: #D1F1E6 !default;
$green-200: #A2E4CE !default;
$green-300: #74D6B5 !default;
$green-400: #45C99D !default;
$green-500: #17BB84 !default;
$green-600: #12966A !default;
$green-700: #0E704F !default;
$green-800: #094B35 !default;
$green-900: #05251A !default;

$container-max-widths: (
    sm: 640px,
    md: 768px,
    lg: 1024px,
    xl: 1156px
) !default;

$font-family-base: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base: 1rem !default;
$font-size-sm: 0.875rem !default;
$font-size-lg: 1.125rem !default;
$font-weight-bold: 700 !default;

$small-font-size: 0.875rem !default;
$line-height-lg: 2rem !default;

$headings-font-weight: 700 !default;
$headings-font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$headings-line-height: 1 !default;

$h1-font-size: 3.75rem !default;
$h2-font-size: 2.25rem !default;
$h3-font-size: 1.875rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;

$display-font-weight: 400 !default;
$display-font-sizes: (
    1: 8rem,
    2: 6rem,
    3: 4.5rem,
    4: 3.75rem,
    5: 3rem
) !default;

$display-line-height: 1 !default;

$lead-font-size: 1rem !default;
$lead-font-weight: 500 !default;

$box-shadow: 0px 4px 8px -4px #15181C14 !default;
$box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
$box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
$box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !default;

$spacers: (
    0: 0px,
    1: 0.25rem,
    2: 0.5rem,
    3: 0.75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    7: 1.75rem,
    8: 2rem,
    9: 2.25rem,
    10: 2.5rem,
    11: 2.75rem,
    12: 3rem,
    14: 3.5rem,
    16: 4rem,
    20: 5rem,
    24: 6rem,
    28: 7rem,
    32: 8rem,
    36: 9rem,
    40: 10rem,
    44: 11rem,
    48: 12rem,
    52: 13rem,
    56: 14rem,
    60: 15rem,
    64: 16rem,
    72: 18rem,
    80: 20rem,
    96: 24rem
) !default;

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

$badge-font-size: 0.75rem !default;
$badge-font-weight: 400 !default;
$badge-color: #fff !default;
$badge-padding-y: 0.25rem !default;
$badge-padding-x: 0.5rem !default;
$badge-border-radius: 9999px !default;
$badge-text-transform: null !default;

$input-btn-padding-y: 0.5rem !default;
$input-btn-padding-x: 1rem !default;
$input-btn-font-size: 0.75rem !default;
$input-btn-padding-y-sm: 0.375rem !default;
$input-btn-padding-x-sm: 0.75rem !default;
$input-btn-font-size-sm: 0.75rem !default;
$input-btn-padding-y-lg: 0.75rem !default;
$input-btn-padding-x-lg: 1.25rem !default;
$input-btn-font-size-lg: 0.875rem !default;

$btn-border-radius: 0.25rem !default;
$btn-font-weight: 500 !default;
$btn-text-transform: null !default;

$input-bg: transparent !default;
$input-color: #15181C !default;
$input-border-color: #C2C9D2 !default;
$input-placeholder-color: #67798E !default;
$input-padding-y: 0.5rem !default;
$input-padding-x: 1rem !default;
$input-border-radius: 0 !default;

$nav-link-font-size: 0.875rem !default;
$nav-link-font-weight: 400 !default;

$navbar-padding-y: 1.5rem !default;
$navbar-padding-x: 1rem !default;
$navbar-nav-link-padding-x: 1.5rem !default;

$navbar-light-color: #67798E !default;
$navbar-light-hover-color: #526172 !default;
$navbar-light-active-color: #526172 !default;
$navbar-light-disabled-color: #8594A5 !default;

$navbar-dark-color: #F1F5FB !default;
$navbar-dark-hover-color: #E1E4E8 !default;
$navbar-dark-active-color: #E1E4E8 !default;
$navbar-dark-disabled-color: #67798E !default;

$navbar-toggler-border: 0 !default;
$navbar-toggler-font-size: 0.875rem !default;
$navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.25rem !default;

$alert-color: null !default;
$alert-font-size: null !default;
$alert-border-width: 0 !default;
$alert-border-radius: 0 !default;

$alert-border-top-width: $alert-border-width !default;
$alert-border-right-width: $alert-border-width !default;
$alert-border-bottom-width: $alert-border-width !default;
$alert-border-left-width: $alert-border-width !default;

$alert-border-top-right-radius: $alert-border-radius !default;
$alert-border-top-left-radius: $alert-border-radius !default;
$alert-border-bottom-right-radius: $alert-border-radius !default;
$alert-border-bottom-left-radius: $alert-border-radius !default;

Example download as Theme in Bootstrap Studio

Thank you. I will read these :slight_smile:

Thank you. I have no idea what compiling is, but I will catch up on it. Shuffle.dev had nice components and I thought they’d use standard bootstrap at first, so I could import them into BSS and turn them into components and then modify them :slight_smile:

Bump, that last update, made it also easier. Thanks! :smiley: -)