In beta 2 of Susy 2, is it possible to set gutter widths in the main grid settings like so:?
$susy: (
flow: ltr,
math: static,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 12,
gutters: .25,
!!!!gutter-override: 20px,!!!!
column-width: 77.5px,
global-box-sizing: border-box,
last-flow: to,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
);
Because it doesn't seem to like it. I need to set explicit widths for columns and gutters for this grid and the container should be determined from those.
In Susy Next, gutters are set as a ratio (.25) to the column-width (77.5px). Given those settings, Susy can determine the gutter-width (77.5px * .25 = 19.375px).
By saying you want static math, .25 gutters, and 77.5px columns, you have already set the gutter width, and the container can already be calculated. If you like, you can use real pixel values to set your gutter ratio:
$susy: (
column-width: 77.5px,
gutters: 20px/77.5px, // same as ".258064516"
);
Gutter-override is not a global setting, and won't help you here. That setting is only for spans, when you want to override the global value. Also, I don't recommend sub-pixel settings. Pixels don't really break down, and fractional pixel declarations aren't handled the same across browsers.
Related
I have created settings.scss, and I have achieved to set button size with this
$typography: ('button': ('size': 14px))
and with this
$button-font-size: 14px,
But what should I do to have font size different for different button sizes?
PS. In Vuetify 2 I have used this
$btn-font-sizes: (
'small': 13px,
'large': 14px,
);
The SASS now uses a relative scaling function for button height, font-size, width-ratio, padding-ratio based off the default button size settings. With this setup you can can achieve a relative scaling of button size related CSS props using settings.$size-scales:
In your settings.scss:
#forward 'vuetify/settings' with (
$size-scales: (
'x-small': -0.7,
'small': -0.2,
'default': 0,
'large': 2,
'x-large': 10
)
);
The advantage to this approach is convenience, and that you can easily add custom sizes like xx-small or whatever. However, if you only want to change font-size and not other properties you have to target each button size in CSS:
.v-btn--size-x-small {
font-size: 8px;
}
Of course, you can use the class names to target any property of buttons and avoid the settings altogether.
I am developing an application on react-native. I have made a UI which works fine on iPhone 6 but not working fine on iPhone 5 or lower versions.
How should I fix this ?
You need to think about proportion when building your UI.
1, Use percentage(%) for width and aspectRatio for height, or vice versa.
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%" of your width
}
2, Use flex for the jobs percentage can't do. For example, if you have arbitrary size of items in a list and you want them to share equal sizes. Assign each of them with flex: 1
3, Use rem from EStyleSheet instead of pixels. rem is a scale fator. For example, if your rem is 2 and your “11rem” will become “11*2” = “22”. If we make rem proportion to the screen sizes, your UI will scale with any screen sizes.
//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});
//how to use rem
container: {
width: "100%",
aspectRatio: 10 / 3, //height will be "30%"
padding: "8rem", //it'll scale depend on the screen sizes.
}
4, Use scrollView for contents that could potentially scale out of the boxes. For example, a TextView
5, Every time you think about using pixels, consider use rem in method 3.
For a detailed explanation, you can read the article here. 7 Tips to Develop React Native UIs For All Screen Sizes
Have you designed the app using fixed widths and heights? You should definitely use the capabilities of flexbox and try to avoid settings fixed sizes as much as possible. The flex property can be used to define how much space a <View /> should use releative to others, and the other properties on that page can be used to lay out elements in a flexible way that should give the desired results on a range of different screen sizes.
Sometimes, you may also need a <ScrollView />.
When you do need fixed sizes, you could use Dimensions.get('window').
You need to calculate sizes dynamically, relying on screen size.
import { Dimensions, StyleSheet } from 'react-native'
[...]
const { width, height } = Dimensions.get('window')
[...]
const styles = StyleSheet.create({
container: {
flex: 1.
flexDirection: 'column',
},
myView: {
width: width * 0.8, // 80% of screen's width
height: height * 0.2 // 20% of screen's height
}
})
If you are using TabbarIOS, remember that Dimensions.get('window') gives you the whole screen's height, this means that you'll have to take in account that the tabbar has fixed-height of 56.
So for example, when using TabbarIOS:
const WIDTH = Dimensions.get('window').width,
HEIGHT = Dimensions.get('window').height - 56
Then use WIDTH and HEIGHT as above.
On reading the documentation Susy takes its gutter width as a percentage of the column width.
I have a container that has a width of 768px
I have 3 columns
I want each gutter to be 5% of 768px which is 38.4px
I am using a gutter-position of split
Doing the following fives me a gutter width of 3.33333%:
+with-layout(3 38.4px)
.three-col
+span(3 of 3)
But doing this gives me the correct gutter width of 5%:
+with-layout(3 0.428572)
.three-col
+span(3 of 3)
I found this number out by trial and error and cannot seem to work out the work out the formula.
I assume there is a relationship between the following:
Number of columns: 3
Number of gutters: 6
Desired percentage gutter of container: 5%
Number I need to supply Susy to get my desired gutter percentage (of container): 0.428572
How do I get I set Susy gutter widths based on a percentage of my container width?
I made a function in Sass that converts a percentage of a container to a gutter value that is usable by Susy. I am assuming a split gutter here, so there is half a gutter on each side of a column.
Maybe this will help someone else!
//Convert a percentage of the container to a susy gutter width
//This function assumes a split gutter position
#function calculate-susy-gutter($containerWidth, $numCols, $percentage-of-container: 0.05)
//get the number of gutters
$numGutters: $numCols * 2
//work out the target gutter width based on the container
$singleGutterWidth: $containerWidth * $percentage-of-container
//work out the width of all the gutters
$totalGutterWidth: $singleGutterWidth * $numGutters
//work out the width of all the columns
$totalColumnWidth: $containerWidth - $totalGutterWidth
//work out the width of one column
$singleColumnWidth: $totalColumnWidth/$numCols
//work out the percentage that single gutter is of a column
$gutterPercentageOfColumn: $singleGutterWidth/$singleColumnWidth
//multiply the value by two
//Using the split gutter position Susy sees the gutter on each side as half a gutter
//so we need to double it
//Therefore the original percentage of the container accounted for one half gutter
#return $gutterPercentageOfColumn * 2
Please look at this gist:
http://sassmeister.com/gist/6d575ec85663865fa567
There you can see a placehold.it thumbnail grid realized via float-span
What i need now is:
The padding-left of the first .item in each row should be 0
The padding-right of the last .item in each row should be 0
this would then end up in the thumbnail grid perfectly aligning with the rest of the content (e.g. the lorem ipsum text)
What is the beast way to achieve this with singularitygs?
UPD 2014-07-21
what i need can be seen in this screen:
i don't need another padding style, i need the padding from the first and last item in each row removed. this can't be done via css, because the sass calculations would be wrong.
UPD 2014-07-30
based on various sources, i managed to establish this mixin:
#mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){
#include layout($layout, $gutter: $thegutter) {
#for $i from 1 through $cols {
#if $i == 1 {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, left);
}
}
#else if $i < $cols {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, none);
}
}
#else {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, right);
}
}
}
}
}
which can be called e.g. via:
$layout: 1 1 1;
#include thegrid($layout, 3, $el: ".item");
an example can be seen here: http://sassmeister.com/gist/7a45960747ad3d4bbf56
Not sure what you mean.
You're applying gutters with an absolute value. This is what Singularity calls fixed gutters.
Singularity realizes fixed gutters by applying padding to grid elements.
Padding can be applied in two styles:
split: the gutter size is divided by two and the resulting value is applied as left and right padding to every grid item.
opposite: the value of gutter size is applied as right padding to every item except items occupying the last column.
So if you are unhappy with split gutters, switch to opposite gutters. That's the default behavior, so you can simply comment out #include add-gutter-style('split');.
If you are unhappy with either gutter style, well, you can manually remove padding that you don't need. This doesn't make a lot of sense because if you apply zero padding to items other than occupying the first and the last columns, you will distort your grid. And if you apply them only to the items occupying the first and the last columns, you basically get the same setup as with opposite gutter styles.
You might get better help if you make a pencil drawing of desired layout.
UPD 2014-07-21
OK, now it's clear what you mean.
So you basically want split gutters for the outer level and opposite gutters for the inner level. You're already using the layout() mixin required to override grid settings, so you could just tell it to override gutter styles, e. g.:
#mixin layout(2, $gutter-style: 'opposite') {
Unfortunately, due to the fact that Singularity creates fixed gutters via padding, they only play nice in split mode. In opposite mode fixed gutters produce uneven columns.
So you'll have to use relative gutters:
#mixin layout(2, 0.1, $gutter-style: 'opposite') {
There are a couple of things you have to keep in mind:
Spanning the last item in each row separately.
With the opposite gutter style, the last item in each row is special: it contains no right gutter. So you will have to tell Singularity which item is the last one in row.
To do this, we will use the :nth-child(Xn + Y) selector, where X is the number of items in the row and Y is the number of target item in the row. As we're targeting the last item, X and Y will be equal:
#include float-span(1);
&:nth-child(4n + 4) {
#include float-span(1, last);
}
Isolating media queries.
Once you do that for each breakpoint, you'll end up with styles applied to different items in different breakpoints. Those styles will not be overridden and thus will leak from smaller to larger breakpoints, breaking the layout.
You could override them manually, but that's a lot of thankless job. Instead, isolate your media queries so that styles don't leak:
$beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint: 800px;
// Mobile view (formerly without a media query)
#include breakpoint($beforeMediumBreakpoint) {
Demo: http://sassmeister.com/gist/dd9f1af025900d7e63db
PS A piece of advice from me: don't use fixed gutters and split mode. Use fluid gutters and the default opposite mode. This will save you from a lot of trouble! You can always simulate split gutters by applying padding to the outermost container.
You can do some math to calculate relative padding for the container that will be equal to the gutter between grid items! With the magic of math, you can even apply bottom margins to grid items equal to grid gutters, producing a beautiful uniform thumbnail grid.
I've created a nifty extension Singularity Quick Spanner that can reduce the amount of work you need to do to set up thumbnail grids. See it in action (note vertical gutters equal to horizontal gutters).
Here I try to render a cube/plane geometry using THREE.ShaderMaterial with THREE.ShaderLib['lambert'], it loaded perfectly, but I am struggling to change each face color with opacity value.
As of Three.js 0.127 you can simply use vertexColors, and it supports alpha (opacity) values.
On your material, set
material.vertexColors = true
On your geometry make sure you set the itemSize to include alpha,
geometry.attributes.color.itemSize === 4
then provide 4 values (RGBA) for each vertex instead of 3 (RGB).
Docs:
Material.vertexColors
ShaderMaterial.vertexColors
Example usage:
webgl_geometry_colors
Note, the example uses itemSize 3, without opacity. Make sure you use itemSize 4, and for every value provide 4 numbers instead of 3.