DEV Community

loading...
Cover image for Introducing Xtra-Power CSS: Device Size No more a Challenge!!!

Introducing Xtra-Power CSS: Device Size No more a Challenge!!!

manish srivastava
Director & CEO, GDP CHURN (P) Ltd. Loves coding . Supports open source by funding.
・2 min read

Alt Text

xp stands for Xtra Power Tools

The aim of this repository is to provide 'tools' with xtra-power.

  1. xp.css: A front-end developer needs to make every thing responsive as per different device sizes. Just imagine, they get a css library that takes care of every thing to go responsive in any device size - small phones to TVs. For Instance, The size of text , buttons, images, cards, menu etc.

Why xp was created:
(a) Linking one CSS library ensures the responsiveness of all users.
(b) Unlike bootstrap or other libraries, you can modify code of xp.css as per your project. You dont need to scratch your head.

  1. xp-backened
    Just imagine you only need to define lables and you get a code in PHP, RUST , JS, C++ , Phython etc in a click. ( Coming Soon).

  2. xp-Websitecreator
    Drag and Drop beautiful site maker. Its Scalable... Share your snippet with others or use their in your website. (Coming Soon).

xp.css [xtra power css]

This CSS Library makes everything super responsive. It calculate device size and outputing topography , images, div size, cards, buttons etc as responsive. You don't need to write media queries for different devices. This Library is modified version of w3.css. However, lot of addition is done in w3.css to make give it xtra-power.

  1. Fast
  2. One Css Library for drawing mobile, tablet, desktop and TV apps.
  3. Similar syntax like Bootstrap css. Therefore, easy to implement.
  4. Production Ready.
  5. Responsive Topography is replaced with fluid topography.
  6. Size of button changes with device size.

How to use xp.css:

Just download and link it or
link it by github link: https://raw.githubusercontent.com/Manishfoodtechs/xp/main/xp.css

Here is demo on codepen:
Check with potrait as well as landscape. See how elements changes size. Rotate your mobile phone.

Version xp.css: 1.0 ( Nov 2020)

JOIN US:

Join development of xp.css. Pull Request Welcome :)
Urgently needed :) (Mail me on manishfoodtechs@gmail.com)

Licence

MIT . You are free to use xp.css in personal and commercial projects

GitHub logo Manishfoodtechs / xp

xtra power frontend and backend tools

xp stands for Xtra Power Tools

The aim of this respository is to provide 'tools' with xtra-power.

  1. xp.css A front-end developer needs to make every thing responsive as per different device sizes. Just imagine , they get a css library that takes care of every thing to go responsive in any device size - small phones to TVs. For Instance The size of text , buttons, images, cards, menu etc.

Why xp was created (a) Linking one CSS library ensures the responsiveness of all users. (b) Unlike bootstrap or other libraries, you can modify code of xp.css as per your project. You dont need to scratch your head.

  1. xp-backened Just imagine you only need to define lables and you get a code in PHP, RUST , JS, C++ , Phython etc in a click. ( Coming Soon).

  2. xp-Websitecreator Drag and Drop beautiful site maker. Its Scalable... Share your snippet with…

Discussion (5)

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Cool! I would like to be involved, too!

Collapse
manishfoodtechs profile image
manish srivastava Author

Hey nikhil sure. Welcome

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Check you project repo. I've dropped an issue there...

Thread Thread
manishfoodtechs profile image
manish srivastava Author

Hey Nikhil
nikhilmwarrier has been added as a collaborator on the repository.
Please check

Thread Thread
nikhilmwarrier profile image
Forem Open with the Forem app