Style Guide

0. Blocks

Button - Click button to copy mixin

Timeline: +notification()

TODAY

  • 30 minutes ago
  • Lorem ipsum dolor sit amet7:15
  • Lorem ipsum dolor sit amet7:15
  • 1h ago
  • Lorem ipsum dolor sit amet7:15
  • Lorem ipsum dolor sit amet7:15

YESTERDAY

  • Lorem ipsum dolor sit amet7:15
  • Lorem ipsum dolor sit amet7:15

Breadcrumbs: +breadcrumbs([ { title: 'Home', href: 'index.html', text: 'Home' }, { title: 'Category', href: 'index.html', text: 'Category' }, { text: 'Product Name' }, ])


Tiêu đề: +heading('Viewed Product')

Viewed Product

Recommended Promotion

Mô tả sản phẩm ở trang product detail

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia, corrupti accusamus odio, deserunt dicta natus necessitatibus dolores eligendi quis tempore? Tempora exercitationem consectetur tenetur incidunt reiciendis architecto beatae nesciunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia, corrupti accusamus odio, deserunt dicta natus necessitatibus dolores eligendi quis tempore? Tempora exercitationem consectetur tenetur incidunt reiciendis architecto beatae nesciunt.

Terms

h2 title

h3 title

h4 title

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.

Sản phẩm: +product('progress')

Sản phẩm: +product('one-price')

Sản phẩm: +product('two-price')

Hunty Product Name
Đã bán 90
-30%

575.000 đ

Hunty Product Name

Lorem ipsum dolor sit amet

-30%

575.000 đ

Hunty Product Name

Lorem ipsum dolor sit amet

575.000 đ (1.000.000)

-30%

4.9

Sản phẩm nằm ngang ở Mobile: +product('two-price-cart').product--promo

Hunty Product Name

Lorem ipsum dolor sit amet

575.000 đ (1.000.000)

-30%

4.9

Cart Item trong trang cart: +cartItem()

Hunty Product Name

Lorem ipsum dolor sit amet

575.000 đ (1.000.000)

Cart Item trong trang cart: +cartItem1()

Hunty Product Name

Lorem ipsum dolor sit amet

575.000 đ (1.000.000)

Quantity 1

Phân trang: +pagination()

Promotion item: +promotion()

Shop name
Shop nameLorem ipsum

Lorem ipsum dolor sit

1.3km from you

1. Breakpoint

Small Mobile Large Mobile (Landscape) Tablet Small Desktop (Tablet Landscape) Large Desktop
0 - 575px 576px - 767px 768px - 991px 992px - 1199px 1200px

2. Color Variables

  • #FFD100@yellow
  • transparent@color00
  • #fff@color01
  • #f1f1f1@color02
  • #F5F6F8@color03
  • #ccc@color04
  • #c0c0c0@color05
  • #bbb@color06
  • #aaa@color07
  • #999@color08
  • #666@color09
  • #333@color10
  • #000@color11

3. Fonts

Font Family View
.noto-sans(); - Font Default

Lorem ipsum dolor sit amet.
.sans-serif();

Lorem ipsum dolor sit amet.
.fonticon();

.serif();

Lorem ipsum dolor sit amet.
.monospace();

Lorem ipsum dolor sit amet.

4. Icons

  • close-solid
  • close-outline
  • minus
  • plus
  • minus-solid
  • plus-solid
  • delete
  • edit
  • home-solid
  • marketing
  • preview
  • search-o
  • arrow-left
  • arrow-right
  • arrow-up
  • camera
  • campaign
  • cart
  • check
  • check-in
  • customers
  • follow
  • followed
  • glasses
  • handtilizer
  • head-phone
  • heart
  • home
  • location
  • message
  • notification
  • pant
  • phone
  • photo
  • product
  • promo
  • report
  • search
  • shop
  • shop-order
  • skin-care
  • sneaker
  • triangle-down
  • t-shirt
  • view-shop
  • watch
  • write
  • account
  • analysis
  • flash-sale
  • close
  • location-arrow
  • arrow-next
  • arrow-solid-down
  • arrow-solid-up
  • shopping-cart
  • shipping
  • delivered
  • card
  • send
  • arrow-prev
  • gro-up
  • calendar
  • tracking
  • hamburger
  • support
  • assurance
  • eco
  • sale
  • customer
  • heart-solid
  • heart-o
  • caret-down
  • caret-up
  • caret-left
  • caret-right
  • angle-left
  • angle-right
  • angle-up
  • angle-down
  • categories
  • star-half-empty
  • star-o
  • star
  • order
  • hunty-feed
  • youtube-circle
  • fb-circle
  • brand-google

5. Utilities Class

Class Name View/Note
.antialiased

Has mixin Fix font smooth on iOS.
.clearfix

Has mixin Clears floats
.center-block
Has mixin Center block
.text-hide

