Get started

  • Consistent: Its main objective is to bring together the different uses of classical frameworks, see Bubblegum as a framework accompanied by a whole logic of code and way of thinking.
  • Fast: It is fast and uses the Stylus library to compile its CSS code, as well as Babel for JS (if you use it, as it is completely optional).
  • Customizable: It comes with a bunch of variables that you can modify very simply.
  • Bundles: It comes with bundles that allow you to extend its functionalities, it will allow you to use libraries in a simpler and more intuitive way. While remaining consistent with your settings.

Installation

Use npm

npm i bubblegum-css

Use composer

composer require antharuu/bubblegum "v1.0.0"

Use JSdelivr cdn

https://www.jsdelivr.com/package/npm/bubblegum-css

Download from the repository

https://github.com/antharuu/BubbleGum/tree/main/css

Starter template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <link rel="stylesheet" href="css/bubblegum.min.css" />
  </head>
  <body>
    <div _container>
      <div _row>
        <div _col>
          <!-- Your content -->
        </div>
      </div>
    </div>
  </body>
</html>

Modularity

The modularity is managed in two files placed in the bubblegum/config folder.

$Core = {
  prefix: '_' // All attributes prefix
  breakpoint_prefix: ':' // Breakpoints prefix
  logic_max: 10 // Logic for margin, padding, round etc..
  use: { // Modules used
    breakpoints: true
    color_variants: true
    size_variants: true
  }
  bundle: { // Bundles used
    prism: true
  }
}

You also have a large number of variables to edit and customize according to your plans and needs.

$Grid = {
  columns: 12 // Amount of columns
  gutters: 30px // Gutter width
  ignored_breakpoint: xs // First breakpoint
  breakpoints: { // Breakpoints
    xs: 0,
    sm: 580px,
    md: 770px,
    lg: 990px,
    xl: 1280px
  }
}
$Font = {
  family: {
    main: "'Montserrat', sans-serif"
    code: "'Fira code', monospace"
  }
  size: {
    default: 18px
    multiplier: .38
  }
}
$Sizes = {
  margin: {
    base: 5px
    small: 5px
    medium: 15px
    large: 30px
  }
  padding: {
    base: 5px
    small: 5px
    medium: 15px
    large: 30px
  }
  round: {
    base: 5px
    small: 5px
    medium: 15px
    large: 30px
  }
}
$Borders = {
  size: 1px
  type: solid
  default_color: $Colors.theme.muted
}
$Colors = {
  variants_amount: 3
  variation_amount: 15
  base: {
    'red': #f24236,
    'pink': #e43f6f,
    'purple': #6564db,
    'indigo': #473bf0,
    'blue': #3169c4,
    'cyan': #1fa6c1,
    'teal': #00bfb2,
    'green': #3ccd65,
    'lime': #aad922,
    'yellow': #f7b32b,
    'amber': #ff7f11,
    'orange': #f34213,
    'brown': #823329,
    'grey': #7179ad,
    'black': #1a1d2d,
    'white': #fbfaf8,
    'transparent': transparent
  }
  theme:{
    'dark': #1a1d2d,
    'light': #fbfaf8,
    'primary': #00bfb2,
    'secondary': #7179ad,
    'success': #3ccd65,
    'info': #1fa6c1,
    'warning': #ff7f11,
    'danger': #f24236,
    'muted': #1a1d2d + 40%
  }
  all: {}
  variants: {}
}
$Shadows = {
  first: {
    x_min: 0
    x_max: 0
    y_min: 2
    y_max: 24
    blur_min: 2
    blur_max: 38
    spread_min: 0
    spread_max: 3
    color: $Colors.theme.dark
    opacity: .14
  }
  second: {
    x_min: 0
    x_max: 0
    y_min: 3
    y_max: 9
    blur_min: 1
    blur_max: 46
    spread_min: -2
    spread_max: 8
    color: $Colors.theme.dark
    opacity: .12
  }
  third: {
    x_min: 0
    x_max: 0
    y_min: 1
    y_max: 11
    blur_min: 5
    blur_max: 15
    spread_min: 0
    spread_max: -7
    color: $Colors.theme.dark
    opacity: .2
  }
}
$Form = {
  color: $Colors.theme.muted
  color_main: $Colors.theme.primary
  color_font: $Colors.theme.dark
}
$Others = {
  nav:{
    breadcrumb_symbol: '/'
  }
}

