Cmyd-styles NPM

CmydStyles

This library was generated with Angular CLI version 12.2.0.

Overview

CmydStyles Docs

Scss
@import 'cmyd-styles/styles-scss/margin.scss' //imports margin files to the system;
@import 'cmyd-styles/styles-scss/padding.scss' //imports padding files to the system;
@import 'cmyd-styles/styles-scss/width.scss' //imports width files to the system;
css
@import 'cmyd-styles/styles-css/margin.css' //imports margin files to the system;
@import 'cmyd-styles/styles-css/padding.css' //imports padding files to the system;
@import 'cmyd-styles/styles-css/width.css' //imports width files to the system;

CmydStyles This pacakge provides classes for

margin = m-1
margin-left = ml-1
margin-right = mr-1
margin=bottom = mb-1
margin-top = mt-1
margin(%) = mp-1
margin(%)-left = mlp-1
margin(%)-right = mrp-1
margin(%)=bottom = mbp-1
margin(%)-top = mtp-1
padding = p-1
padding-left = pl-1
padding-right = pr-1
padding-bottom = pb-1
padding-top = pt-1
width in pixel= w-1
width in percentage = wp-1

Range of pixels are as 1 - 100, You can use ml-50 which will translate to margin-left: 50px; Incase of width the range of pixel it 0-999px and 0-100%

Exampels

    <!-- margin: 45%; -->
    <button class="mp-45">Button</button>

    <!-- margin-left: 35%; -->
    <button class="mlp-35">Button</button>

    <!-- margin-left: 20px; -->
    <button class="ml-20">Button</button>

    <!-- margin-right: 35px; -->
    <button class="mr-35">Button</button>
    
    <!-- margin: 20px; -->
    <button class="m-20">Button</button>
    
    <!-- padding: 20px; -->
    <button class="p-20">Button</button>
    
    <!-- padidng-bottom: 20px; -->
    <button class="pb-10">Button</button>
    
    <!-- width: 20px; -->
    <button class="w-10">Button</button>
    
    <!-- width: 50%; -->
    <button class="wp-50">Button</button>

Version

0.0.8 Fixed padding-right not working 0.0.7 Fixed margin with pixels not working 0.0.6 Added margins in percentage. better project sturcture 0.0.5 Fixed margin-right values not working 0.0.4 Breaking Changes cmyd-mb.scss or cmyd-mb.css does not exist, instead a spearte file for margin.scss, padding.scss and width.scss is now available 0.0.3 Readme file formatting 0.0.2 Readme file added 0.0.1 Initial commit