Has mixin Hide the text.
.text-truncate

Has mixin Truncate text one line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, temporibus.
.text-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, temporibus.
.text-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dolores.
.text-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dolores.
.text-justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, pariatur id nam veniam aliquam itaque, nobis reiciendis natus ipsum eius voluptates. Voluptatem recusandae omnis illo quia rem earum sapiente qui facere est minus! Ipsum quasi necessitatibus, in, facere, qui fugit adipisci quas temporibus inventore, velit quos dolores itaque commodi hic!
.pull-left
Floats an element to the left
.pull-right
Floats an element to the right
.text-lowercase

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, est.
.text-uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, est.
.text-capitalize

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, est.
Class Name Small Mobile ≤ @xs-max - 575px Large Mobile ≥ 576px and ≤ 767px Tablet ≥ 768px and ≤ 991px Small Desktop ≥ 992px and ≤ 1199px Large Desktop ≥ 1200px
.hidden Hidden Hidden Hidden Hidden Hidden
.hidden-xs Hidden Visible Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible Visible
.hidden-md Visible Visible Hidden Visible Visible
.hidden-lg Visible Visible Visible Hidden Visible
.hidden-sm-up Visible Hidden Hidden Hidden Hidden
.hidden-md-up Visible Visible Hidden Hidden Hidden
.hidden-lg-up Visible Visible Visible Hidden Hidden
.hidden-xl Visible Visible Visible Visible Hidden
.hidden-sm-down Hidden Hidden Visible Visible Visible
.hidden-md-down Hidden Hidden Hidden Visible Visible
.hidden-lg-down Hidden Hidden Hidden Hidden Visible

6. Form Elements

dd/mm/yyyy

Form

Mixin
+form({id: 'form_id'})

Options:
- id
- name == id
- action: #
- method: post

Label

Mixin View
+label('lbl_id', 'Label_No_Padding_Bottom')
+label('lbl_id2', 'Label_Has_Padding_Bottom').label
+label-horizontal('lbl_id3', 'Use for Horizontal, .fieldset tag has class .form-group').label01
Values:
- for
- text

Textarea

Mixin View
.fieldset: +textarea('area_id', 'Placeholder')

Values:
- id
- placeholder

Input

Mixin View
.fieldset: +input({id: 'input_1', placeholder: 'Placeholder'})
Options:
- id
- name == id
- type: text
- value
- placeholder
.fieldset: +customDate({id: 'date', placeholder: "Input_Date"})
Input_Date
.fieldset: +customDate({id: 'date2', value: "1990-06-05", placeholder: 'Input_Date'})
Input_Date
.fieldset(data-number='{"handle": "qty", "maxLength": 3}')+label('number_11', 'Quanty Desktop').label+button({})(data-decrease="")i.icon-minus+input({id: 'number_11', value: '1', type: 'number'})(data-input="" autocomplete="off")+button({})(data-increase="")i.icon-plus.fieldset(data-number='{"handle": "qty", "maxLength": 3}')+label('number_12', 'Quanty Mobile').label+button({})(data-decrease="")i.icon-minus+input({id: 'number_12', value: '2', type: 'number'})(data-input="" autocomplete="off")+button({})(data-increase="")i.icon-plus

Custom Input

Custom Input View

icon with input

.fieldset: +customInput({iconClass: 'icon-person'}, {id: "input_user"})

Button icon with input

.fieldset: +customInput({id: 'search_btn_2', iconClass: 'icon-search'}, {id: "txt_search_2"})

Button text with input

.fieldset: +customInput({id: 'search_btn_0', text: 'Submit', btnClass: 'button'}, {id: "txt_search"})

Note:
- Type of button default is submit, Can change by option: type

Button text, icon with input

+customInput({id: 'search_btn_1', type: 'button', text: 'button', iconClass: 'icon-right'}, {id: "txt_search_1"})

Custom Select

Mixin View
.fieldset
  +customSelect({id: 'select_id'}, [
    {value: '', text: 'Please select an option'},
    {value: 'Option 1'},
    {value: 'Option 2'}
  ])
.fieldset
  +customSelect({id: 'select_id_1'}, [
    {value: '', text: 'Please select an option'},
    {value: 'Option 1', selected: 'selected'},
    {value: 'Option 2'}
  ])
Options:
- id of <select> tag
- name of <select> tag == id
- value of <option> tag
- text of <option> tag

Custom Checkbox

