Use different Susy config at different breakpoints - responsive-design

I'm trying to use two different Susy grid global configs for two breakpoints in my layout design: tablet and desktop.
This is my _variables.scss code:
// Susy Sass Grid System Config
$susy: (
columns: 12,
column-width: 45px,
global-box-sizing: border-box,
gutters: 18px / 45px,
gutter-position: inside,
math: static,
output: float,
);
$susy-desktop: (
columns: 12,
column-width: 67px,
global-box-sizing: border-box,
gutters: 30px / 67px,
gutter-position: inside,
math: static,
output: float,
);
#include susy-breakpoint(1200px, $susy-desktop, false);
How can I achieve to get the $susy-desktop config when hit a width of 1200px. The mixin appears not to work. The normal config $susy is working properly.
If needs any more information please tell me and thanks a ton for your time! ;)

The susy-breakpoint mixin is a wrapper that expects contents. It will add a media-query, and change settings for everything passed into it:
#include susy-breakpoint(1200px, $susy-desktop, false) {
/* This code will use the $susy-desktop settings at 1200px */
#include span(3);
}
Using susy-breakpoint without passing in content will have no effect.

Related

Reactjs require image url in variable is not working

Strange problem
I'm dynamically including the path to an image in the source directory.
Putting the image directory in as a string works Fine (the part I commented out), but as soon as I put it in a variable it gives me the error " Cannot find module ".""
var imageDir="assets/img/MyImage.png";
--Working // const imageData= require('assets/img/MyImage.png');
--Not Working const imageData= require(imageDir);
Any one know why?
Same-ish problem Here
No answer unfortunately
Webpack needs to know what files to bundle at compile time, but expression only be given value in runtime, you need require.context:
/* If structure like:
src -
|
-- index.js (where these code deploy)
|
-- assets -
|
--img
*/
let assetsPath = require.context('./assets/img', false, /\.(png|jpe?g|svg)$/);
// See where is the image after bundling.
// console.log(assetsPath('./MyImage.png'));
// In fact you could put all the images you want in './assets/img', and access it by index: './otherImg.jpg'
var newelement = {
"id": doc.id,
"background": assetsPath('./MyImage.png');
};
If you wish use image on your react web application you can use next code
when use directly in html tag, but if you can use in part of java script, you must use const image = require('../Assets/image/03.jpg') and call letter this constant like this {image} between example tags

NPM / Webpack don't load GSAP TimelineLite Correctly

I am refactoring and running cleanup on a production app, and optimizing dependencies.
We have a React component that uses GSAP for some transition-related stuff, but only the TimelineLite library. It's all simple stuff, without any eases or anything, so we have no need for any of the more complex GSAP items and can now scrub them out to optimize.
Originally, we just imported the whole GSAP library via NPM like so:
import 'gsap';
Per the GSAP npm docs (https://www.npmjs.com/package/gsap) ...
The default (main) file is TweenMax which also includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and all of the eases
Now, I'd like to trim the fat off our import, and switched to:
import { TimelineLite } from 'gsap';
However, this is compiling correctly but throwing the following client-side error:
Uncaught TypeError: _gsap.TimelineLite is not a constructor
Does anyone know why this is? Our weight savings from importing TimelineLite alone aren't huge, but they are worth doing. Do I need to import other parts of the GSAP libraries specifically?
NOTES:
I have also tried import { TweenLite, TimelineLite } from 'gsap'; with no luck. Strangely, import { TweenMax, TimelineLite } from 'gsap'; does not work either, but import { TweenMax } from 'gsap'; does.
Here is the animation we are using, super basic:
new TimelineLite()
.to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 })
.fromTo('#urlCopyMessage', 0.35,
{ opacity: 0, y: 20 },
{ opacity: 1, y: -30 }
)
.to('#urlCopyMessage', 0.35,
{ opacity: 0, delay: 0.25 }
)
.to('#urlCopyMessage', 0, { visibility: 'hidden' });
After playing around with the setup and talking with some of the GSAP maintainers, I managed to get things working.
Turns out TimelineLite is dependent on a number of GSAP's other internal packages, like TweenLite and CSSPlugin - and you have to load them independently, too, and in the right order.
I found that the easiest way to import TimelineLite, alone, with its basic dependencies, is directly via the GSAP npm folder structure:
import TimelineLite from 'gsap/TimelineLite';
This works as expected and provides a 74KB weight saving over the TweenMax library as a whole. (Haha)

Django Compressor with dynamic LESS file raises a FilterError(err)

