README

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>

Usage no npm install needed!