跳到内容
必威体育论坛必威精装下载APPRedfin解决方案的标志必威体育论坛必威精装下载APPRedfin解决方案的标志 联系
海滩上的绿色海胆壳

必威体育论坛Redfin的前端Shell: bundle, Susy, Compass, Breakpoint,以及更多!

虽然我们在Redfin还必威体育论坛没有一个完整的基础主题为每个项目,但我们使用的一件事是我们的“bundle shell”。这构成了我们构建的任何Drupal 7或8主题的基础,事实上,它只是前端的框架(也就是说,这个shell实际上在Drupal领域之外也很有用)。

〇先做最重要的事情这是代码

让我们开始解剖吧…

的Gemfile

Gemfile来自于打包机,这是一个了不起的依赖关系管理工具,用于前端的东西红宝石的宝石.在这里,我们提到了我们需要的存储库,以及要获取哪些gem。然后你就可以跑了包安装以便安装在Gemfile.lock中指定的宝石的必要版本。(如果你熟悉的话作曲家这听起来应该很熟悉,因为Bundler是Composer的巨大灵感来源。)然后,我们可以通过添加来开始我们正常的指南针命令包执行在他们面前,它会确保你已经正确安装了所有东西,然后它开始观察sass文件夹,并编译到CSS文件夹。

Bundle exec罗经表

“萨斯”文件夹中

我们的Sass文件夹结构依赖于单一但简单的风格。Scss,包括很多东西。

在上面,我们包括任何罗盘进口,然后是任何外部供应商进口,即形式化超对称性理论.超对称性理论结合断点我们可以快速构建有意义的响应式布局。

我们用克里斯·埃普斯坦的sass globbing插件用一行代码导入一个完整的partial文件夹。

@ import”文件夹/ *”;

这样,我们就可以让项目有机地扩展文件夹。通常我们会得到这样的文件夹:

  • 节点
  • 的观点
  • 段落
  • misc(或“组件”)
  • 地区

就在我写这篇文章的时候,我们正在讨论如何更好地标准化这个列表。

配置

最后要检查的是配置。rb文件。这是一个标准的sass/compass文件,你需要,但我想特别注意最后一行,我们提到sourcemap = true

这个小魔术给你的Chrome检查器(或其他开发工具的选择)的能力,以识别哪一行的sass部分-不是编译的css-样式来自,所以你知道正确的地方去改变他们。

平整了

我们前端堆栈的最后一部分是Browsersync,我们将在以后的文章中讨论!

Baidu