hc-grid

A Scss to create a grid.

Installation

npm  i @haftcinco/hc-grid --save

Module

@import  "~@haftcinco/hc-grid/scss/base.scss";

Usage

scss grid

|class | Description | | ------ | ------------ | |.container | the container is the area enclosed by the beginning and ending tags.| |.hc-grid| Without having to use floats and positioning the hc-grid with columns makes the web page design easier.| |.hc-col-|hc-col- can divide the page up to 12 columns. It is has four classes: xs, sm, md, lg, xl.| |.hc-gap-|The hc-gap is proper for the gaps between the columns of the grid.| |.hc-order-| The order property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.| |.align-self|The align-self property specifies the alignment for the selected item inside the flexible container.|

grid example :

<div  class="container-fluid">
 <div  class="hc-grid hc-gap-s">
  <div  class="hc-col-xl-4 hc-col-lg-3 hc-col-md-6 hc-col-sm-12"></div>
  <div  class="hc-col-xl-4 hc-col-lg-3 hc-col-md-6 hc-col-sm-12"></div>
  <div  class="hc-col-xl-4 hc-col-lg-3 hc-col-md-6 hc-col-sm-12"></div>
  <div  class="hc-col-xl-4 hc-col-lg-3 hc-col-md-6 hc-col-sm-12"></div>
 </div>
</div>

hc-col

• .hc-col- (extra small devices - screen width less than 576px)
• .hc-col-sm- (small devices - screen width equal to or greater than 576px)
• .hc-col-md- (medium devices - screen width equal to or greater than 768px)
• .hc-col-lg- (large devices - screen width equal to or greater than 992px)
• .hc-col-xl- (xlarge devices - screen width equal to or greater than 1200px)

hc-gap

• .hc-gap-s 0.5rem between the columns
• .hc-gap-m 1rem between the columns
• .hc-gap-l 1.5rem between the columns

hc-order

• .hc-order-1 to .hc-order-12 defines the order of items that will render the elements, independent of their HTML source code order.
• .hc-order-first when the order is -1, the item is going to be the first.
• .hc-order-last when the order is 13, the item is going to be the last.

scss presets

|class | Description | | ------ | ------------ | |.hc-split-|The grid-template-columns property defines the size (width) of each column in the grid layout.|

Depending on how many columns there are, it is possible to give a number to each which is related its width. For instance, if a grid has 3 columns (hc-cols-3), the width for each can be 10,80,10 (hc-split-10-80-10) in order.

scss sample-layouts

|class | Description | | ------ | ------------ | |.hc-"area name"|You can use the grid-area property to name grid items| |.grid-template-areas|You can refer to the name when you set up the grid layout, by using the grid-template-areas property on the grid container. This grid layout contains six columns and three rows| |.hc-app|Shows the appearance of page layout.| |grid-template-columns |Use the grid-template-columns property to define the size (width) of each column in the grid layout| |.hc-bk-|Use hc-bk-to block the column according to the needed size.| |.hc-border|grid-template-areas:"north" "west" "center" "east" "south";|

hc-“area name”

• .hc-header grid-area: header
• .hc-footer grid-area: footer
• .hc-north grid-area: north
• .hc-south grid-area: south
• .hc-east grid-area: east
• .hc-west grid-area: west
• .hc-center grid-area: center
• .hc-main grid-area: main
• .hc-main-1 grid-area: main-1
• .hc-main-2 grid-area: main-2
• .hc-main-3 grid-area: main-3

hc-app

• .hc-app There are some main(s) as same as the number of columns. For example, if the element includes classes hc-cols-2 and hc-app, the appearance will be the following: grid-template-areas: "header" "main-1" "main-2" "footer"; or The classes hc-cols-3 and hc-app: grid-template-areas: "header" "main-1" "main-2" "main-3" "footer";

.hc-bk

• .hc-bk-xs To block the column according to xs size.
• .hc-bk-sm To block the column according to sm size.
• .hc-bk-md To block the column according to md size.
• .hc-bk-lg To block the column according to lg size.

scss util

|class | Description | | ------ | ------------ | |.hc-hidden-|Hides the element .|

.hc-hidden

• hc-hidden hides all viewports.
• hc-hidden-sm hides when on small viewports and up.
• hc-hidden-md hides when on medium viewports and up.
• hc-hidden-lg hides when on large viewports and up.
• hc-hidden-xl hides when on extra large viewports and up.
• hc-hidden-xs-only hides when on extra small viewports only.
• hc-hidden-sm-only hides when on small viewports only .
• hc-hidden-md-only hides when on medium viewports only.
• hc-hidden-lg-only hides when on large viewports only.
• hc-hidden-xl-only hides when on extra large viewports only.

scss card-shadow

Cards are a convenient means of displaying content including a header, body, and box shadow.

<div class="card-base border">
 <div class="card-header">
  <h6>header</h6>
 </div>
 <div class="card-body card-shadow--large">body</div>
</div>

• .card-shadow--small
• .card-shadow--medium
• .card-shadow--large
• .card-shadow--extraLarge

scss form

For creating a form that has fields like button, select, input, input group, check box, radio button, toggle button, etc. |class | Description | | ------ | ------------ | |.hc-btn|For the button's style with three sizes, small , medium(the style's default), and large .The disabled attribute determines if the button is disabled. In addition, the outline button is for buttons having borders but without backgrounds. | |.hc-input| For the input's style. Use the attribute readonly to make the input readonly.| |.hc-select|For the select's style.Use the attribute readonly to make the select readonly.| |.hc-check-box|For the checkbox's style. Use the attribute disabled to make the checkbox disabled. Use the attribute checked to make the checkbox checked.| |.hc-radio-btn|For the radio button's style. Use the attribute disabled to make the radio button disabled. Use the attribute checked to make the radio button checked.| |.hc-toggle-btn|For the toggle button's style.| |.hc-input-invalid| For the invalid input or invalid multiselect style.| |.hc-form-group|Is a style for form group containing two inputs.|

