Skip to content

Sstudios-Dev/Sstudiosdev-lib-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sstudiosdev-lib-css

Sstudiosdev-lib-css is a CSS library that provides a collection of predefined styles for animations and useful functions implemented in JavaScript, designed to enhance the web development experience.

Features

  • Custom Animations: Access a variety of predefined animations to enhance the interactivity of your website.
  • Ready-to-use JavaScript functions: Provides ready-to-use JavaScript functions that can help you perform common tasks more efficiently.
  • Flexible Customization: Adaptability to customize animation styles according to the specific needs of your project.

Installation

You can install Sstudiosdev-lib-css via npm:

npm i sstudiosdev-lib

Or you can include the CSS file directly in your project:

Animations

<link rel="stylesheet" href="/node_modules/sstudiosdev-lib/lib/css/sstudios-lib-animated.main.css">

Design

<link rel="stylesheet" href="/node_modules/sstudiosdev-lib/lib/css/sstudios-lib-style.main.css">

View complete list of design components

Usage

Once you've installed the library into your project, you can start using its styles and functions as follows:

CSS Animations

To apply a pre-defined CSS animation, simply add the corresponding class to the HTML element you wish to animate. For example:

<div class="fadeIn">Welcome!</div>

See complete list of animations

JavaScript Functions

To utilize the included JavaScript functions, simply import the module and call the desired function. For example:

// formValidation.js

function validateForm(event) {
    var nameInput = document.getElementById('name');
    var emailInput = document.getElementById('email');
    var messageInput = document.getElementById('message');

    if (!nameInput.value || !emailInput.value || !messageInput.value) {
        event.preventDefault();
        alert('Please complete all fields.');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    var contactForm = document.getElementById('contactForm');
    contactForm.addEventListener('submit', validateForm);
});

import to html

<script src="/node_modules/sstudiosdev-lib/lib/js/formValidation.js"></script>

See complete list of js functions

Contribution

Contributions are welcome! If you have ideas to enhance this library, please open an issue or submit a pull request. Make sure to follow the contribution guidelines.

License

Sstudiosdev-lib is released under the MIT License. See the LICENSE file for more details.

Contact

For any questions or suggestions, feel free to reach out to the Sstudiosdev team via [email protected]