美文网首页
刘月林 | Sktech to CSS 实例一复盘

刘月林 | Sktech to CSS 实例一复盘

作者: 刘月林Yuelin_MELB | 来源:发表于2018-08-01 12:16 被阅读0次

Step 1

下载 Sketch 最新版本和汉化插件:


Step 2

  1. 打开 Sketch, 新建一个文档: setup.jpg
  2. 使用Sketch左上角 Insert 按钮插入一个面板(快捷键A),在右侧 Material Design 选择 Desktop:

    setup.gif 并根据自己的需要来调整尺寸.

  3. 使用Sketch左上角 Insert 按钮插入矩形基本元素进行原型制作(快捷键R)


    Desktop_Slice.png
  4. 最后完成 mobile 的原型制作,方法同上


    Frame.png

Step 3

  1. 新建 Landing Page页面,插入画板,选择Desktop,利用标尺来完成布局(control + r 显示标尺,control + l 显示布局)
  2. 新建 Mobie 画板,按照 Desktop 画板的内容完成布局
  3. 新建 Styles 页面,完成样式的自定义
  4. 同上述步骤,依照 Desktop 的流程完成 Mobile 的设计


    Desktop.png
    Mobile.png

Step 4

  1. 在 index.html 里完成内容的填充
  2. 安装CSS拓展语言Sass
  3. 使用Sass,根据 Sketch 里样式的数据完成样式的 CSS 定义



Step 5

在Sass中使用@media完成响应式布局

$med

$sml

Step 6

Push到 Github 远端

刘月林
写于湖北沙洋
2018/08/01

相关文章

网友评论

      本文标题:刘月林 | Sktech to CSS 实例一复盘

      本文链接:https://www.haomeiwen.com/subject/apelvftx.html