https://github.com/castlecss/castlecss-forms
Easy to use forms for CastleCSS
https://github.com/castlecss/castlecss-forms
Last synced: 9 months ago
JSON representation
Easy to use forms for CastleCSS
- Host: GitHub
- URL: https://github.com/castlecss/castlecss-forms
- Owner: CastleCSS
- License: mit
- Created: 2016-12-19T15:15:21.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:17:11.000Z (over 3 years ago)
- Last Synced: 2025-09-08T20:33:01.438Z (9 months ago)
- Language: CSS
- Homepage: http://www.castlecss.com
- Size: 616 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CastleCSS Forms
Quickly add forms with this CastleCSS module.
## CastleCSS Framework
The form files are part of the [CastleCSS Package](https://github.com/CastleCSS/castlecss).
## How to install
- Download the [CastleCSS Boilerplate](https://www.github.com/CastleCSS/castlecss-boilerplate). All Packages are included + examples and project setup
- Install via [npm](https://www.npmjs.com/): ```npm install castlecss-forms -S``` (see [below](#getting-started) 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](http://www.castlecss.com/forms.html). You can also download the [CastleCSS Boilerplate](https://github.com/castlecss/castlecss-boilerplate), which includes CastleCSS Forms.
## Getting started
Your project should have a setup similar to the example below (included in the [CastleCSS Boilerplate](https://github.com/CastleCSS/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](https://nodejs.org/en/download/) 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](https://github.com/CastleCSS/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](https://jquery.com/download/) 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):
```
$(function () {
CastleCSS_Forms_Forms();
});
```
#### Include as separate modules
To make use of the modules separately, use the following scripts (that are located in the 'dist' folder):
```
/* For example */
$(function () {
CastleCSS_Forms_Select();
});
```
#### 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:
```
...
...
...
```
#### 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](https://github.com/CastleCSS/castlecss/blob/master/ROADMAP.md) 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.