.hc-btn

• .hc-btn-info
• .hc-btn-info-outline
• .hc-btn-success
• .hc-btn-success-outline
• .hc-btn-primary
• .hc-btn-primary-outline
• .hc-btn-blue
• .hc-btn-blue-outline
• .hc-btn-warning
• .hc-btn-warning-outline
• .hc-btn-danger
• .hc-btn-danger-outline
• .hc-btn-small
• .hc-btn-large

<!-- info button -->
<button class="hc-btn hc-btn-info"></button>

<!-- primary outline button -->
<button class="hc-btn hc-btn-primary-outline"></button>

<!-- disable danger button  -->
<button class="hc-btn hc-btn-danger" disabled="disabled"></button>

hc-input

<input class="hc-input" />

<!-- disabled input-->
<input class="hc-input" readonly />

hc-select

<div class="hc-select-wrapper">
 <select class="hc-select"></select>
</div>

hc-check-box

<ul class="hc-check-box">
 <li>
  <input id="checkbox1" type="checkbox">
  <label for="checkbox1"></label>
 </li>
 <!-- checked checkbox-->
  <li>
  <input id="checkbox2" type="checkbox" checked >
  <label for="checkbox2"></label>
 </li>
 <!-- disabled checkbox-->
 <li>
  <input id="checkbox3" type="checkbox" disabled >
  <label for="checkbox3"></label>
 </li>
</ul>

hc-radio-btn

<ul class="hc-radio-btn">
 <li>
  <input id="radio-btn-1" type="radio" name="my-radio">
  <label for="radio-btn-1"></label>
 </li>
 <!-- checked radio button-->
  <li>
  <input id="radio-btn-2" type="radio" name="my-radio" checked >
  <label for="radio-btn-2"></label>
 </li>
 <!-- disabled radio button-->
 <li>
  <input id="radio-btn-3" type="radio" name="my-radio" disabled >
  <label for="radio-btn-3"></label>
 </li>
</ul>

hc-toggle-btn

<div class="hc-toggle-btn">
  <input id="radio-btn-1" type="radio" name="my-radio" checked >
  <label for="radio-btn-1">radio button 1</label>
  <input id="radio-btn-2" type="radio" name="my-radio">
  <label for="radio-btn-2">radio button 2</label>
</div>

hc-input-invalid

<!-- invalid style for input -->
<div class="hc-input-invalid">
  <input class="hc-input"> 
</div>
<!-- invalid style for multiselect -->
<div class="hc-input-invalid">
  <multiselect class="hc-multiselect-wrapper"> 
</div>

hc-form-group

Here is an example for both From and To fields.Also, how to make a group of them.

<div class="hc-form-group">

 <!--input item for from -->
 <div class="hc-input-item">
  <i class="hc-icon hc-marker"></i>
  <input placeholder="From">
 </div>
 
 <!--input item for from -->
 <div class="hc-input-item">
  <i class="hc-icon hc-marker"></i>
  <input placeholder="to">
 </div>

 <!-- change route icon -->
 <div  class="hc-exchange-btn">
  <i  class="hc-icon hc-exchange"></i>
 </div>
 
</div>

scss helpers

|class | Description | | ------ | ------------ | |.hc-bg-"color-name"|For the background colors' classes. For example, for the primary background color you can use hc-bg-primary . | |.hc-color-"color-name"|For the colors' classes. For example, for the primary color you can use hc-color-primary . | |.hc-alert|For the alert’s style. | |.scrollable|To give a scroll to elements you can use the only-x class for the horizontal scroll and only-y class for the vertical scroll. | |.over-hidden|To hide the element overflow.| |.scroll-style|A style for the scroll by using background color, width for vertical scrollbars and height for horizontal scrollbars. | |.align-vertical|To clarify the element align with the vertical style in the parent of elements.|

hc-bg-“color-name”

• .hc-bg-primary
• .hc-bg-primary-dark
• .hc-bg-primary-light
• .hc-bg-white
• .hc-bg-white-dark
• .hc-bg-black
• .hc-bg-success
• .hc-bg-success-light
• .hc-bg-warning
• .hc-bg-blue-light
• .hc-bg-danger
• .hc-bg-info
• .hc-bg-info-light
• .hc-bg-gray
• .hc-bg-gray-light
• .hc-bg-blue
• .hc-bg-transparent

hc-color-“color-name”

• .hc-color-primary
• .hc-color-white
• .hc-color-success
• .hc-color-warning
• .hc-color-danger
• .hc-color-info
• .hc-color-info-ight
• .hc-color-black
• .hc-color
• .hc-color-blue
• .hc-color-blue-dark
• .hc-color-olive

hc-alert

For selecting colors related to the alert, you can use the classes hc-alert-primary, hc-alert-warning , hc-alert-danger , hc-alert-success .

<div class="hc-alert hc-alert-primary">alert text</div>

align-vertical

To clarify the element align you can use the classes align-vertical-top , align-vertical-middle , align-vertical-bottom .

<div  class="align-vertical">
 <div class="align-vertical-middle">text</div>
</div>