typography

font size and styles

layout

layout space and width

color

brand and design system colors

components

curated with reusability and easiness

How To Use In Your Project?

add link given below to your html file of your website and you are done.

 <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/gh/sirajcode/
  design_source@master/style.css">

Aa

Letters

Aa Bb Cc Dd Ee Ff Gg

Numbers

1 2 3 4 5 6 7 8 9

The '.barlow' and '.poppins' are the google fonts used in design source design system.

for .italic,.strong , .bold , .bolder , .uppercase for uppercase and for .code and .keyboard for shortcuts and to align text .center ,.left and .right classes.

.type1

.type2

.type3

.type4

.type5

.regular

.text

Layouts

layout classes for creating superfast ui and webpage using design source.

margins

margin of 6px unit is defined to the classes m as all around, mt for top, mb for bottom, ml for left and mr for right.

  • margin: m, m1, m2, m3, m4, m5, m6, m7and m8.
  • x-aixs: mx1, mx2, mx3and y-aixs: my1, my2, my3.

    • paddings

    margin of 6px unit is defined to the classes p as all around, pt for top, pb for bottom, pl for left and pr for right.

  • padding: p, p1, p2, p3, p4, p5, p6, p7and p8.
  • x-aixs: px1, px2, px3and y-aixs: py1, py2, py3.

    • widths

    width is equally devided as 10% to 90% where 10% is w1 and its goes to w9.

  • widths: w1, w2, w3, w4, w5, w6, w7, w8and w9.

    • columns

    columuns are equally devided space on the canvas its devide the 100% space into equall columns as,

  • columns: col1for 100%, col2for 100%/2, col3for 100%/3, col4for 100%/4, col5for 100%/5, col6for 100%/6, col7for 100%/7, col8and for 100%/8.

    • borders/corners

    borders are blis for left,bris for right,bbis for bottom and btis for top given by classes as:

  • borderswidth: borderis 1px solid, border1is 2px solid, border2is 3px solid, border3is 4px solid
  • borderradius: roundis , roundedis and circularis .
  • bordercolor: border_color color defined as name of color in desing system.

    • Colors

  • Background colors are added as .bg_colornameclass
  • colors are added as .colorname class

    • Accent Blue

    .blue

    Sucess Green

    .green

    Brick Red

    .red

    Warning Yellow

    .yellow

    Coal Dark

    .dark

    Dark Shade

    .gray

    Light White

    .light

    White

    .white

    Created with 🖤 By@siraj_codes