05 Oct 2015

Samagri is CSS authoring helper files based on SASS which helps you to manage typography, colours and responsiveness. Samagri contains three helper files

  1. pallete.scss
  2. typography.scss
  3. viewport.scss


Pallete manages all your color codes used in the project. you can register a colour hex code with respect to some name that you like or pantone name (eg: PMS-2717: #A5BAE0).

Color Registry

/* Color Pallete */

$pallete : (
  pure-white: #FFF,
  patone: #EEE,
  custom-name: #DDD,
  us: #27AE60,
  pure-black: #000,

@mixin color( name, property, important )

.klass {
	@include color('pure-white');
	@include color('pure-black', 'bg');
	@include color('us', 'border');


Typography helps you to manage font and corresponding typeset using in the project. now a days lot of people started using multiple fonts in there projects.

Font Registry

/* Fonts Register */

$fonts : (
  'georgia': 'georgia',
  'lato' : 'Lato'

Typeset Registry

Typeset register helps you to map the font-weight to meaning full tag.

$typesets : (
  'georgia': (
    'regular': 400

  'lato' : (
    'light' : 300,
    'regular' : 400,
    'bold' : 700,
    'extra-bold' : 900

@mixin font( name, type, size, line_height )

.klass {
	@include font('georgia', 'regular', 18px, 1.4);

@function em( font_size, base_font_size )

.klass {
	@include font('georgia', 'regular', 18px, 1.4);


Viewport helps you to manage your break points. viewport default gives you the standard device breakpoints, print media and custom content break points.

@mixin respond-to( device, min_width )

Devices Breakpoint Orientaion
small-phone-p 320px portrait
small-phone-l 320px landscape
small-phone-lp 320px landscape and portrait
large-phone-p 480px portrait
large-phone-l 600px landscape
large-phone-lp 480px landscape and portait
tablet-p 768px portrait
tablet-l 768px landscape
tablet-lp 768px landscape and portait
medium-screen 992px
large-screen 1440px
content custom content breakpoint
print for print media

min_width (Optional): If you are using custom breakpoint use this param to pass the min-width

.klass {
	width: 500px;
	height: 500px;

	@include respond-to('small-screen-l')	{
		width: 300px;
		height: 300px;

	@include respond-to('print')	{
		width: 200px;
		height: 200px;

	@include respond-to('content', '500px' )	{
		width: 100px;
		height: 100px;


@import 'base/pallete';
@import 'base/typography';
@import 'base/viewport';

.klass {
	width: 200px;
	height: 200px;

	@include font('georgia', 'regular', em(18));

	@include color('pure-white');
	@include color('bg', 'pure-black');
	@include color('border', 'us');

	@include respond-to('small-screen-l')	{
		width: 400px;
		height: 400px;


CSS authoring helpers based on SASS.

Signature of Jaison Justus