使用现有样式的基础

抓住

我有一个现有的旧版应用程序。现在,我们计划使用Foundation并仅重写每个页面的顶部栏。但是,当我将基础css文件包含到项目中时,由于它是css,它会破坏所有现有布局。我在想的一种方法是修改Foundation.css,以将自定义类附加到所有选择器上:例如:h1 {}变成h1.customclass {}

但是我觉得这可能不起作用,因为Foundation js可能会在内部添加样式。希望能对此有深刻的见解。另外,对于将zurb Foundation与具有现有样式的现有应用程序一起使用的问题,是否有解决方案?

更新:最后碰巧找到了一个可行的解决方案:在基础sass文件中,将include-html-classes设置为false,以不包括所有基础css类。然后,对于您需要它们的组件,可以将其选择性地设置为true,例如:对于表:$ include-html-table-classes:true; 这可以使您不破坏现有样式并有选择地使用基础。而且,mixin可以用于进一步自定义。例如:您可以创建一个自定义按钮基础类,作为基础按钮类的混合,然后在要具有基础样式的按钮上使用自定义类。这不会破坏您现有的按钮。

托马斯·泰勒(Thomas Taylor)

Foundation通常在项目开始时用于快速原型制作,而将其包含在已经成熟的项目中会引起很多麻烦。就个人而言,我将自己编写或找到一个替代的独立组件:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

css:覆盖现有样式之后

来自分类Dev

现有样式也适用于链接

来自分类Dev

如何重命名 CKEditor 中的现有样式?

来自分类Dev

基于现有样式的MahApps设置样式具有奇怪的输出

来自分类Dev

向Mahapps.Metro现有样式添加自定义样式

来自分类Dev

jQuery:将样式属性添加到现有样式

来自分类Dev

将自定义样式添加到Mahapps.Metro现有样式

来自分类Dev

使用带有样式组件的env()CSS变量

来自分类Dev

使用带有样式组件的材料系统的更好方法

来自分类Dev

CSS没有样式<a>

来自分类Dev

WPF-增加现有样式的滚动条宽度

来自分类Dev

WPF-增加现有样式的滚动条宽度

来自分类Dev

将现有样式添加到 OpenXML 中的段落

来自分类Dev

带有样式组件的样式链接

来自分类Dev

jQuery创建的列表没有样式

来自分类Dev

带有样式的特定条形栏

来自分类Dev

需要安全的HTML,具有样式

来自分类Dev

具有样式组件的React的MaterialUI

来自分类Dev

没有样式的React Native按钮

来自分类Dev

Bootstrap CSS中没有样式

来自分类Dev

Bootstrap Dropdown没有样式

来自分类Dev

引导程序没有样式

来自分类Dev

获取所有样式属性颜色

来自分类Dev

jQuery UI DatePicker没有样式

来自分类Dev

解析没有样式信息的XML?

来自分类Dev

Angular 2绑定所有样式

来自分类Dev

boostrap 内联表单没有样式

来自分类Dev

Bootstrap 卡没有样式

来自分类Dev

Angular - 带有样式的 InnerHtml