在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:seek-oss/html-sketchapp-cli开源软件地址:https://github.com/seek-oss/html-sketchapp-cli开源编程语言:JavaScript 64.9%开源软件介绍:html-sketchapp-cliQuickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp and Puppeteer. Add some simple markup to your page, for example: <div data-sketch-symbol="Button/Primary">...</div>
<div data-sketch-text="Heading">...</div>
<div data-sketch-color="#212121">...</div> Then run the $ html-sketchapp --file sketch.html --out-dir dist/sketch InstallPlease note: html-sketchapp-cli requires Node.js and targets the latest "Active LTS" version. Older versions of Node are unsupported. If you're in a hurry and just want to try it out, you can install html-sketchapp-cli globally, along with html-sketchapp's Sketch plugin: $ npm install --global html-sketchapp-cli
$ html-sketchapp install However, when using html-sketchapp-cli in the context of a project, you should install it locally instead: $ npm install --save-dev html-sketchapp-cli Then, add some scripts to your package.json: {
"scripts": {
"html-sketchapp-install": "html-sketchapp install",
"html-sketchapp": "html-sketchapp [...args]"
}
} Once these scripts have been added, the following commands can be run within your project: $ npm run html-sketchapp-install
$ npm run html-sketchapp Page SetupBefore using this tool, you'll need to add some hooks to your page so that everything can be selected, extracted and named correctly. Annotate symbols with <div data-sketch-symbol="Button/Primary">
...
</div> Annotate nested symbols with <div data-sketch-symbol="Icon/Reply">...</div>
<div data-sketch-symbol="Icon/Retweet">...</div>
<div data-sketch-symbol="Icon/Like">...</div>
<div data-sketch-symbol="IconRow">
<div data-sketch-symbol-instance="Icon/Reply">...</div>
<div data-sketch-symbol-instance="Icon/Retweet">...</div>
<div data-sketch-symbol-instance="Icon/Like">...</div>
</div> Annotate all text styles with <div data-sketch-text="Heading">
...
</div> Annotate all colors with <div data-sketch-color="#212121">
...
</div> For a real world example, check out SEEK Style Guide's sketch exports page and the corresponding source code. CLI UsageImporting from a local fileIf your page is self-contained, you can import from a local HTML file. $ html-sketchapp --file sketch.html --out-dir dist Importing from a local static web serverIf your page needs to be hosted on a static web server, you can provide a local directory to serve and a root relative URL to import from. $ html-sketchapp --serve docs --url /sketch --out-dir dist Importing from existing web serverIf your page is hosted on an existing web server, you can provide an absolute URL. $ html-sketchapp --url http://localhost:3000 --out-dir dist Viewport sizes and responsive designIf you provide a set of one or more named viewports, every symbol and text style will be rendered for each screen size. $ html-sketchapp --viewports.Desktop 1024x768 --viewports.Mobile 320x568 --file sketch.html --out-dir dist If multiple screen sizes are provided, the viewport name will be being appended to all symbol and text style names. For example, Optionally, you can set the pixel density for a given viewport by adding an $ html-sketchapp --viewports.HigherDensity [email protected] --viewports.Retina 1024x768@2 --file sketch.html --out-dir dist If no scaling factor is provided, a default of Config fileAll options can be provided via an module.exports = {
file: 'sketch.html',
outDir: 'dist/sketch',
viewports: {
Desktop: '1024x768',
Mobile: '320x568'
},
puppeteerArgs: '--no-sandbox --disable-setuid-sandbox',
puppeteerExecutablePath: 'google-chrome-unstable'
}; You can provide an alternate config file path with the $ html-sketchapp --config example.config.js Importing into SketchOnce this command has successfully run, the following files will be generated in the output directory.
These need to be imported into Sketch via html-sketchapp's corresponding Sketch plugin. To ease the install process, you can run the following command. $ html-sketchapp install Then, open a new Sketch document and, from the menu, select Congratulations! You should now have your symbols, text styles and document colors available within Sketch! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论