Dynamically set Sass variables in Foundation - web

How do you dynamically set Sass variables in Foundation? According to their docs, you can customize a table with the help of a few Sass variables in _settings.scss, let's take the background color for example. Now what if I want to use two different kinds of tables, with different background colors? I am new to both Foundation and Sass, and these variables seem a lot like globals to me.
I guess I could make my own variables, such as $dark-table-bg, but how would I make a table use that variable in my html?
To clarify: the only thing I'm trying to achieve is having two tables next to each other, with different colors.

Foundation does not offer any special constructs for tables that come in multiple colors. If you want to have 2 different styles for tables, you do it the same way you would with vanilla CSS.
table.with-alternate-colors {
th {
background: blue
}
// etc.
}
If you want to see all of the styles that Foundation applies to tables so that you know what you need to override, you can find that information by browsing their repo
Note: While you could use that table mixin, I don't recommend unless you were changing everything about the way the table is styled.

Related

Best practise to provide styling options in liferay ADTs

I am using an ADT to display i.e. a table. I want to implement an option so people who configure the ADT can for example tick a checkbox and then the table changes so that a specific column is disabled.
Is this only possible via config files or is there an option to put this into the frontend?
Why would I want this? Because I have multiple systems and the column shall only be visible on some systems.
Thank you all for suggestions!

GPUImageHistogramFilter with GPUImageFilterPipeline

I am using GPUImage in my photo app to make some image filter options. In the app, there is an option to add multiple filters while capture an image, so to handle multiple filters, I have used GPUImageFilterPipeline. Every filter effect, those I have added, works well on pipeline except GPUImageHistogramFilter. I know that GPUImageHistogramFilter need more steps when compare to other filters(as mentioned here). But this is not working on pipeline. How to make histogram with GPUImageFilterPipeline?
A GPUImageHistogramFilter doesn't operate like a normal filter, and you can't use its output directly. It sends out a 3x256 texture containing the RGB channel histogram, but you need some way of parsing that for display. You won't be able to set that up in a GPUImageFilterPipeline construct.
Instead, you'll want to set up your filter pipeline manually, following the example provided in the FilterShowcase sample application (or my steps in the answer you link above). I use a histogram generator to create the overlay you see in the example there, and there's no easy way to set that up with a GPUImageFilterPipeline.
Also, I'd personally recommend not using the GPUImageFilterPipeline, since I don't maintain that class. It was contributed by a couple of other people, but I don't use it for anything myself and it has a tendency to break. I'd instead just create your filter chain yourself or place things within a GPUImageFilterGroup if you need to organize filter subunits.

Susy: different order of blocks for different breakpoints?

I would like the header of my site to look like this:
[_1_] [____2____] [_3_]
On smaller screens, i would like it to adapt like this:
[____2____]
[_1_] [_3_]
That can easily be achieved with ZenGrids, but i fail to come up with a solution for Susy.
How can i achieve that using Susy's at-breakpoint?
This should be possible with source order 2-1-3, and then using push/pull to move columns into place. You can also use the columns(), gutter(), and space() functions to manipulate margins by hand - which would allow you to recreate the Zen approach fairly easily.

Any way in Expression Engine to simulate Wordpress' shortcode functionality?