Responsive

  • XS: Smallest size and by default, you don't need to prefix but you can, (min-width: 0)
  • SM: Mobile size (min-width: 580px)
  • MD: Tablet size (min-width: 770px)
  • LG: Laptop size (min-width: 990px)
  • XL: Large screen size (min-width: 1280px)
<script src="/__prepros.js"></script>
<div _margin="1 md:2 xl:5">
  <!-- Default margin 1 -->
  <!-- Medium margin 2 -->
  <!-- Very large margin 5 -->
</div>

<div _font="center xl:right">
  <!-- Default text align center -->
  <!-- Very large text align right -->
</div>

<div _bg="red lg:blue">
  <!-- Default background color red -->
  <!-- Large background color blue -->
</div>

Colors

Base

Bubblegum have 16 base colors (+ transparent)

red: #f24236
pink: #e43f6f
purple: #6564db
indigo: #473bf0
blue: #3169c4
cyan: #1fa6c1
teal: #00bfb2
green: #3ccd65
lime: #aad922
yellow: #f7b32b
amber: #ff7f11
orange: #f34213
brown: #823329
grey: #7179ad
black: #1a1d2d
white: #fbfaf8
transparent: transparent

Theme

Bubblegum theme have 9 colors

dark: #1a1d2d
light: #fbfaf8
primary: #00bfb2
secondary: #7179ad
success: #3ccd65
info: #1fa6c1
warning: #ff7f11
danger: #f24236
muted: #1a1d2d + 40%

Functions

selector-name

Allows you to quickly select the selector name of an element

Arguments Description Exemple Return
selector The named selector container [_container]
value The value of attribute 5 [_container~='5']

get-selectors

Allows you to quickly choose the different selectors you require.

Arguments Description Exemple Return
selector The named selector container cont [_container], [_cont]
value The value of attribute 5 [_container~='5'], [_cont~='5']

shadow-calc

Returns the value of the shadow according to the logic

Arguments Description Exemple Return
start minimal value 0 /
end maximal value 5 /
i logic modifier 2 2

font-url

Return the url of the font file name

Arguments Description Exemple Return
file File name exemple 'fonts/exemple'

Mixins

add-selector

Allows you to use a selector and insert content into it

Arguments Description
selector Selector name
value Selector value
extends Placeholders to extends

Exemple:

+add-selector('container', 'full'){
    width: 100%;
    background-color: white;
}

Return:

[_container~="full"] {
  width: 100%;
  background-color: white;
}

add-value

Allow you to put value inside a selector

Arguments Description
value Selector value
extends Placeholders to extends
You need to set the current_selector value before.

Exemple:

+add-selector('container'){
    _.current_selector = 'container';

    width: 100%;
    background-color: white;

    +add-value('limited'){
        max-width: 1280px;
    }
}

Return:

[_container] {
  width: 100%;
  background-color: white;
}
[_container][_container~="limited"] {
  max-width: 1280px;
}

add-extends

Add a extends to created placeholders

Arguments Description
name Placeholders name

get-visible-color

Return the most contrasted theme color between light and dark for the given color

Arguments Description
color Color value

shadow-values

Add automatically the box-shadow with the given modifier and the shadow variables

Arguments Description
modifier Modifier value

webfont

Use the font face with the arguments

Arguments Description
family Font family name
file File name see font-url
hack-chrome-windows if use the hack for chrome
weight Font weight