singularitygs

Why don't my floats in my Singularity grid fill all the columns?

由 喜你入骨 提交于 2020-02-05 08:14:18
问题 Here is the SassMeister. It's a four column sub-layout with floated menu items and i'd like them to fill the columns, but instead they cluster in the first three because the margins are too big. http://sassmeister.com/gist/b45986bb5bcbc464b3aa Any insights into why this might be happening? 回答1: Wow, that's some messy Drupal markup! You should've cleaned it up and post a reduced demo of your problem rather than just copy-pasting all the mess. The float-span mixin sets a right margin for an

How can I create a “gallery” with singularitygs?

由 北城余情 提交于 2020-01-03 02:42:07
问题 I'm trying to create a small gallery in the footer of my site. At the moment, the following Sass does actually work but it doesn't seem very efficient to use the one , two and three classes on each footer_block but I simply can't see another way of doing this. Essentially I have a symmetrical grid nested inside an asymmetrical grid and would like to repeat the same grid-span call for each of the three footer_block items but have failed to figure out how. The Sass looks like: .region--footer {

Layout using Singularity

由 烈酒焚心 提交于 2019-12-21 21:35:31
问题 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

How do you use mobile-first in IE8

由 拥有回忆 提交于 2019-12-17 17:34:48
问题 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. 回答1: 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

Subgrid with floating method and padding

由 廉价感情. 提交于 2019-12-12 06:37:34
问题 How do I get nested grid with Singularity? I've made a simple grid and need nested grids with floating method. My sample: http://sassmeister.com/gist/7326030 回答1: You should understand two things: Singularity applies relative widths to columns. All it does is generating CSS, completely unaware of your HTML structure. So, if you apply a float span to a class, it will get width: 33% , for example. Every element with that class will have width: 33% , regardless of its nesting. This means that

Having to re-declare global context?

由 柔情痞子 提交于 2019-12-12 03:09:23
问题 I'm sure I've missed something obvious... it seems like I'm having to re-declare my context for some elements. I have the following declared in global variables: // General breakpoints $bp1: 500px; $bp2: 700px; $bp3: 900px; $bp4: 1100px; // Grids and gutters $grids: 3; $grids: add-grid(6 at $bp1); $grids: add-grid(12 at $bp3); When I try to position an element within my footer, it won't work unless I declare the optional context variable, eg. footer .block-webform { @include grid-span(8, 5,

compass failing to load singularitygs gem

由 走远了吗. 提交于 2019-12-11 06:09:03
问题 Trying to get a new project set up using Singularity.gs but I keep running into a snag with Compass. First I used Terminal to install the necessary Ruby Gems (sass, compass, singularitygs, respectively). Next I created a new project using the command: compass create project1 -r singularitygs --using singularitygs In the directory of my choosing. At this point, in an effort to make life easier I've also attempted to use offerings like Scout (http://mhs.github.io/scout-app/) and/or Compass.app

Singularity Grid layout with header and footer width 100%

由 微笑、不失礼 提交于 2019-12-08 07:51:07
问题 I am using Singularity Grid System version 1.1.2, my variables for the 12 column grid are $grids: 12, $gutters: 1/3. The grid layout is working fine. Now I want to give the top Headergroup, middle section and the footer background color that covers the full browser width. All the content are centered and spans 90% of the total width. 回答1: Creating full color bleeds is an unfortunately ugly task all around, but it's fairly easy to do. You're going to want to do something like the following:

Singularity Grid layout with header and footer width 100%

由 假装没事ソ 提交于 2019-12-06 17:49:27
I am using Singularity Grid System version 1.1.2, my variables for the 12 column grid are $grids: 12, $gutters: 1/3. The grid layout is working fine. Now I want to give the top Headergroup, middle section and the footer background color that covers the full browser width. All the content are centered and spans 90% of the total width. Creating full color bleeds is an unfortunately ugly task all around, but it's fairly easy to do. You're going to want to do something like the following: <div class="full-stripe header"> <header class="container"></header> </div> <div class="full-stripe main">

How can I create a “gallery” with singularitygs?

由 落花浮王杯 提交于 2019-12-06 16:34:16
I'm trying to create a small gallery in the footer of my site. At the moment, the following Sass does actually work but it doesn't seem very efficient to use the one , two and three classes on each footer_block but I simply can't see another way of doing this. Essentially I have a symmetrical grid nested inside an asymmetrical grid and would like to repeat the same grid-span call for each of the three footer_block items but have failed to figure out how. The Sass looks like: .region--footer { color: $color__background--dark; border: { top: 1px solid $base-ui-color; } font-family: $secondary
订阅 singularitygs