cmyd-styles

0.0.8 • Public • Published

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

That's it,

Further help

If you found a bug or know a better way of doing it please do reach me out at hamza13sw185@gmail.com.

Package Sidebar

Install

npm i cmyd-styles

Weekly Downloads

0

Version

0.0.8

License

ISC

Unpacked Size

196 kB

Total Files

42

Last publish

Collaborators

  • htcmafia