Installation

Clone or Download

import styleheets

<link href="path/to/dist/variables.scss" rel="stylesheet">
<link href="path/to/dist/base.scss" rel="stylesheet">

Note: variables.scss must be first called before the base.scss, you can override the default variables by adding a new file and call it right after the variables.scss

<link href="path/to/dist/variables.scss" rel="stylesheet">
<link href="path/to/dist/custom-variables.scss" rel="stylesheet">
<link href="path/to/dist/base.scss" rel="stylesheet">

Install using npm

npm install starter-css --save

add on ionic project

open theme/variables.scss, import variables.scss right after the $colors array to register the default variables

@import '../../node_modules/starter-css/dist/variables.scss';

then, at the same file import base.scss at the bottom part of the file

@import '../../node_modules/starter-css/dist/base.scss'

Variables

To override default variables you can create another file and import it next to variables.scss

@import '../../node_modules/starter-css/dist/variables.scss';
@import '../path/to/custom_variables.scss';

Note: you can add another property and set it's value on every array variables

breakpoints

$breakpoints : (
  xs: 0,
  sm : 576px,
  md : 768px,
  lg : 992px,
  xl  : 1200px,
);

container

$container : (
    xs: 100%,
    sm : 90%,
    md : 88%,
    lg : 90%,
    xl : 80%,
);

colors

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

spacing

$min-space-value: 0;
$max-space-value: 200;

font size

$max-size-value: 100;

icons

$icon-path-url: '../../../assets/imgs/icons/';
$icons-array : ();
$icons-array-uri: ();

truncate lines

$truncate-lines-max: 10;

col

$col-gutter: 15px;
$col-count: 12;

body

$body-line-height: 27px;

Utility Classes

Note: -{$suffix} variables are the list of properties under breakpoints array; (xs, sm, md, lg, xl). Disregard xs when using it. eg: .col-12

When utility class has a -{$suffix}, style will affect only when screen width is equal or greater than the value of the suffix. eg: sm = 576, in this case the class will take effect when the screen is equal or greater than 576px

backgrounds

| class | properties| | ------ | -------- | |bg-{$color} | background: {$color}| |bg-fixed | background-attachment: fixed; | |bg-local | background-attachment: local; | |bg-scroll | background-attachment: scroll; | |bg-bottom | background-position: bottom; | |bg-center | background-position: center; | |bg-left | background-position: left; | |bg-left-bottom | background-position: left bottom; | |bg-left-top | background-position: left top; | |bg-right | background-position: right; | |bg-right-bottom | background-position: right bottom; | |bg-right-top | background-position: right top; | |bg-top | background-position: top; | |bg-repeat | background-repeat: repeat; | |bg-no-repeat | background-repeat: no-repeat; | |bg-repeat-x | background-repeat: repeat-x; | |bg-repeat-y | background-repeat: repeat-y; | |bg-auto | background-size: auto; | |bg-cover | background-size: cover; | |bg-contain | background-size: contain; |

display

| class | properties | | ------ | -------- | | block-{$suffix} | display: block | | none-{$suffix} | display: none | | flex-{$suffix} | display: flex | | inline-flex-{$suffix} | display: inline-flex | | inline-{$suffix} | display: inline | | inline-block-{$suffix} | display: inline-block |

flex

| class | properties | | ------ | --------| | direction | |flex-row-{$suffix} | flex-direction: row; | |flex-row-reverse-{$suffix} | flex-direction: row-reverse; | |flex-col-{$suffix} | flex-direction: column; | |flex-col-reverse-{$suffix} | flex-direction: column-reverse; | | wrap || |flex-wrap-{$suffix} | flex-wrap: wrap; | |flex-no-wrap-{$suffix} | flex-wrap: nowrap; | |flex-wrap-reverse-{$suffix} | flex-wrap: wrap-reverse; | | align items || |items-stretch-{$suffix} | align-items: stretch; | |items-start-{$suffix} | align-items: flex-start; | |items-center-{$suffix} | align-items: center; | |items-end-{$suffix} |align-items: flex-end; | |items-baseline-{$suffix} | align-items: baseline; | | align content || |content-start-{$suffix} | align-content: flex-start; | |content-center-{$suffix} | align-content: center; | |content-end-{$suffix} | align-content: flex-end; | |content-between-{$suffix} | align-content: space-between; | |content-around-{$suffix} | align-content: space-around; | | align self || |self-start-{$suffix} | align-self: flex-start; | |self-end-{$suffix} | align-self: flex-end; | |self-center-{$suffix} | align-self: center; | |self-stretch-{$suffix} | align-self: stretch; | |self-auto-{$suffix} | align-self: auto; | | justify content || |justify-start-{$suffix} | justify-content: flex-start; | |justify-center-{$suffix} | justify-content: center; | |justify-end-{$suffix} | justify-content: flex-end; | |justify-between-{$suffix} | justify-content: space-between; | |justify-around-{$suffix} | justify-content: space-around; | | flex, grow, shrink || |flex-initial-{$suffix} | flex: initial; | |flex-1-{$suffix} | flex: 1; | |flex-auto-{$suffix} | flex: auto; | |flex-none-{$suffix} | flex: none; | |flex-grow-{$suffix} | flex-grow: 1; | |flex-shrink-{$suffix}| flex-shrink: 1; | |flex-no-grow-{$suffix} | flex-grow: 0; | |flex-no-shrink-{$suffix} | flex-shrink: 0; |

