From 50a3cbe299a9239051a1db1d05cfd16c32e79a65 Mon Sep 17 00:00:00 2001 From: Paul Stegeman Date: Mon, 1 May 2017 13:22:03 +0200 Subject: [PATCH 1/8] Wrapped forms function inside document ready --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0f8b9b7..b34cbaa 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,10 @@ To make use of all the modules, simply include the following scripts: ``` From fb9c6778f389e689e76d8fb837b9f68c5b5a485e Mon Sep 17 00:00:00 2001 From: Paul Stegeman Date: Tue, 2 May 2017 10:51:38 +0200 Subject: [PATCH 2/8] Tweaked forms docs --- README.md | 65 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 50 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index b34cbaa..4b8908c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ # CastleCSS Forms +Quickly add breadcrumbs with this module + ![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png) ## CastleCSS Framework @@ -10,7 +12,7 @@ The form files are part of the [CastleCSS Package](https://github.com/CastleCSS/ - Download or clone the package ## Updating files -CastleCSS is built so it's easy to update, you can just download make it your own as long as you don't ovewrite the core 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``` @@ -18,19 +20,51 @@ CastleCSS is built so it's easy to update, you can just download make it your ow You can find the documentation and examples at http://www.castlecss.com and [castlecss-docs](https://github.com/CastleCSS/castlecss-docs) -## Adjusting the variables -Because of the unique update-able setup of CastleCSS you need a seperate variable file to overwrite the default CastleCSS variables. There are a few ways to do this: +## Setup +Your project should have a setup similar to this (included in the [CastleCSS Boilerplate](https://github.com/CastleCSS/castlecss-boilerplate)): +With this you make sure your own variables overwrite the castle-core variables and your setup is still updatable. + +``` +| Your project/ +| +|-- scss/ +| |-- /* Custom project specific scss files here */ +| |-- Main.scss +| | +|-- node_modules/ +| | +| | /* CastleCSS files included automatically here */ +| | castlecss-core/ +| | castlecss-forms/ +| | castlecss-etc ;)/ +``` + +### Main.scss +Your main.scss should have a setup similar to this (included in the [CastleCSS Boilerplate](https://github.com/CastleCSS/castlecss-boilerplate)): + +``` +/* core variable files */ +@import "path/to/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-notifications/sass/main"; -- Use the [boilerplate](https://github.com/CastleCSS/castlecss-boilerplate/) which provides the complete distribution of CastleCSS Forms -- Copy variables.scss from /node_modules/castlecss-core/sass/variables.scss into your own scss folder and include it into your main.scss -- Copy the example from the [documentation](http://castlecss.com/forms.html) into your own variables.scss and include it into your main.scss + +/* Include your own files below this line + -------------------------------------- +*/ +``` ## Dependencies Because CastleCSS Forms uses jQuery as dependency, the distributions contain jQuery. There is however a possibility to make use of the jQuery version of your choice, by making use of the no.vendors distributions. The no.vendor distributions work, as long as the jQuery variable is defined in the global scope. ## Basic structure -The basis structure for your website should look similar like this: +The basis structure for your website should look similar to this: ``` | Project directory/ @@ -60,10 +94,10 @@ The basis structure for your website should look similar like this: ``` ## Usage -There are a couple of different ways to make use of the CastleCSS Forms library. +There are a couple of different ways to make use of the CastleCSS Forms script library. -### Include as seperate modules -To make use of the modules seperately, use the following scripts: +### Include as separate modules +To make use of the modules separately, use the following scripts (that are located in the 'dist' folder): ``` @@ -74,12 +108,14 @@ To make use of the modules seperately, use the following scripts: ``` ### Include -To make use of all the modules, simply include the following scripts: +To make use of all the modules, simply include the following scripts (that are located in the 'dist' folder): ``` @@ -88,7 +124,6 @@ To make use of all the modules, simply include the following scripts: $(function () { CastleCSS_Forms_Forms(); }); - ``` @@ -101,13 +136,13 @@ var castlecss_forms = require('castlecss-forms'); /* Use all modules */ castlecss_forms.forms(); -/* Use seperate modules */ +/* Use separate modules */ castlecss_forms.select(); castlecss_forms.fileinput(); ``` ### Selectors -The CastleCSS Forms library by default searches for the following elements: +By default, the CastleCSS Forms library searches for the following elements: ``` ... From a914a5388e074363fab5a1170ec8077e0d95ea09 Mon Sep 17 00:00:00 2001 From: Paul Stegeman Date: Tue, 2 May 2017 13:35:28 +0200 Subject: [PATCH 3/8] Updated forms readme --- README.md | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 4b8908c..da7c077 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # CastleCSS Forms -Quickly add breadcrumbs with this module +Quickly add forms with this module ![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png) @@ -21,8 +21,8 @@ You can find the documentation and examples at http://www.castlecss.com and [cas ## Setup -Your project should have a setup similar to this (included in the [CastleCSS Boilerplate](https://github.com/CastleCSS/castlecss-boilerplate)): -With this you make sure your own variables overwrite the castle-core variables and your setup is still updatable. +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/ @@ -40,18 +40,18 @@ With this you make sure your own variables overwrite the castle-core variables a ``` ### Main.scss -Your main.scss should have a setup similar to this (included in the [CastleCSS Boilerplate](https://github.com/CastleCSS/castlecss-boilerplate)): +To enable CastleCSS Forms it is essential that you include the corresponding main.scss file in your project's main.scss. This file should have a setup similar to this: (included in the [CastleCSS Boilerplate](https://github.com/CastleCSS/castlecss-boilerplate)). ``` /* core variable files */ -@import "path/to/castlecss-core/sass/variables"; +@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-notifications/sass/main"; +@import "node_modules/castlecss-forms/sass/main"; /* Include your own files below this line @@ -61,7 +61,8 @@ Your main.scss should have a setup similar to this (included in the [CastleCSS B ## Dependencies Because CastleCSS Forms uses jQuery as dependency, the distributions contain jQuery. There is however a possibility to make use of the jQuery version of your choice, by making use of the no.vendors distributions. -The no.vendor distributions work, as long as the jQuery variable is defined in the global scope. +The no.vendor distributions work, as long as the jQuery variable is defined in the global scope. + ## Basic structure The basis structure for your website should look similar to this: @@ -94,7 +95,20 @@ The basis structure for your website should look similar to this: ``` ## Usage -There are a couple of different ways to make use of the CastleCSS Forms script library. +There are a couple of different ways to make use of the CastleCSS Forms script library. CastleCSS Forms consists of multiple modules, which can be used separately if desirable. + +### Include all Forms modules +To make use of all the modules, simply include the following scripts (that are located in the 'dist' folder): + +``` + + + +``` ### Include as separate modules To make use of the modules separately, use the following scripts (that are located in the 'dist' folder): @@ -114,18 +128,7 @@ To make use of the modules separately, use the following scripts (that are locat ``` -### Include -To make use of all the modules, simply include the following scripts (that are located in the 'dist' folder): -``` - - - -``` ### Require It is possible to require CastleCSS Forms into your project. From 075f58305f4fc9777905f822f9315bd9a413338e Mon Sep 17 00:00:00 2001 From: "DNZ\\paul" Date: Mon, 8 May 2017 16:20:10 +0200 Subject: [PATCH 4/8] Update readme with (among others) step-by-step getting started guide. --- README.md | 103 ++++++++++++++++++++++++------------------------------ 1 file changed, 46 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index da7c077..e43b2ae 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # CastleCSS Forms -Quickly add forms with this module +Quickly add forms with this CastleCSS module. ![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png) ## CastleCSS Framework -The form files are part of the [CastleCSS Package](https://github.com/CastleCSS/castlecss) +The form files are part of the [CastleCSS Package](https://github.com/CastleCSS/castlecss). ## How to install -- Install via [npm](https://www.npmjs.com/): ```npm install castlecss-forms``` +There are three ways to install CastleCSS Forms: + +- 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 @@ -17,58 +19,16 @@ CastleCSS is built in such a way that it's easy to update, you can just download ```npm update castlecss-forms``` ## Documentation and examples -You can find the documentation and examples at http://www.castlecss.com and [castlecss-docs](https://github.com/CastleCSS/castlecss-docs) +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 -## Setup 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/ -| -|-- scss/ -| |-- /* Custom project specific scss files here */ -| |-- Main.scss -| | -|-- node_modules/ -| | -| | /* CastleCSS files included automatically here */ -| | castlecss-core/ -| | castlecss-forms/ -| | castlecss-etc ;)/ -``` - -### Main.scss -To enable CastleCSS Forms it is essential that you include the corresponding main.scss file in your project's main.scss. This 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 - -------------------------------------- -*/ -``` - -## Dependencies -Because CastleCSS Forms uses jQuery as dependency, the distributions contain jQuery. There is however a possibility to make use of the jQuery version of your choice, by making use of the no.vendors distributions. -The no.vendor distributions work, as long as the jQuery variable is defined in the global scope. - - -## Basic structure -The basis structure for your website should look similar to this: - -``` -| Project directory/ +| Your project directory/ | |-- node_modules/ | | -- castlecss-core/ @@ -94,14 +54,44 @@ The basis structure for your website should look similar to this: |-- package.json ``` -## Usage -There are a couple of different ways to make use of the CastleCSS Forms script library. CastleCSS Forms consists of multiple modules, which can be used separately if desirable. +### 1. Include CastleCSS Forms in your project +To do this, run the following command in your CLI: + +```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 +##### Include all Forms modules To make use of all the modules, simply include the following scripts (that are located in the 'dist' folder): ``` - ``` -### Include as separate modules +#### Include as separate modules To make use of the modules separately, use the following scripts (that are located in the 'dist' folder): ``` - @@ -130,7 +119,7 @@ To make use of the modules separately, use the following scripts (that are locat -### Require +#### Require It is possible to require CastleCSS Forms into your project. ``` @@ -144,7 +133,7 @@ castlecss_forms.select(); castlecss_forms.fileinput(); ``` -### Selectors +#### Selectors By default, the CastleCSS Forms library searches for the following elements: ``` From 45abf6ff03357efa2624c445d682a56619d7ddf0 Mon Sep 17 00:00:00 2001 From: "DNZ\\paul" Date: Tue, 9 May 2017 08:55:54 +0200 Subject: [PATCH 5/8] Added note that node.js needs to be installed --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index e43b2ae..24ed605 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,6 @@ Quickly add forms with this CastleCSS module. The form files are part of the [CastleCSS Package](https://github.com/CastleCSS/castlecss). ## How to install -There are three ways to install CastleCSS Forms: - - 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 @@ -55,7 +53,7 @@ This way you make sure your own variables overwrite the castle-core variables an ``` ### 1. Include CastleCSS Forms in your project -To do this, run the following command in your CLI: +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``` From 6a2f3995cf4fbed7643761d998c8e4317014f643 Mon Sep 17 00:00:00 2001 From: "DNZ\\paul" Date: Tue, 9 May 2017 09:07:32 +0200 Subject: [PATCH 6/8] Added 'download boilerplate' option to 'How to install' + Changed a h5 to h4 --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 24ed605..11df01a 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Quickly add forms with this CastleCSS module. 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 @@ -86,7 +87,7 @@ _Please not that **[jQuery](https://jquery.com/download/) is required** in order 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 +#### Include all Forms modules To make use of all the modules, simply include the following scripts (that are located in the 'dist' folder): ``` From d1dfb72a35f1919eada700122512b6e9e79f0301 Mon Sep 17 00:00:00 2001 From: "DNZ\\paul" Date: Tue, 9 May 2017 09:09:38 +0200 Subject: [PATCH 7/8] Changed a h3 to a h4 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 11df01a..363f6fe 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,7 @@ By default, the CastleCSS Forms library searches for the following elements: ``` -### Configuration +#### 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: From e75f3a3aa72d9e9e6a1ccc757624f6c171ee5328 Mon Sep 17 00:00:00 2001 From: "DNZ\\paul" Date: Tue, 9 May 2017 09:12:21 +0200 Subject: [PATCH 8/8] Added roadmap and contributing to end of readme --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 363f6fe..0526766 100644 --- a/README.md +++ b/README.md @@ -162,3 +162,11 @@ CastleCSS_Forms_Forms({ 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. \ No newline at end of file