singularitygs

Layout using Singularity

由 折月煮酒 提交于 2019-12-04 15:36:23
I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats. I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister. http://sassmeister.com/gist/a7ca98b7520b12bd6241 My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside. Is there another way to achieve this layout with Singularity, without having to use the surrounding

Singularitygs: Mobile grid persisting all screen sizes

由 喜欢而已 提交于 2019-12-02 06:12:44
问题 For some reason my grid is only showing the mobile (3 column) grid at all screen sizes. I am using the values below and don't understand what I am doing wrong. Any suggestions would be most welcome @include add-grid(3); @include add-grid(6 at 320px); @include add-grid(12 at 740px); @include add-gutter(1/3); I am using the gems below Using sass 3.3.14 Using breakpoint 2.5.0 Using singularitygs 1.2.1 回答1: It is not enough to define grid context. In order for your responsive grids to work, you

Still confused with nested grids

由 ╄→гoц情女王★ 提交于 2019-12-02 02:52:17
问题 I've finally found some time to test Singularity, and im back to a problem I had before for that I cant find an obvious solution. My issue is with nested grids. Let's say i have a simple 12 column grid $grids: add-grid(12 at $break2); And my layout uses a main content area that extends for 9 of those 12 columns: @include breakpoint($break2) { @include grid-span(9, 3); border: 1px solid red; } The, inside that content area, I need to create a section which is divided in three columns, that

Still confused with nested grids

由 只谈情不闲聊 提交于 2019-12-02 01:56:16
I've finally found some time to test Singularity, and im back to a problem I had before for that I cant find an obvious solution. My issue is with nested grids. Let's say i have a simple 12 column grid $grids: add-grid(12 at $break2); And my layout uses a main content area that extends for 9 of those 12 columns: @include breakpoint($break2) { @include grid-span(9, 3); border: 1px solid red; } The, inside that content area, I need to create a section which is divided in three columns, that means each article inside will span 3 columns of the parent container (which is 9 of 9 columns). I've

Singularitygs: Mobile grid persisting all screen sizes

由 不想你离开。 提交于 2019-12-02 00:44:31
For some reason my grid is only showing the mobile (3 column) grid at all screen sizes. I am using the values below and don't understand what I am doing wrong. Any suggestions would be most welcome @include add-grid(3); @include add-grid(6 at 320px); @include add-grid(12 at 740px); @include add-gutter(1/3); I am using the gems below Using sass 3.3.14 Using breakpoint 2.5.0 Using singularitygs 1.2.1 It is not enough to define grid context. In order for your responsive grids to work, you have to explicitly use them, e. g.: @import "breakpoint"; @import "singularitygs"; @include add-grid(3);

How do you use mobile-first in IE8

由 混江龙づ霸主 提交于 2019-11-28 04:11:51
Considering that SingularityGS follows, by default, a mobile-first approach, how do you guys solve the problem in IE8, which shows the mobile version of everything that depends on media-queries? Have you found a solution for this or do I have to switch to desktop-first? Thanks. Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries! I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go! <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1
订阅 singularitygs