I had to come up with quite a complicated setup to enable database based styling options for users. Users enter styles (like background color, font face, etc...) in the django admin backend.
I am creating a dynamic LESS file by rendering a template view as plain text view like so:
views.py:
class PlainTextView(TemplateView):
"""
Write customized settings into a special less file to overwrite the standard styling
"""
template_name = 'custom_stylesheet.txt'
def get_context_data(self, **kwargs):
context = super(PlainTextView, self).get_context_data(**kwargs)
try:
#get the newest PlatformCustomizations dataset which is also activated
platform_customizations = PlatformCustomizations.objects.filter(apply_customizations=True).order_by('-updated_at')[0]
except IndexError:
platform_customizations = ''
context.update({
'platform_customizations': platform_customizations,
})
return context
def render_to_response(self, context):
return super(PlainTextView, self).render_to_response(context, content_type='plain/text')
The template custom_stylesheet.txt looks kind of like this. It takes the database styling entries the users entered in the admin backend:
#CIBaseColor: {{ dynamic_styles.ci_base_color }};
#CIBaseFont: {{ dynamic_styles.ci_base_font }};
...etc...
Now I include this dynamic less files in my main.less file with other normal static LESS files. Like so:
main.less:
#import "bootstrap_variables.less";
//this is the dynamicly created custom stylesheet out of the dynamic_styles app
#import url(http://127.0.0.1:8000/dynamic_styles/custom_stylesheet.less);
//Other styles
#import "my_styles.less";
This setup works fine. The dynamic variables out of my database get rendered into the template and LESS compiles all my less files together.
I have a problem when pushing the code to my production setup where I compile the LESS server side and compress it with django-compressor.
I get the following error:
FilterError: [31mFileError: 'http://127.0.0.1:8000/dynamic_styles/custom_stylesheet.less' wasn't found.
[39m[31m in [39m/home/application/***/media/static-collected/styles/less/main.less[90m:13:0[39m
[90m12 //this is the dynamicly created custom stylesheet out of the dynamic_styles app[39m
13 [7m[31m[1m#[22mimport url(http://127.0.0.1:8000/dynamic_styles/custom_stylesheet.less);[39m[27m
[90m14 [39m[0m
Has anybody ever experienced problems with django compressor like that? Does it have problems with dynamically created files like this? Could the absolute url be a problem?
Could you think of another solution get dynamically generated less files working with django compressor?
I guess Django-Compressor can't read dynamically created less files which are only available "on-the-fly" if you hit the url. At least I did not get it working. Also the file needs to be on the COMPRESS_ROOT.
Now I write the less file to disk physically every time the model gets saved. Here's the code. It still needs some improvement like try except, etc. But it works:
def save(self, *args, **kwargs):
#todo add try except
less_file = open(os.path.join(settings.PROJECT_ROOT, 'media', 'static', "styles", "less", "custom_stylesheet.less"), "w")
less_file.write(render_to_string('template/custom_stylesheet.txt', {'platform_customizations': self}))
less_file.close()
super(PlatformCustomizations, self).save(*args, **kwargs)

Node app variables passed into stylus file

I am building a little node app and using Express with Jade and Stylus to render some basic HTMl pages.
I was curious if there is a way for me to pass some variables INTO the .styl file that are generated from Node? I am well aware that i can define variables inside of the .styl file but I have a need to be more dynamic. Specifically i was looking for an easy way to store some colors in the db, have node grab those values, then insert those into the .styl file so that when the page is rendered these variables are passed in. It seems like this should be do-able but i am lacking on the details. Any help is appreciated. Thanks!
Thanks to #ebohlman as his advice was close to what i ultimately implemented.
basically i was trying to figure out how to do this on top of the Connect Middleware and here is what i came up with:
when doing app.configure i used the custom compile compile function (key 'compile') like so:
app.use(require('stylus')
.middleware({
src: app.root + '/app/public',
compile: compile
})
);
then i created a couple of functions:
var stylus = require('stylus');
var mylib = function(style){
style.define('themeColor1', function(){
//call to the db that returns a color
color = 'blue';
color = color ? color : 'orange';
return new stylus.nodes.Literal(color);
});
};
var compile = function(str, path) {
return stylus(str)
.use(mylib);
};
then inside of the .styl file i do:
background-color themeColor1();
the ternary operator in the themeColor1 function allows for easy defaults and an override. It took me a bit to figure out the API based upon the examples but it seems like this COULD be a solution others would want to know how to do. If anyone has any downfalls of this approach please let me know.
You can use the Stylus API's define() function to set Stylus variables and make JS functions available to it.

Building a User Script for Chrome using ClojureScript, how can I get the UserScript comment block to exist in compiled output?

I'm trying to create a UserScript in Chrome using ClojureScript. The issue I am having is that the <name>.user.js file needs a comment block at the top that declares attributes about the UserScript.
It looks something like this:
// ==UserScript==
// #name CLJS Hello World
// #namespace http://something.com/my_cljs_user_script
// #author spoon16
// #include *
// ==/UserScript==
How can I include this block in the compiled JS file?
I think your best best would be to use two separate files -- one being the UserScript template that remains as a javascript file and the other the actual ClojureScript which gets compiled. Just include the function that executes the desired ClojureScript.
(ongoing discussion here)
add a foreign-libs marker to your cljsbuild build spec (in case you are using cljsbuild), here's what I added:
:foreign-libs [{:file "comment-block.js" :provides ["comment.block"]}]
add that foreign "lib". Here's what mine contains:
/**
* #fileoverview
* This file contains nothing but a comment block which is to be preserved
* by the google closure compiler. This comment block contains a comment
* block which is necessary to be in the output of the compiled javascript
* even in advanced compilation mode.
*/
/**
* #preserve
// ==UserScript==
// #description Description of the user script
// #include INCLUDESPEC HERE
// #include ETC ETC
// #name user script name
// ==/UserScript==
*/
(require) your foreign lib.
(require [comment.block :as ignored])
run your (advanced) compilation. Somewhere in the compiled output, the UserScript block will appear (note that the user script block requires to be at column 0, beginning with // style comments, which is why there's that newline after #preserve).
call the compiled output something akin blablabla.user.js (suffix 'user.js' is required), greasemonkey will recognize it, pick up the data from the user script block, and there's unicorns for everybody (even the vegans!)

Resources