npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

castlecss-forms

v1.1.1

Published

Easy to use forms for CastleCSS

Downloads

67

Readme

CastleCSS Forms

Quickly add forms with this CastleCSS module.

CastleCSS logo @CastleCss.com

CastleCSS Framework

The form files are part of the CastleCSS Package.

How to install

  • Download the CastleCSS Boilerplate. All Packages are included + examples and project setup
  • Install via npm: npm install castlecss-forms -S (see below for a step-by-step guide)
  • Require it in your own npm package
  • Download or clone the package

Updating files

CastleCSS is built in such a way that it's easy to update, you can just download and make it your own as long as you don't overwrite the core files. To update the forms module, just run:

npm update castlecss-forms

Documentation and examples

You can find the documentation and examples for CastleCSS Forms here. You can also download the CastleCSS Boilerplate, which includes CastleCSS Forms.

Getting started

Your project should have a setup similar to the example below (included in the CastleCSS Boilerplate). This way you make sure your own variables overwrite the castle-core variables and your setup is still updatable.

| Your project directory/
|
|-- node_modules/
| | -- castlecss-core/
| | -- castlecss-buttons/
| | -- castlecss-notifications/
| | -- castlecss-forms/
| | 
|-- scss/
| |-- main.scss
| |-- variables.scss
| |
|-- js/
| | -- scripts.js
| |
|-- img/
|-- dist/
| |-- styles.min.css
| |-- styles.min.map
| |-- scripts.min.js
| |
|-- index.html
|-- Gruntfile.js
|-- package.json

1. Include CastleCSS Forms in your project

To do this, run the following command in your CLI (make sure you have Node.js installed on your computer):

npm install castlecss-forms -S

All dependencies needed in order for CastleCSS Forms to run properly are now available (in the 'node_modules' folder).

2. Include CastleCSS Forms in your sass structure

To enable CastleCSS Forms it is essential that you include the corresponding main.scss file in your project's own sass structure. Essentially, your 'main' sass file should have a setup similar to this (included in the CastleCSS Boilerplate):

/*  core variable files */
@import "node_modules/castlecss-core/sass/variables";

/*  Your own variables so they overwrite the core */
@import "variables";

/*  rest of core files */
@import "node_modules/castlecss-core/sass/main";
@import "node_modules/castlecss-forms/sass/main";

 
/*  Include your own files below this line
    --------------------------------------
*/

3. Include script library

Please not that jQuery is required in order for CastleCSS Forms to work. Make sure the CastleCSS Forms scripts load after jQuery is loaded.

We propose three ways to make use of the CastleCSS Forms script library, which will be listed below. CastleCSS Forms consists of multiple modules, which can be used separately if desired.

Include all Forms modules

To make use of all the modules, simply include the following scripts (that are located in the 'dist' folder):

<script type="text/javascript" src="/path/to/scripts/Forms.min.js"></script>
<script type="text/javascript">
	$(function () {
		CastleCSS_Forms_Forms();
	});
</script>

Include as separate modules

To make use of the modules separately, use the following scripts (that are located in the 'dist' folder):

<!--- The modules of your choice --->
<script type="text/javascript" src="/path/to/scripts/Select.min.js"></script>
<script type="text/javascript" src="/path/to/scripts/FileInput.min.js"></script>
<script type="text/javascript" src="/path/to/scripts/State.min.js"></script>

<script type="text/javascript">
	/* For example */
	$(function () {
		CastleCSS_Forms_Select();
	});
</script>

Require

It is possible to require CastleCSS Forms into your project.

var castlecss_forms = require('castlecss-forms');

/* Use all modules */
castlecss_forms.forms();

/* Use separate modules */
castlecss_forms.select();
castlecss_forms.fileinput();

Selectors

By default, the CastleCSS Forms library searches for the following elements:

...
<!--- A wrapping element around the input --->
<div data-castlecss-field> 
	<input type="text"></input>
</div>
...

<!--- The select element --->
<select data-castlecss-select>
...
</select>

Configuration

By default, the CastleCSS Forms library uses the CastleCSS selectors. It is possible to configure selectors of your own choice. Just add the following configuration:

CastleCSS_Forms_Forms({
	fileInput: '.yourOwnSelector',
	select: '.yourOwnSelector'
});

CastleCSS_Forms_Select('.yourOwnSelector');
CastleCSS_Forms_FileInput('.yourOwnSelector');

Roadmap

We're currently working hard on making the CastleCSS expansions and improvements. CastleCSS is made to serve as lightweight basis for tailor made software but we do want to give you the option to install a few modules to make your life easier.

Please see the ROADMAP.MD from the CastleCSS Meta Package for our current plans for the future.

Contributing

Want to contribute? We'd love your help, please take a look at the roadmap or submit new suggestions.