/sniptrap

Sniptrap, born of the idea, that advanced web design can not only be for people with advanced knowledge in CSS and design in general, but can be accessible to anyone who wants to have a web with high design standards. Sniptrap, is a snippet library, in which you can preview the design you want, copy and paste the HTML and CSS code into an HTML or HTML-Builder embedder like Elementor's in Wordpress, and have a professional design instantly. Sniptrap, makes use of two css style libraries. Bootstrap 4 in its latest stable version and Bootstraplus another additional project of the creator, in order to have advanced designs and that can be easily editable.

Primary LanguageJavaScript

Sniptrap

Sniptrap, born of the idea, that advanced web design can not only be for people with advanced knowledge in CSS and design in general, but can be accessible to anyone who wants to have a web with high design standards.

Sniptrap, is a snippet library, in which you can preview the design you want, copy and paste the HTML and CSS code into an HTML or HTML-Builder embedder like Elementor's in Wordpress, and have a professional design instantly.

Sniptrap, makes use of two css style libraries. Bootstrap 4 in its latest stable version and Bootstraplus another additional project of the creator, in order to have advanced designs and that can be easily editable.

How to add it to my project ?

In order for Sniptrap or the Snippets shown in the library to work correctly, it is necessary that you install in your project the complete Bootstrap 4.4 and Bootstraplus 1 BETA version libraries.

Step 1

Bootstrap 4.4 (Latest stable version)

CSS

Copy-paste the stylesheet < link > into your < head > before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following < script > near the end of your pages, right before the closing </ body > tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Built with:

This project has been written from scratch with Bootstrap 4 and of course not with Bootstraplus 1 too, additional libraries such as Highlight.js, Jquery.js, Muuri.js, Sass for CSS precompilers, Node.js to make possible the compilation of Sass, Git for version control and Github to upload the project completely.

Below is the list of all the development tools of the current project

  • Highlight.js - Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection.
  • Jquery.js - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
  • Muuri.js - Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. Wanna see it in action? Check out the demo on the website.
  • Bootstrap 4.4 - SASS is a tool for web developers of websites, which allow translating a code of non-standard style sheets (SASS or SCSS), specific to the preprocessor in question, to a standard CSS code, understandable by browsers.
  • Bootstraplus 1 - Bootstraplus: Born from the idea of being able to use reusable and maintainable CSS over time, allowing its use in all the desired projects. Bootstrap currently in its latest stable version (4.4) works this way.
  • Sass - SASS is a tool for web developers of websites, which allow translating a code of non-standard style sheets (SASS or SCSS), specific to the preprocessor in question, to a standard CSS code, understandable by browsers.
  • NPM - Node Package Manager or simply npm is a package manager, which will make our lives easier when working with Node
  • Ruby - Ruby is a programming language created by Yukihiro Matsumoto, in this case, Ruby is required by Node.js and Sass to compile the styles to CSS
  • Node.js - Node.js is a server-side JavaScript environment that uses an asynchronous and event driven model
  • Git - Version control software designed by Linus Torvalds
  • Github - GitHub is a project management and code version control system, as well as a social network platform designed for Developers

Contributors

Currently this project has no contributors, but if there is someone who is interested in turning this into something bigger, it is just that they contact me. I am from Colombia, but you can write to me in English, if you are not from here and with pleasure I will be responding

Wiki

You can find much more about how to use this project in our Wiki

Versioning

We use Git to control project versions, you can see all commits in the tags in this repository.

License 📄

This project is under the License (Github Standard Licensing)

Authors

Thanks to: