Skip to content

Latest commit

 

History

History
148 lines (100 loc) · 3.04 KB

EDIT-AN-EXISTING-COMPONENT.md

File metadata and controls

148 lines (100 loc) · 3.04 KB

Edit an existing component

Note: For example, let edit an atom in all examples.

Edit the component markup and style

1 - After Install the microscope, run the grunt serve command for watch for changes and build when necessary.

how to install?

2 - Open the Markup and Style folders:

$ cd source/markup/atoms

$ cd source/style/atoms

3 - Choice your atom, open in your favorite editor and edit.

markup and style

4 - Save and view your change on http://localhost:9000/

atom

Edit the component states

1 - After Install the microscope, run the grunt serve command for watch for changes and build when necessary.

how to install?

2 - Open the config.json file:

config

3 - Choose the state of your component and edit the value of states

{
	"name": "small-text",
	"states": "complete",
	"notes":""
},

Note: You have 3 levels to choose from states:

Value Result
progress progress
review review
complete complete

Edit the component notes

1 - After Install the microscope, run the grunt serve command for watch for changes and build when necessary.

how to install?

2 - Open the config.json file:

config

3 - Edit the note value:

{
	"name": "logo",
	"states": "progress",
	"notes": "300px X 300px"
},

4 - Save and view your change on http://localhost:9000/

note

Edit the component name

1 - After Install the microscope, run the grunt serve command for watch for changes and build when necessary.

how to install?

2 - Edit the component name in the config.json file

config

2 - Edit the component name in yours markup/style files

source/markup/atoms/menu-link.html

source/style/atomsmenu-link.html.style

3 - Save and view your change on http://localhost:9000/

Reorder the components

1 - After Install the microscope, run the grunt serve command for watch for changes and build when necessary.

how to install?

2 - Open the config.json file:

config

3 - Reorder the component

{
  "name": "favicons",
  "states": "progress",
  "notes": ""
},
{
  "name": "logo",
  "states": "progress",
  "notes": "300px X 300px"
},

Reorder example:

{
  "name": "logo",
  "states": "progress",
  "notes": "300px X 300px"
},
{
  "name": "favicons",
  "states": "progress",
  "notes": ""
},

4 - Save and view your change on http://localhost:9000/