问题标签 [yui-pure-css]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 为什么我的 2 列纯 CSS 布局不起作用?
我正在尝试创建一个简单的Meteor Web 应用程序,但我已经在努力生成一个通过Pure responsive grid定义的工作 2 列布局。下面的屏幕截图演示了该问题;标题应该是一行的两列,而不是两列(行),并且“侧边栏内容”应该在“Ace Editor Demo”左侧的列中:
您也可以访问我的应用程序的实时版本来亲自查看问题。此外,我已经在github上发布了该项目。
如果有人能指出为什么我预期的 2 列布局没有按预期工作,我会非常高兴。我已经使用 Chromium 28.0.1500.71 和 Firefox 23.0 进行了测试。
代码
造型
这是应用程序的样式表(用Stylus编写):
HTML
应用程序的 HTML,一个 Angular 模板 (angular.html) 和一个部分 (partials/home.html);您可能会注意到根 div 定义了一个纯响应式网格(类pure-g-r
),列是通过类pure-u-1-5
(左列)和pure-u-4-5
(右列)定义的:
角.html
部分/home.html
html - 响应式网格是什么以及如何实现它
我刚刚在跨浏览器测试工具中测试了我的几个网页,发现对于较低的分辨率,我的所有 div 都不是单独出现的。
在谷歌搜索后,我发现了响应式网格。
读完之后,我想问一下,响应式网格是否只是让您的网页响应屏幕尺寸的不同变化,或者它还有其他功能吗?
此外,我正在使用 purecss 使我的网页具有响应性,因此我需要知道这是否是正确的方法,或者还有哪些其他方法可以做到这一点。
css - pure-g 和 pure-gr 的区别
我想问一下 pure-g 和 pure-gr 之间有什么区别。我曾经认为响应式会使我的 div 在较低的分辨率下不会崩溃,但使用 pure-g 也帮助我实现了同样的效果,所以我很困惑他们之间的正确区别是什么。
[只是提到我正在使用 Mozilla 的响应式视图进行测试]
也增加了这个疑问,我看到许多博客提到纯类,例如:pure-mobile .. 让您的网站对移动设备、平板电脑等做出响应。但我在他们自己的http://pure.css.io网站上找不到任何描述。
responsive-design - 如何制作在屏幕调整大小时滚动的响应式菜单 div
我正在使用 purecss 来制作响应式网站。在我的页面中,我有一个 HEADER 和 FOOTER;它们都是固定的,在它们之间我有 CONTENT,它有左侧垂直菜单,右侧有一些内容。
现在我想要实现的是,当发生任何调整大小时,我的左侧菜单应该有一个类似自己的滚动条,右侧的内容也应该有一个。此外,菜单 div 不应与页脚或页眉混合。
我不太确定,但我是否需要使用 mobile-webkits 来解决这个问题。
我找到了一些帮助: http: //filamentgroup.github.io/Overthrow/examples/2-column/
这是唯一的方法还是有其他图书馆可以帮助我?
html - 为什么我在 html 表单上的输入字段的样式与 PureCSS 网站的样式不同?
我在我的 html 模板中包含了 pure-css 并制作了一个简单的表单。我认为这个表单看起来和 PureCSS 网站上的一样。
尽管按钮的样式很好,但表单上的输入元素是“原始的”。没有圆角,没有亮点。检查了两个浏览器。
包括来自 Skin Builder 的主题并添加我的 pure-css-theme 类并没有帮助,也没有从纯站点中删除“蓝色主题”。
在纯 CSS 站点源代码中找不到其他任何内容..
为什么输入元素没有样式?
我必须在这里遗漏一些明显的东西..
gruntjs - purecss grunt 任务失败
我将 purecss项目克隆到我的桌面并尝试在其上运行 grunt,因为我看到其中包含一个 gruntfile。
当然,将本地 grunt 保存到项目文件夹以及所有必要的插件。
问题应该出在凉亭上,我不得不承认我从未使用过它,但npm install -g bower
为了以防万一,我在终端运行了一个,但没有改变。
来自 gruntfile.js 的凉亭安装任务:
forms - 使用 purecss.io 框架设计单选按钮组
前几天我偶然发现了 Pure 项目——YUI 团队发布的一组 CSS 模块。我想标准化我网站上的表单,我喜欢他们表单模块的外观。尤其是他们称之为对齐表单的表单样式。我将 CSS 添加到我的站点并将所需的样式添加到我的表单中,除了我的单选按钮组之外,它都运行良好。在对齐表单中,每个输入在左侧都有一个标签,在它的标签右侧有一个输入。但是单个单选按钮具有单独的标签 - 其样式位于按钮的右侧。我正在寻找的是一种为左侧和居中样式的按钮组添加整体标签的方法。
我确实找到了一种解决方法,但我正在寻找一种专用的“纯”方法。
我的解决方法是在字段集中包含收音机,并使用字段集的图例作为收音机组的标签。
我很乐意听取使用 Pure Aligned Forms 的其他人的意见,看看您是如何处理这个问题的。
yui-pure-css - YUI 纯 css 固定宽度
有人可以给我看一个例子,说明我如何使用 purecss.io 来实现固定宽度/响应式设计,类似于 bootstrap 等 960 网格?
流体宽度根本不适用于我的特定设计,这是我目前拥有的:
我需要将上述内容包裹在一个包含 DIV 中,该 DIV 居中并具有 960 的固定宽度,但可根据需要进行响应调整...
有任何想法吗???
问候,亚历克斯
css - PureCSS.io - 纯网格(高度)在 Firefox 中显示不同
我正在使用 PureCSS 的纯网格。我有一个pure-g
with three pure-u-1-3
,包含几段。问题是当其中一个单元比其他单元长时,Chrome/IE 和 Firefox 之间的显示会有所不同。
http://i.stack.imgur.com/VFVYu.png
我尝试使用 jQuery 来计算最高值pure-u-1-3
并将其余的设置为这个高度。但它没有按预期工作,因为这个网格也必须是响应式的(使用pure-g-r
)
有人知道如何让 Firefox 产生相同的输出吗?
html - CSS:为什么在纯 CSS 框架的 html 中需要包含样式标签?
为什么样式标签需要包含在纯 CSS 框架的 HTML 中?文档也有http://purecss.io/buttons/我正在查看“带圆角的彩色按钮:成功按钮”部分
(查看此Codepen - 在左下角单击编辑笔)
请注意,您是否取消注释 html 中的样式标签是否有效?为什么它不能从 css 文件中提取它?