I'm relatively new to Expression Engine, and as I'm learning it I am seeing some stuff missing that WordPress has had for a while. A big one for me is shortcodes, since I will use these to allow CMS users to place more complex content in place with their other content.
I'm not seeing any real equivalent to this in EE, apart from a forthcoming plugin that's in private beta.
As an initial test I'm attempting to fake shortcodes by using delimited strings (e.g. #foo#) in the content field, then using a regex to pull those out and pass them to a function that can retrieve the content out of EE's database.
This brings me to a second question, which is that in looking at EE's API docs, there doesn't appear to be a simple means of retrieving the channel entries programmatically (thinking of something akin to WP's built-in get_posts function).
So my questions are:
a) Can this be done?
b) If so, is my method of approaching it reasonable? Or is there something stupidly obvious I'm missing in my approach?
To reiterate, my main objective here is to have some means of allowing people managing content to drop a code in place in their content that will be replaced with channel content.
Thanks for any advice or help you can give me.
Here's a simple example of the functionality you're looking for.
1) Start by installing Low Replace.
2) Create two Global Variables called gv_hello and gv_goodbye with the values "Hello" and "Goodbye" respectively.
3) Put this text into the body of an entry:
[say_hello]
Nice to see you.
[say_goodbye]
4) Put this into your template, wrapping the Low Replace tag around your body field.
{exp:low_replace
find="[say_hello]|[say_goodbye]"
replace="{gv_hello}|{gv_goodbye}"
multiple="yes"
}
{body}
{/exp:low_replace}
5) It should output this into your browser:
Hello
Nice to see you.
Goodbye
Obviously, this is a really simple example. You can put full blown HTML into your global variable. For example, we've used that to render a complex, interactive graphic that isn't editable but can be easily dropped into a page by any editor.
Unfortunately, due to parse order issues, EE tags won't work inside Global Variables. If you need EE tags in your short code output, you'll need to use Low Variables addon instead of Global Variables.
Continued from the comment:
Do you have examples of the kind of shortcodes you want to support/include? Because i have doubts if controlling the page-layout from a text-field or wysiwyg-field is the way to go.
If you want editors to be able to adjust layout or show/hide extra parts on the page, giving them access to some extra fields in the channel, is (imo) much more manageable and future-proof. For instance some selectfields, a relationship (or playa) field, or a matrix, to let them choose which parts to include/exclude on a page, or which entry from another channel to pull content from.
As said in the comment: i totally understand if you want to replace some #foo# tags with images or data from another field (see other answers: nsm-transplant, low_replace). But, giving an editor access to shortcodes and picking them out, is like writing a template-engine to generate ee-template code for the ee-template-engine.
Using some custom fields to let editors pick and choose parts to embed is, i think, much more manageable.
That being said, you could make a plugin to parse the shortcodes from a textareas content, and then program a lot, to fetch data from other modules you want to support. For channel entries you could build out of the channel data library by objectiveHTML. https://github.com/objectivehtml/Channel-Data
I hear you, I too miss shortcodes from WP -- though the reason they work so easily there is the ubiquity of the_content(). With the great flexibility of EE comes fewer blanket solutions.
I'd suggest looking at NSM Transplant. It should fit the bill for you.
There is also a plugin called Shortcode, which you can find here at
Devot-ee
A quote from the page:
Shortcode aims to allow for more dynamic use of content by authors and
editors, allowing for injection of reusable bits of content or even
whole pieces of functionality into any field in EE

Can I use a Kentico macro to get a partial path?

I would like to know if it is possible to use kentico macros (not necessarily coding a custom one) to access part of the rewritten URL's Path.
Example: http://www.mysite.com/Category/Subcategory/
I would like to get the last part (Subcategory) so that I may then filter content dynamically. The reason I want to use the macro is to simply not have to have 20+ different page templates only so I can have different web part properties.
Assuming you are using Portal templates, and you don't want an 'all items in all subcategories' list on the parent:
Create an Article List web part on the parent page — parent to all the sub-categories.
Set the web part Path to /{0}/{1}/{2}/% (if your path was /Home/Parent/Subcategory for example) or something similar for your environment.
Use the default setting of Inherit for the page template for all subcategory pages.
This will not show anything on the parent page, and the sub-categories will show only the documents under themselves. Note: If you want the subcategory items to have their own views when user digs down to /{0}/{1}/{2}/item, you may need to filter by changing template inheritance, or Document Types on the web part, or something like that if you don't want the whole sub-category list to also show on the item-specific pages.
You can create a custom macro or, you can also use the string operations which are allowed within macros. Please see http://devnet.kentico.com/docs/6_0/devguide/available_macro_methods.htm#string_methods (and you can e.g. use the EndsWith or TrimStrart or something similar).
However, I think the best way would be to create a custom macro which will exactly fit. There might be some combination of macros and macro functions - but I think it is faster just to code a custom one which will cover your need 100%.
Also, you can take a look on the K# if there is something that will fit - http://devnet.kentico.com/docs/6_0/devguide/ksharp_syntax.htm

Resources