Mixin View
.fieldset: +checkbox({id: 'cb_01', text: 'Single_Checkbox', checked: 'checked'})
.fieldset: +checkbox({id: 'cb_02', text: 'Single_Checkbox'}).circle
.fieldset: +checkbox({id: 'cb_021', text: 'Single_Checkbox_Right'}).circle.right
.fieldset: +checkbox({id: 'cb_022', text: 'Single_Checkbox_Full_Width'}).right.expanded
.fieldset: +checkbox({id: 'cb_03', text: 'Single_Checkbox_At_Center', checked: 'checked'}).center-mode
.fieldset.text-center: +checkbox({id: 'cb_031', text: 'Single_Checkbox_At_Center_Above', checked: 'checked'}).center-mode.above
.fieldset.text-center: +checkbox({id: 'cb_032', text: 'Single_Checkbox_At_Center_Below', checked: 'checked'}).center-mode.below
Options:
- type: "checkbox"
- id
- name == id
- value
- checked
- text (of Label)
- class (go with .custom-checkbox)

Custom Checkbox List

Mixin View
.fieldset
  +checkboxList([
    {name: 'gender', id: 'cb_04', text: 'checkbox', checked: 'checked', class: 'circle'},
    {name: 'gender', id: 'cb_05', text: 'checkbox'}
  ])

Custom Radio

Mixin View
.fieldset: +radio({name: 'single', id: 'radio_1', text: 'Radio Single Circle'}).circle
.fieldset: +radio({name: 'single', id: 'radio_11', text: 'Radio_Right'}).circle.right
.fieldset: +radio({name: 'single', id: 'radio_12', text: 'Radio_Right_Full_Width'}).circle.right.expanded
.fieldset: +radio({name: 'single', id: 'radio_2', text: 'Radio_Single_Square_At_Center'}).center-mode
.fieldset.text-center: +radio({name: 'single', id: 'radio_21', text: 'Radio_Single_Square_At_Center_Above'}).center-mode.above
.fieldset.text-center: +radio({name: 'single', id: 'radio_22', text: 'Radio_Single_Square_At_Center_Below'}).center-mode.below
Options:
- type: "radio"
- id
- name
- value == id
- checked
- text (of Label)
- class (go with .custom-radio)

Custom Radio List

Mixin View
.fieldset
  +radioList([
    {name: 'gender', id: 'rb_02', text: 'radio', checked: 'checked', class: 'circle'},
    {name: 'gender', id: 'rb_01', text: 'radio'}
  ])
Mixin View
.fieldset: +linkCheckbox({id: 'link-cb', text: 'Link_Checkbox', checked: 'checked'})
Link_Checkbox
.fieldset: +linkCheckbox({id: 'link-cb-2', text: 'Link_Checkbox'}).circle
Link_Checkbox
.fieldset: +linkCheckbox({id: 'link-cb-21', text: 'Link_Checkbox_Right'}).circle.right
Link_Checkbox_Right
.fieldset: +linkCheckbox({id: 'link-cb-22', text: 'Link_Checkbox_Full_Width'}).expanded.right
Link_Checkbox_Full_Width
.fieldset: +linkCheckbox({id: 'link-cb-03', text: 'Link_Checkbox_At_Center', checked: 'checked'}).center-mode
Link_Checkbox_At_Center
.fieldset.text-center: +linkCheckbox({id: 'link-cb-031', text: 'Link_Checkbox_At_Center_Above', checked: 'checked'}).center-mode.above
Link_Checkbox_At_Center_Above
.fieldset.text-center: +linkCheckbox({id: 'link-cb-032', text: 'Link_Checkbox_At_Center_Below', checked: 'checked'}).center-mode.below
Link_Checkbox_At_Center_Below
Options:
- type: "checkbox"
- id
- name == id
- value
- checked
- text (of link)
- class (go with .custom-checkbox)

7. CSS-Mixin

a. Mixin Position

Mixin View
.position(); position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0
.position(1px); position : absolute;
top : 1px;
right : 1px;
bottom : 1px;
left : 1px;
.position(static, 1px); position : static;
top : 1px;
right : 1px;
bottom : 1px;
left : 1px;
.position(1px null 3px 4px); position : absolute;
top : 1px;
bottom : 3px;
left : 4px;
.position(static, 1px null 3px 4px); position : static;
top : 1px;
bottom : 3px;
left : 4px
.position(1px 2px); position : absolute;
top : 1px;
right : 2px;
.position(static, 1px 2px); position : static;
top : 1px;
right : 2px;
.position(1px null); position : absolute;
top : 1px;
.position(static, 1px null); position : static;
top : 1px;

b. Mixin Triangle

Mixin View
.triangle(up, 30px, 40px, @color08);
.triangle(right, 30px, 40px, @color08);
.triangle(down, 30px, 40px, @color08);
.triangle(left, 30px, 40px, @color08);
.triangle(upleft, 30px, 40px, @color08);
.triangle(upright, 30px, 40px, @color08);
.triangle(downleft, 30px, 40px, @color08);
.triangle(downright, 30px, 40px, @color08);
Options:
- direction: up, down, right, left, upright, upleft, downright, downleft
- width
- height
- color
Copy Successful