Probably need to load font-awesome from cdn, if available. Because IIS refuses to serve .woff2 extension files by default.

Buttons for snippet width selection do not represent widths defined in configuration. Size indicators for individual snippets work inconsistently after making it not an input field.

Add a button in snippet code preview to copy to clipboard that code.

Need to fix copying of your-logo.png, because it becomes corrupted after copying.

Add modal, which shows how many unique hex(rgba, etc..) values were added and removed.
Indicate if typography vars were changed and if changed - then what changed?

Use path library to make path building to work on Unix as well.

• Path to scss files will be defined in config file
• To identify variables types comments will be used e.g.
  //-- Color:begin --//
  $color-red: #ff0000
  //-- Color:end --//
  //-- Fonts:begin --//
  $font-avenir: 'Avenir W01', sans-serif;
  //-- Fonts:end --//

http://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query

For the first time, show warning message and prevent snippet submission. Let user force snippet submission on his own risk.

We need to improve setup process.
I think step by step guidance is not needed because most of the users want to get straight to config file.
We need to determine most critical steps that require styleguide to work.
As of right now, i see following flow:

• download and install module.
• setup config. It could be a part of start-styleguide task. Also, we need to cleanup config file, make it simpler, I will create new topic about that.
• start server.

In category meniu, we should display numbers of items in category.
Especially, this will be helpful for undefined category.

Sort undefined category to the end of the list, change visual apperance to stand out from other items.

Typing code and Inline css, snippet view should auto update

How snippets order can be changed?
Should we implement manual sort?

Then resizing, go oonto iframe area and you will see, that window is not resizing. we need pseudo element, to prevent entering different "document"

As of right now we can only create new categories updating config file. Would be nice to have such functionality in the browser.

Change edit icon, Now it looks like settings

We don't see variables assigned to colors in color pallete after new theme.

Snippets will have following information:

• Name
• Unique id
• Category name (Snippet can be assigned to only one category)
• Snippet code
• Description (optional)
• Inline CSS (optional)

Manual snippets creation and modification will done via browser window:

Creating new snippet we need to generate unique id. We could have dedicated json file, where we could retrieve and store snippets ids.

snippet {

}

Styleguide component should have config.json file with following options:

• admin Domains - a list of domains that allows to show edit functionality
• categories - a list of categories of the snippets with unique id
• watch urls - a list of pages that can be scraped or used for performance testing
• css resources - [future feature] we need to provide project's css assets. We can scrape them directly from the site but then we need to define which domain is the main one.
• path to styleguide
• path to scss variables file

Add modal window, with following information:
New snippets found
Changed snippets
Dublicate ids
Total snippets found

Can be useful feature:

1. User defines urls to templates
2. Custom markers defines, where elements can be inserted into layout.
3. User can drag/drop and remove multiple items to defined area and component can be tested in real situations.

For example, you have home layout, and defined component area in header. You can grab a slider and drop it in header area and test how component works with layout.

What logic is used to sort colors in the palette? Are there possibility to move black and grey colors to the end of the list?

We need to remove deleted snippets category from category list. Users can access deleted page if needed but it would be invisible from navigation.

Categories will be manages by config file.
Each category going to have separate file in which snippets information will be held.
On client side going to be list of categories in the header for navigation between the pages.

When scraping sass and there are variables referencing to other variables - app crashes, because somehow a function is inserted into colors object.

Typography section should be hardcoded and should reflect project default headings and body styles

We need to include CSS resources into config file as manditory option because without CSS Styleguide component becomes useless. All other options could have default values and would be as optional options.

To have Styleguide up and running user would have minimal config like this:

{
    "cssResources":[
        "/site.css",
        "/webfonts.css"
    ]
  }

Full config with default options:

{
  "cssResources":[],
  "jsResources": [],
  "categories": [
    {
      "name": "undefined",
      "id": 0
    }
  ],
  "scrapeUrls": [],
  "sassVariables": [], //renamed from sassResources  
  "resolutions": [
    1200,1024,768,480,320  //removed naming
  ],
  "database": "styleguide/db",
  "uniques": "styleguide/db/uniques.txt",
  "sassData": "styleguide/db/sassdata.txt",
  "extension": ".txt",
  "maxSassIterations": 3,
  "snippetTemplate": "styleguide/template.html",
  "serverPort": 8000
}

Add a class for edited snippet, so that user could see which snippets were edited from UI and will not change after scrape.

We need to have a away automatically create and update snippets. We going to wrap our snippets with html comments so we could later check if they were modified e.g. snippet code .

If sass variables are not scraped we still need to show about and typography sections to the user.

Load javascripts into iframe only when includeJs flag is specified as true.

I think, this can be very useful.
http://blog.codepen.io/documentation/api/prefill/

Now, when in edit mode - snippet is not visible, so the live css/html editing feature is useless, we can't see the changes we are making.