devbridge / styleguide Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Use path library to make path building to work on Unix as well.
Typing code and Inline css, snippet view should auto update
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 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
}
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 .
How snippets order can be changed?
Should we implement manual sort?
When scraping sass and there are variables referencing to other variables - app crashes, because somehow a function is inserted into colors object.
Then resizing, go oonto iframe area and you will see, that window is not resizing. we need pseudo element, to prevent entering different "document"
Need to fix copying of your-logo.png, because it becomes corrupted after copying.
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:
As of right now we can only create new categories updating config file. Would be nice to have such functionality in the browser.
}
If sass variables are not scraped we still need to show about and typography sections to the user.
Can be useful feature:
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.
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.
Snippets will have following information:
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.
Probably need to load font-awesome from cdn, if available. Because IIS refuses to serve .woff2 extension files by default.
I think, this can be very useful.
http://blog.codepen.io/documentation/api/prefill/
Load javascripts into iframe only when includeJs flag is specified as true.
Styleguide component should have config.json file with following options:
Typography section should be hardcoded and should reflect project default headings and body styles
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?
Add modal window, with following information:
New snippets found
Changed snippets
Dublicate ids
Total snippets found
Add a class for edited snippet, so that user could see which snippets were edited from UI and will not change after scrape.
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.
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.
Add a button in snippet code preview to copy to clipboard that code.
We don't see variables assigned to colors in color pallete after new theme.
Change edit icon, Now it looks like settings
We need to remove deleted snippets category from category list. Users can access deleted page if needed but it would be invisible from navigation.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.