floats

| class | properties| | ------ | -------- | | float-{$suffix}-left | float: left; | | float-{$suffix}-right | float: right; | | float-{$suffix}-none | float: none; |

grids

| class | properties| | ------ | -------- | |row | display: flex; margin-left: $col-gutter * -1; margin-right: $col-gutter * -1;| |col-{$suffix}-{$value} | max-width: (100% / $col-count) * $i; flex: 0 0 (100% / $col-count) * $i; padding-left: $col-gutter; padding-right: $col-gutter;

icons

| class | properties| | ------ | -------- | | app-svg-#{$icon} | mask-image: url(#{$icon-path-url}#{$icon}.svg); or mask-image: url(#{$data}); |

image

| class | properties| | ------ | -------- | |img | wdith: 100%; height: 100%; | |img cover | object-fit: cover; | |img contain | object-fit: contain; | |img fill | object-fit: fill; |

interactivity

| class | properties| | ------ | -------- | | appearance-none | appearance: none; | | cursor-auto | cursor: auto; | | cursor-default | cursor: default; | | cursor-pointer | cursor: pointer; | | cursor-wait | cursor: wait; | | cursor-move | cursor: move; | | cursor-not-allowed | cursor: not-allowed; | | outline-none | outline: 0; | | pointer-events-none | pointer-events: none; | | pointer-events-auto | pointer-events: auto; | | resize-none | resize: none; | | resize | resize: both; | | resize-y | resize: vertical; | | resize-x | resize: horizontal; | | select-none | user-select: none; | | select-text | user-select: text; |

position

| class | properties| | ------ | -------- | | relative | position: relative; | | absolute | position: absolute; | | fixed | position: fixed; | | absolute-vertical | position: absolute; top: 50%; transform: translateY(-50%); | | absolute-horizontal | position: absolute; left: 50%; transform: translateX(-50%); | | absolute-center | position: absolute; top: 50%; transform: translate(-50%, -50%); | | flex-vertical | displat: flex; align-items: center; | | flex-horizontal | displat: flex; justify-content: center; | | flex-center | displat: flex; justify-content: center; align-items: center;|

font sizing

| class | properties| | ------ | -------- | | font-{$suffix}-{$value} | font-size: {$value} |

spacing

| class | properties| | ------ | -------- | | m-t-{$suffix}-{$value} | margin-top: {$value} | | m-b-{$suffix}-{$value} | margin-bottom: {$value} | | m-l-{$suffix}-{$value} | margin-left: {$value} | | m-r-{$suffix}-{$value} | margin-right: {$value} | | p-t-{$suffix}-{$value} | padding-top: {$value} | | p-b-{$suffix}-{$value} | padding-bottom: {$value} | | p-l-{$suffix}-{$value} | padding-left: {$value} | | p-r-{$suffix}-{$value} | padding-right: {$value} | | m-{$suffix}-{$value} | margin: {$value} | | p-{$suffix}-{$value} | padding: {$value} | | mx-{$suffix}-{$value} | margin-left: {$value}; margin-right: {$value}; | | my-{$suffix}-{$value} | margin-top: {$value}; margin-bottom: {$value}; | | px-{$suffix}-{$value} | padding-left: {$value}; padding-right: {$value}; | | py-{$suffix}-{$value} | padding-top: {$value}; padding-bottom: {$value}; | | mx-{$suffix}-auto | margin-left: auto; margin-right: auto;| | ml--{$suffix}-auto | margin-left: auto; |

table

| class | properties| | ------ | -------- | |table | width: 100%;| |border-collapse | border-collapse: collapse; | |border-separate | border-collapse: separate; | |table-auto | table-layout: auto; | |table-fixed | table-layout: fixed; |

text

| class | properties| | ------ | -------- | |text-{$suffix}-uppercase | text-transform: uppercase | |text-{$suffix}-lowercase | text-transform: lowercase | |text-{$suffix}-capitalize | text-transform: capitalize | |text-{$suffix}-left | text-align: left | |text-{$suffix}-right | text-align: right | |text-{$suffix}-center | text-align: center | |text-{$suffix}-justify | text-align: justify | |normal | font-style: normal| |italic | font-style: italic| |oblique | font-style: oblique| |initial | font-style: initial| |text-#{$color} | color: #{$color} | |list-reset | list-style: none; padding: 0; | |truncate-text-{$value} | webkit-line-clamp: {$value}|