null-responsive-vue

nullResponsive

For times where you are either lazy to write media queries or you don't have need for a mobile adaptive website

nullResponsive is a customizable splash screen that replaces your sites view when breakpoints (mobile | desktop) are reached, essentially covering the mess your site is without media queries

💾 Installation

 $ npm install null-responsive-vue

📄 Usage

Install in your main ts or js file

  import nullResponsive from "null-responsive-vue"   // import base css file
  
  import "null-responsive-vue/styles.css"
  
  Vue.use(nullResponsive) // install globally

🛠 Config

Pass in the Config props to the component when you place it in any of your vue files

  <template>
     <nullResponsive :config="nullConfig"/>
  </template>
   
   <script>
       export default{
          data(){
              return {
                       nullconfig : {
                          inputText: "This is the face of a lazy developer, still working on the mobile view mfjpm🙏",
                          imglink: "https://c.tenor.com/fkPxqJwOVhoAAAAM/qforce-stat.gif",
                          breakpoint: 1000,
                          bg_color: "#e6e6fb",
                          text_color: "#858586",
                      }
               }
         }
   </script>

Or you can pass in the config options when installing globally in your main ts or js file

   // main.js
   const nullconfig = {
    inputText: "This is the face of a lazy developer, still working on the mobile view mfjpm🙏🏽",
    breakpoint: 1000,
    imgPath: "/src/assets/img.jpeg",
    bg_color: "#e6e6fb",
    text_color: "#858586",
};
   Vue.use(nullResponsive, nullConfig)

Props

The props passed determines the splash screen that'd be displayed. Here's a table of all available props

Prop	Description	Type	Default
inputText	Text content on the splash screen, could also include links using <a><a/>	string	none
breakpoint	Sets the breakpoint at which the splash screen comes in px up e.g. 1000	number	1000
bg_color	Sets the background color of the splash screen e.g #e6e6f9	string	#fffff
text_color	Sets the text color of the text content on the splash screen	string	black
imgPath	Adds a custom image to the content of the splash screen Pass in the relative path to your image resource e.g imgPath: "/src/assets/splash.png"	string	none
imglink	To be used when using external images not in your vue app e.g imglink: "https://res.cloudinary.com/ferventdev/image/upload/.../jesse.svg"	string	none

Issues

If you experience any anomaly or bug while using the component, feel free to create an issue on this repo issues

👷🏽 Contribution Guide

If you see any usecase or feature you'd like to explore & add to it, you can contribute by:

1. Forking this repository.
2. Clone the forked repository to your local machine.
3. Create a new branch with a name like this -feature/name-of-feature.
4. Run npm to install dependencies.
5. Write code and then commit changes.
6. Run npm run build to compile a build into the dist folder.
7. To test the feature or bug you've coded run npm link in your nullResponsive cloned root folder
8. On the local project you want to test the features on, run npm link null-responsive-vue.
9. Now navigate back to the terminal on your cloned nullResponsive folder and then run npm link ../path-to-test-project/node_modules/vue. Now you can test your changes.
10. After all is done, push to your forked repository and then send a pull request.

⚖️ Licence

MIT (c) Jesse Akoh.