starter-css v1.0.7

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

display

flex

floats

grids

icons

image

interactivity

position

font sizing

spacing

table

text