Skip to content

Commit

Permalink
Fix typos and confusing wording in README
Browse files Browse the repository at this point in the history
  • Loading branch information
Richard Boulton authored and David Singleton committed Sep 2, 2014
1 parent 0df3225 commit c9a56ef
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Other related repositories:
* [alphagov/govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit) - an SCSS toolkit for building responsive and cross-browser friendly web sites
* [alphagov/slimmer](https://github.com/alphagov/slimmer) - Rack middleware for wrapping Rack applications in shared templated layouts

##Javascript unit tests
## Javascript unit tests

To run the unit tests in batch use the jasmine:ci rake task, but it must be run in the test environment: `RAILS_ENV=test rake jasmine:ci`.

Expand All @@ -32,43 +32,43 @@ PLEK_SERVICE_STATIC_URI=0.0.0.0:3013 ./startup.sh
## GOV.UK components

Shared partials that encapsulate the HTML/CSS/JS for a common UI component.
The component files are centrally hosted on static and exposed to applicatins via [alphagov/slimmer](https://github.com/alphagov/slimmer).
The component files are centrally hosted on static and exposed to applications via [alphagov/slimmer](https://github.com/alphagov/slimmer).
The partial is exposed over the network, and the CSS/JS are included by the shared templated layout.

The available compoents and their documentation are exposed by an API at `/templates/govuk_component/docs`, which is consumed by
The available components and their documentation are exposed by an API at `/templates/govuk_component/docs`, which is consumed by
[alphagov/govuk_component_guide](https://github.com/alphagov/govuk_component_guide) to generate a living styleguide for components.

* a [Partial View](app/views/govuk_component) - The template logic and markup, also defines the arguements expected
* a [Partial View](app/views/govuk_component) - The template logic and markup, also defines the arguments expected
* a [SCSS module](app/assets/stylesheets/govuk-component) - The styling of the component
* a Javascript module - no examples yet.
* Documentation - currently in a [static/central file](app/views/govuk_component/docs.json), this will generated dynamically in the future

### Creating a new component

There's a rails generator you can use to create the basic compontent files, but it's recommended you read below to understand how it works as well.
There's a rails generator you can use to create the basic component files, but it's recommended you read below to understand how it works as well.

```
bundle exec rails generate govuk_component [your-component-name]
```

### How components are structured

Component names should be lowercase and hyphenated, eg `your-compontent-name`.
Component names should be lowercase and hyphenated. For example: `your-component-name`.

When referenced from an application as a partial they'll be prefixed with `govuk-`, eg `govuk-your-compontent-name`.
When referenced from an application as a partial they'll be prefixed with `govuk-`. For example: `govuk-your-component-name`.

To match rails view convention the partial itself should use an underscore, rather than a hyphen.

1) views live in `app/views/govuk_component/your_compontent_name.raw.html.erb` - There should be a single root element, with a class that's the same as a prefixed component name, eg
1) views live in `app/views/govuk_component/your_compontent_name.raw.html.erb` - There should be a single root element, with a class name consisting of the prefixed component name. For example:
```
<div class="govuk-your-compontent-name">
<div class="govuk-your-component-name">
<p>things</p>
</div>
```

2) There is a SCSS module at `app/stylesheets/govuk-component/_your-compontent-name.scss` - there should be a single root class, the same class on the root of the partial, eg
2) There is a SCSS module at `app/stylesheets/govuk-component/_your-component-name.scss` - there should be a single root class, the same class on the root of the partial. For example:
```
.govuk-your-compontent-name {
.govuk-your-component-name {
// CSS rules go here.
p {
// scoped rules
Expand All @@ -79,10 +79,10 @@ To match rails view convention the partial itself should use an underscore, rath
3) SCSS modules are included in `app/stylesheets/govuk-component/_component.scss` - which is used in the standard static layout SCSS files (application.scss, header_footer_only.scss)

4) Documentation lives `app/views/govuk_component/docs.json` - this is in the form of an array of hashes:
* `id`: The underscore version of the compontent name
* `name`: The human name, eg, `Your Example Component`
* `id`: The underscore version of the component name
* `name`: The human name. eg, `Your Example Component`
* `description`: A longer form description of what the component does, when it should be used
* `fixtures`: TBD: For components that expect aguements this will be a hash of fixtured example arguments
* `fixtures`: TBD: For components that expect arguments this will be a hash of fixtured example arguments

Adding it to the documentation will allow you to preview it in the `govuk_component_guide`, which can be pointed to any
version of startic, including your local one running a branch. Which you should probably do.
version of static, including your local one running a branch. Which you should probably do.

0 comments on commit c9a56ef

Please sign in to comment.