style-pack demo

contents

container

default

<div style="overflow: auto;" class="container">
  <div
    style="width: 300px; height: 300px; color: white;"
    class="container color_point_01_back"
  >
    class="contaienr"
  </div>
  <div
    style="width: 300px; height: 300px; color: white;"
    class="container_left color_sub_01_back"
  >
    class="container_left"
  </div>
  <div
    style="width: 300px; height: 300px; color: white;"
    class="container_right color_grayscale_01_back"
  >
    class="container_right
  </div>
</div>
class="contaienr"
class="container_left"
class="container_right

container_layout

Container for layout. It will set width with screen size.

@media screen and (min-width: 720px) {
  .container_layout {
    width: 1080px;
  }
}
@media screen and (max-width: 720px) {
  .container_layout {
    width: 100%;
  }
}

<div
  style="height: 300px; color: white;"
  class="container_layout color_point_01_back"
>
  container_layout
</div>
container_layout

color

<div
  style="width: 300px; height: 300px; border: 3px solid;"
  class="container color_point_01_font color_grayscale_01_back color_sub_01_border"
>
  sample
</div>
sample

_back: background-color
_font: color
_border: border-color

List of colors

color_point_01
color_point_02
color_point_03
color_point_dark_01
color_point_dark_02
color_point_dark_03
color_point_light_01
color_point_light_02
color_point_light_03
color_point_light_04
color_sub_01
color_sub_02
color_sub_03
color_sub_dark_01
color_sub_light_01
color_sub_light_02
color_sub_light_03
color_grayscale_01
color_grayscale_02
color_grayscale_03
color_grayscale_03
color_grayscale_light_01
color_grayscale_light_02
color_grayscale_light_03

align

default

<div class="container align_flex-start_center">
  <div class="color_point_01_back">example</div>
  <div class="color_point_01_back">example</div>
  <div class="color_point_01_back">example</div>
</div>
<div class="container align_center_flex-end">
  <div class="color_point_01_back">example</div>
  <div class="color_point_01_back">example</div>
  <div class="color_point_01_back">example</div>
</div>
<div class="container align_flex-end_flex-start">
  <div class="color_point_01_back">example</div>
  <div class="color_point_01_back">example</div>
  <div class="color_point_01_back">example</div>
</div>
example
example
example
example
example
example
example
example
example

align_text

<h2 class="align_text_left">I'm text-align left!</h2>
<h2 class="align_text_center">I'm text-align center!</h2>
<h2 class="align_text_right">I'm text-align right!</h2>

I'm text-align left!

I'm text-align center!

I'm text-align right!

flex_grid

You can change width of each flex_grid and see how they response.

default

<div class="flex_grid align_text_center">
  <div class="flex_col_1">col 1</div>
  <div class="flex_col_2">col 2</div>
  <div class="flex_col_3">col 3</div>
  <div class="flex_col_4">col 4</div>
  <div class="flex_col_5">col 5</div>
  <div class="flex_col_6">col 6</div>
  <div>col 7</div>
  <div>col 8</div>
  <div>col 9</div>
  <div>col 10</div>
  <div>col 11</div>
  <div>col 12</div>
</div>
col 1
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12

flex_grid_number

<div class="flex_grid_6 align_text_center">
  <div class="flex_col_1">col 1</div>
  <div class="flex_col_2">col 2</div>
  <div class="flex_col_3">col 3</div>
  <div class="flex_col_4">col 4</div>
  <div class="flex_col_5">col 5</div>
  <div class="flex_col_6">col 6</div>
  <div>col 7</div>
  <div>col 8</div>
  <div>col 9</div>
  <div>col 10</div>
  <div>col 11</div>
  <div>col 12</div>
</div>
col 1
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12

grid

You can change width of each grid and see how they response.

default

<div class="grid container">
  <div class="col_0_2">col 1</div>
  <div class="col_2_4">col 2</div>
  <div class="col_0_6">col 3</div>
  <div>col 4</div>
  <div>col 5</div>
  <div>col 6</div>
  <div>col 7</div>
  <div>col 8</div>
  <div>col 9</div>
  <div>col 10</div>
  <div>col 11</div>
  <div>col 12</div>
</div>
col 1
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12

grid_number

<div class="grid_7 container">
  <div class="col_0_2">col 1</div>
  <div class="col_2_4">col 2</div>
  <div class="col_0_6">col 3</div>
  <div>col 4</div>
  <div>col 5</div>
  <div>col 6</div>
  <div>col 7</div>
  <div>col 8</div>
  <div>col 9</div>
  <div>col 10</div>
  <div>col 11</div>
  <div>col 12</div>
</div>
col 1
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12

radius

You can choose radius size in 2, 5, 10, 15, 20, 25, 30.

<div>
  <div class="radius_2">test</div>
  <div class="radius_5_top">test</div>
  <div class="radius_10_bottom">test</div>
  <div class="radius_15_right">test</div>
  <div class="radius_20_left">test</div>
</div>
radius
radius top
radius bottom
radius right
radius left

overflow

overflow_auto

<div class="overflow_auto">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>
test
test
test
test
test

overflow_auto_hidescroll

<div class="overflow_auto_hidescroll">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>
test
test
test
test
test