Samagiri

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

pallete.scss
typography.scss
viewport.scss

Pallete

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 )

name: As defined in the color registry for corresponding hex code.
property: bg - background color, color - font color and border - border color
important: Bool make the property important

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

Typography

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 )

name: Font name. eg: Lato, Georgia etc
type: Font weight tag. eg: bold, extra-bold etc
size: Font size. eg: 16px, 2em etc
line_height(Optional): Line height eg: 1.4, 20px etc

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

@function em( font_size, base_font_size )

font_size: Font size in pixel you want to convert

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

Viewport

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;
	}
}

Usage

@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;
	}
}

27AE60/samagri

CSS authoring helpers based on SASS.