The following code places my sidebar-first one column off the left of the screen.
.has-sidebar-first {
.l-content {
#include span-columns(15 omega, 16); // Span 15 out of 16 columns.
#include push(1, 16); // Push element by adding 1 out of 16 columns of left margin.
}
.l-region--sidebar-first {
#include span-columns(1, 16); // Span 1 out of 16 columns.
#include pull(1, 16); // Pull element by adding 15 out of 16 columns of negative left margin.
}
}
The sidebar-first should take up the first column and content should take up the next 15.
I have had pull set 1 through to 16 but it is either out of place or disappears entirely.
Any suggestion?
Update1: Here is the full scss layout(including the suggestion from Eric Meyer (the man himself!) places the sidebar-first further off page to the left. It appears to be offpage by the same width as the l-content .
#import "susy";
// Susy Variables
// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 20px;
$horz-spacing-unit: 1em;
// Define Susy grid variables mobile first.
$total-columns: 4;
$column-width: 4em;
$gutter-width: $horz-spacing-unit;
$grid-padding: 5px;
$container-style: magic;
$container-width: 1200px;
// Susy Media Layouts #see http://susy.oddbird.net/guides/reference/#ref-media-layouts
$tab: 44em 12; // At 44em use 12 columns.
$desk: 70em 16; // At 70em use 16 columns.
.l-header,
.l-main,
.l-footer {
#include container; // Define these elements as the grid containers.
margin-bottom: $vert-spacing-unit;
}
.l-region--highlighted,
.l-region--help,
.l-region--sidebar-first,
.l-region--sidebar-second {
margin-bottom: $vert-spacing-unit;
}
#include at-breakpoint($tab) { // At a given Susy Media Layout, use a given amount of columns.
.l-header,
.l-main,
.l-footer {
#include set-container-width; // Reset only the container width (elements have already been declared as containers).
}
.l-branding {
#include span-columns(4, 12); // Span 4 out of 12 columns.
}
.l-region--header{
#include span-columns(8 omega, 12); // Span the last (omega) 8 columns of 12.
}
.l-region--navigation {
clear: both;
}
.has-sidebar-first,
.has-sidebar-second,
.has-two-sidebars {
.l-content {
#include span-columns(7, 12); // Span 7 out of 12 columns.
#include push(1, 12); // Push element by adding 1 out of 12 columns of left margin.
}
.l-region--sidebar-first, {
#include span-columns(1, 12); // Span the 1 columns of 12.
}
.l-region--sidebar-second {
#include span-columns(4 omega, 12); // Span the last (omega) 4 columns of 12.
}
.l-region--sidebar-first {
#include pull(8, 12); // Pull element by adding 8 out of 12 columns of negative left margin.
}
.l-region--sidebar-second {
clear: right;
}
}
}
#include at-breakpoint($desk) {
.l-header,
.l-main,
.l-footer {
#include set-container-width; // Reset only the container width (elements have already been declared as containers).
}
.l-branding {
#include span-columns(6, 16); // Span 6 out of 16 columns.
}
.l-region--header{
#include span-columns(10 omega, 16); // Span the last (omega) 10 columns of 16.
}
.has-sidebar-first {
.l-content {
#include span-columns(15 omega, 16); // Span 15 out of 16 columns.
}
.l-region--sidebar-first {
#include span-columns(1, 16); // Span 1 out of 16 columns.
}
}
.has-sidebar-second {
.l-content {
#include span-columns(12, 16); // Span 12 out of 16 columns.
}
.l-region--sidebar-second {
#include span-columns(4 omega, 16); // Span the last (omega) 4 columns of 16.
clear: none;
}
}
.has-two-sidebars {
.l-content {
#include span-columns(10, 16); // Span 10 out of 16 columns.
#include push(1, 16); // Push element by adding 1 out of 16 columns of left margin.
}
.l-region--sidebar-first {
#include span-columns(1, 16); // Span 1 out of 16 columns.
}
.l-region--sidebar-second {
#include span-columns(5, 16); // Span 5 out of 16 columns.
}
.l-region--sidebar-first {
#include pull(11, 16); // Pull element by adding 11 out of 16 columns of negative left margin.
}
.l-region--sidebar-second {
#include omega; // This element spans the last (omega) column.
clear: none;
}
}
}
.has-two-sidebars is working as desired. I am only hoping to fix .has-sidebar-first when #include at-breakpoint($desk) . If there is something inherently wrong with how it is set up then I will have to change the lot but I am hoping to simply change the the layout when viewed on a desktop where the is no sidebar second.
Thanks
Update 2
Following the suggestion to add margin-left: 0; here is it added.
.has-sidebar-first {
.l-content {
#include span-columns(15 omega, 16); // Span 15 out of 16 columns.
}
.l-region--sidebar-first {
#include span-columns(1, 16); // Span 1 out of 16 columns.
margin-left: 0;
}
}
While this now aligns the 'side-first' to the correct column, it appears below the content, as per the picture:
The rest of the code is the same. The two sidebar option still displays correctly.
Any suggestions?
Solution:
As per Eric's suggestion I needed to clear and previously declared push and pulls. So the correct code is:
.has-sidebar-first {
.l-content {
#include span-columns(15 omega, 16); // Span 15 out of 16 columns.
margin-left: 0;
}
.l-region--sidebar-first {
#include span-columns(1, 16); // Span 1 out of 16 columns.
margin-left: 0;
}
Thanks
Get rid of both the push and the pull. Neither one is needed. Your omega item is floated right, and the other item is floated left, so both will fall perfectly into place without needing any push/pull help.
update:
You have a pull set on .l-region--sidebar-first at one of the smaller breakpoints, which is still being applied at the larger breakpoint. You just need to set margin-left to 0 at the $desk breakpoint.
Related
What are the differences between Array and Slice in Carbon? I find a document from the official repo. However, it is uncompleted currently.
The following are example codes from the Carbon official repo.
// Carbon:
package Geometry api;
import Math;
class Circle {
var r: f32;
}
fn PrintTotalArea(circles: Slice(Circle)) {
var area: f32 = 0;
for (c: Circle in circles) {
area += Math.Pi * c.r * c.r;
}
Print("Total area: {0}", area);
}
fn Main() -> i32 {
// A dynamically sized array, like `std::vector`.
var circles: Array(Circle) = ({.r = 1.0}, {.r = 2.0});
// Implicitly constructs `Slice` from `Array`.
PrintTotalArea(circles);
return 0;
}
I guess that the Slice is something like std::span, since the C++ version of the codes above uses std::span when the Carbon version uses Slice. Am I correct?
// C++:
#include <math.h>
#include <iostream>
#include <span>
#include <vector>
struct Circle {
float r;
};
void PrintTotalArea(std::span<Circle> circles) {
float area = 0;
for (const Circle& c : circles) {
area += M_PI * c.r * c.r;
}
std::cout << "Total area: " << area << "\n";
}
auto main(int argc, char** argv) -> int {
std::vector<Circle> circles = {{1.0}, {2.0}};
// Implicitly constructors `span` from `vector`.
PrintTotalArea(circles);
return 0;
}
Currently, a first version Arrays exist, while continuing to being worked on, and the Slice type is basically not defined, so it is a bit early to give you a real answer.
As you guessed, it seems like slices might eventually have similarities with std::span, based on some design discussions, but nothing has been approved yet.
You can check the open design proposals on GitHub directly.
I have 3 files in my project, main.cpp, Globals.h & Globals.cpp:
main.cpp
#include "Globals.h"
int main()
{
if (setup())return 1;//If setup fails terminate the program
CenterOrigin(playerSprite);
while (window.isOpen())
{
deltaTime = deltaClock.restart().asSeconds();
while (window.pollEvent(ev))
{
if (ev.type == sf::Event::Closed)window.close();
}
float rotSpeed = 5;
window.clear(sf::Color(12, 14, 12, 0.9 * 255));
window.display();
}
return 0;
}
Globals.h
#pragma once
#include <iostream>
#include <SFML/Graphics.hpp>
#include <SFML/Window.hpp>
#include <SFML/System.hpp>
#define TITLE "Belty McBelth"
#define WIDTH 1280
#define HEIGHT 720
sf::RenderWindow window;
sf::Font font;
sf::Event ev;
sf::Texture playerTex;
sf::Sprite playerSprite;
sf::Texture tieTex;
sf::Sprite tieSprite;
sf::Clock deltaClock;
float deltaTime; //Time since last frame in seconds
int setup();
void CenterOrigin(sf::Sprite & t);
Globals.cpp
#include "Globals.h"
int setup()
{
window.create(sf::VideoMode(WIDTH, HEIGHT), "Belty McBelth", sf::Style::Close);
if (!font.loadFromFile("../comic.ttf"))return 1;
if (!playerTex.loadFromFile("../PLAYER.png"))return 1;
playerSprite = sf::Sprite(playerTex);
std::cout << "Setup completed without errors \n";
return 0;
}
void CenterOrigin(sf::Sprite & t)
{
sf::FloatRect d = t.getLocalBounds();
t.setOrigin(d.width / 2, d.height / 2);
}
Whenever I try to build this project, I get a plethora of LNK2005 errors, one for each variable that is declared in the globals header file. I have searched for a solution to this problem, however I am not able to find one. I have ensured that there are no definitions in the globals.h file, however, I am still unable to build the project.
This problem solves itself if I move all the definitions into the .h file, however, through the microsoft page for the lnk2005 error, I have found that this is only because there is only one file that includes the globals header file.
Sidenote, is there any better way of handling global variables/functions? Extern is an option, but it gets too cumbersome when you have a lot of global variables.
I made a program using C++ and SFML. The program is supposed to generate 20 circles that are either red or blue, and it did work. Yet, I made a few changes, saved, and came back to it on VS a few hours later to find that I keep getting an error:
'{': No matching token found (Line 9)
I keep scanning through the code and I can't seem to find the issue at all.
Code:
#include <SFML/Graphics.hpp>
#include <iostream>
#include <chrono>
#include <random>
using namespace std;
int main()
{ //Line 9
unsigned seed = chrono::system_clock::now().time_since_epoch().count();
default_random_engine generator(seed);
uniform_int_distribution<int> distribution1(0, 1024);
uniform_int_distribution<int> distribution2(1, 2);
sf::RenderWindow window(sf::VideoMode(1024, 1024), "Spooky Circle Box");
sf::CircleShape shape(100.f);
shape.setFillColor(sf::Color::Red);
shape.setPosition(10, 10);
std::vector<sf::CircleShape> circles(20);
window.clear();
for (unsigned int i = 0; i < circles.size(); i++) {
int find = 0;
int find_color = 0;
while (find != 20) {
circles[i].setPosition(distribution1(generator), distribution1(generator));
for (unsigned int j = 0; j < circles.size(); j++) {
if (i == j || (circles[i].getPosition().x != circles[j].getPosition().x || circles[i].getPosition().y != circles[j].getPosition().y)) {
find++;
} else;
if (find != 20) {
find = 0;
} else;
}
find = 0;
find_color = distribution2(generator);
circles[i].setRadius(5.f);
if (find_color == 1) {
circles[i].setFillColor(sf::Color::Blue);
} else { circles[i].setFillColor(sf::Color::Red); }
window.draw(circles[i]);
}
window.display();
while (window.isOpen()) {
sf::sleep((sf::milliseconds(100)));
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();
}
}
return 0;
}
I explain further my comments, but I'm not going to post any repaired code. I only suggest a way of doing things.
By the structure of you're code, it seems you're trying to generate some blue or red circles randomly distributed over the window, but, at the same time, you're trying to draw them.
You should differentiate your actual data from your drawing stuff. My suggested pseudo-code would be.
int main(){int main(){
// 1 . Declare your circle vector
// 2 . Populate that vector with random circles (random position, random color)
// Now draw those circles
// 3 . while(window.isOpen()) loop
// 3.1 Clear the window
// 3.2 Draw your circles
// 3.3 Display the stuff
}
That point 3 it's basically the way to draw stuff acording SFML tutorials.
I'm starting using Susy and there's something I'd like to accomplish but I don't know how, although I'm reading Susy's documentation and online tutorials.
I have this html:
<div class="page">
<nav>nav</nav>
<div class="main">
<div class="summary">
summary
</div>
<div class="content">
content
</div>
</div>
<footer>footer</footer>
</div>
and these Susy settings:
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$show-grid-backgrounds: true;
#include border-box-sizing;
// breakpoint variables
$M: 30em;
$L: 50em;
and this scss:
.page {
#include container;
#include susy-grid-background;
nav {
#include at-breakpoint($M) {
#include span-columns(2,12);
}
}
.main {
#include at-breakpoint($M) {
#include span-columns(10 omega,12);
}
.summary {
#include at-breakpoint($L) {
#include span-columns(2 omega,10);
}
}
.content {
#include at-breakpoint($L) {
#include span-columns(8,10);
}
}
}
footer {clear: both;}
That works as expected, the content is totally fluid with a max-width. However, I would like the same behaviour but starting with a 4 column layout and then changing to 8 columns and then 12 columns.
I do it like this:
$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$show-grid-backgrounds: true;
#include border-box-sizing;
// breakpoint variables
$M: 30em;
$L: 50em;
and the scss:
.page {
#include container;
#include susy-grid-background;
// Now create a media-query breakpoint at the min-width of 30em and use a larger grid and modify the layout
#include at-breakpoint($M 8) {
// This will create a new container with a total of 8 columns
#include container;
#include susy-grid-background;
// Now modify the inner elements to their new home
nav { #include span-columns(2,8); }
.main { #include span-columns(6 omega,8); }
}
#include at-breakpoint($L 12) {
// This will create a new container with a total of 12 columns
#include container;
#include susy-grid-background;
// Now modify the inner elements to their new home
nav { #include span-columns(2,12); }
.main {
#include span-columns(10 omega,12);
.content {
#include span-columns(8,10);
}
.summary {
#include span-columns(2 omega,10);
}
}
}
footer {clear: both;}
}
This also works ok, but I can't make all the layouts liquid as in the first example. For example, at 450px wide the 4 column layout doesn't fill the viewport. The same happens at 768px, the 8 columns don't fill the viewport. I'd like the layout to always fill the available width, as in the first example, as well as change columns according to defined breakpoints.
Is that the normal Susy behaviour or is it possible to do it in another way?
Excuse me if this is a newbie question, but I'm just at the beginning and I'd like to make things clear before using Susy on real projects.
Thanks.
Here is how I handle responsive grids, maybe it will help you.
I have a few variables I define for each breakpoint (which I like to name by the number of columns) for instance:
// 6 Columns -------------------------------------------------------------------
$six-gut-width : .5rem;
$six-padding : 0;
$six-width : 6 * $column-width + 5 * $six-gut-width + $six-padding * 2;
// 8 Columns -------------------------------------------------------------------
$eight-width : 8 * $column-width + 7 * $gutter-width + $grid-padding * 2;
This way I have both the actual width and number of columns to use in my at-breakpoint calls.
Then my breakpoints break down like this:
#include at-breakpoint($six-width 6 $eight-width) {
// Breakpoint specific scss
.page { set-container-width(6); }
}
I like to keep the breakpoint specific stuff in it's own partial in a breakpoints directory (but you don't have to) i.e: breakpoints/_6-cols.scss, breakpoints/_8-cols.scss etc.
If you want to cascade to a larger breakpoint then leave off the third parameter on at-breakpoint(), or set it to something higher than the next level. Also be sure you're setting set-container-width instead of container in your breakpoint declarations. Check out set-container-width on Susy docs
Hope this helps you. Best of luck.
I'm trying to figure out how to use a different grid setting based on a breakpoint but can't get it to work. Here's my code. I'm using the respond-to mixin for media queries.
$breakpoints: 'screenSmall' 480px 768px,
'screenMedium' 768px 1279px,
'screenXlarge' 1441px;
$total-columns: 4;
$column-width: 5em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
[role="main"] {
#include container($total-columns);
background: #aaa;
#include susy-grid-background;
}
#include respond-to('screenSmall')
#include with-grid-settings(8,4em,1.5em,1em) {
[role="main"] { #include container; }
};
}
#include respond-to('screenMedium')
#include with-grid-settings(12,4em,1.5em,1em) {
[role="main"] { #include container; }
};
}
What exactly isn't working about it? Is there no change at all for the different breakpoints, or simply no change to the background grid image? I'm guessing the latter. If you want the background to respond to new settings, you will need to re-declare the background with those settings:
#include respond-to('screenSmall')
#include with-grid-settings(8,4em,1.5em,1em) {
[role="main"] {
#include container;
#include susy-grid-background;
}
};
}
#include respond-to('screenMedium')
#include with-grid-settings(12,4em,1.5em,1em) {
[role="main"] {
#include container;
#include susy-grid-background;
}
};
}
Of course, I think you could do it more easily with at-breakpoint rather than respond-to. But that's a different question. :)