WpTrunk

Tag: scss

  • Flexbox Grid (Layouts)

    Purchase $2.00

    Description

    FlexGrid provides simpler and more flexible layout options in CSS. More specifically, it provides:

    – Easy vertical alignment of content within a parent element.
    – Easy reordering of content across devices and screen resolutions with the help of media queries
    – Easy CSS-only equal height columns for your grid-based layouts

    All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

    Changelog

    Version 1.0 / Update: 03/11/2016

    • Release

    Credits

    Fonts

    Purchase $2.00
  • Higher Dashboard – The Final wordpress Admin Enhancer (Miscellaneous)

    Higher Dashboard – The Final wordpress Admin Enhancer (Miscellaneous)

    Purchase $17.00

    Better Dashboard

    A ever-expanding collection of modules to boost the functionality of your WP Admin Dashboard! You experience with the WordPress admin interface will change forever!

    Modules (5 and counting):

    Better Post Display

    Better Post Display is intended to bring a fresh new look to the post listing admin page. If you are tired of that old table look, this module is for you. It provides a series of cool functionalities in the new page as well, such as ajax pagination, powerful filtering options and thumbnail display. Check the demo and the screenshots!

    Search and Go

    This module allows you to easily switch between admin pages – like Spotlight, from Mac OS. You can open the Search and Go panel by using the trigger shortcut: ctrl + alt + g on Windows and Linux or cmd + option + g on Macs. Check the demo and the screenshots!

    Custom Color Schemes

    We honestly think that should be no limits to the amount of customization available in the WordPress Admin. This module allows you to create your own custom Color Schemes to be selected in the profiles page. Check the demo and the screenshots!

    Admin Menu Editor

    We now how cluttered an admin menu can get if you have tons of plugins installed. With this module you can reorder the menu items as you please to make easier for you to reach the items you use the most, simply by dragging and dropping them in the desired order. Check the demo and the screenshots!

    Custom CSS and JS

    We know that often we need to inject CSS and JS scripts to our frontend. That should be easy to do, and now it is. Check the demo and the screenshots!

    You can enable and disable each individual module. Just use what you want to use!

    Our Items

    Changelog

    Version 0.0.1
- Initial Release on CodeCanyon.
    Purchase $17.00
  • CSS Reside Editor WordPress Plugin (Add-ons)

    CSS Reside Editor WordPress Plugin (Add-ons)

    Purchase $16.00

    CSS Live Editor helps you to fix up the styles of your website straight from your frontend, with a live preview!

    Have you ever wanted to adjust some CSS in your website, and you find yourself going BACK into the backend just to edit your page or add some customized CSS? Then after previewing your site, you find that you still need more adjustment? If you have, then this plugin is for you.

    Features: CSS Live Editor window preview

    Put in your CSS in the editor window, and your styles will be applied directly to your website as you type. This live preview is so helpful and will save you time when finding out the perfect style. When you’re done, then just click the save button and your styles would be saved.

    CSS Live Editor is for both expert and novice web developers and designers.

    You can use plain CSS or SCSS syntax in the editor. And because of this, you can use variables, functions and nesting. This makes the CSS Live Editor really powerful. For example, you can add your variables for your ‘entire site’ styles, then use them in the different parts, such as the styles ‘specific for this page’.

    Error checking is also built-in, so when you have an error, an indicator will be displayed near where the error occurred. Hover your mouse over the indicator and the error message will show up to help you figure things out. CSS Live Editor has 2 levels of error checking. Saving your CSS can sometimes show you error messages.

    Why and Where to Use This

    You can use it for tweaking and even while developing your website.

    We ourselves use this for creating styling websites for our clients. We found that editing your styles along with a live preview of how the entire site would look like is a powerful time-saving tool. SCSS and nesting rules also ensure that your code is small and tidy.

    Here’s a good tip for you: Use CSS Live Editor with your browser’s inspector or developer console, so that you can quickly get the id and/or class names that you need.

    Features

    Features: Edit CSS from the frontend, View a live preview of your CSS as you type, Use plain CSS or SCSS syntax: use variables, functions and nesting, Syntax error checking with error annotations, Apply styles to your entire site, all pages or post types or even specific pages,

    • Edit CSS from the frontend,
    • View a live preview of your CSS as you type,
    • Use plain CSS or SCSS syntax: use variables, functions and nesting,
    • Syntax error checking with error annotations,
    • Apply styles to your entire site, all pages or post types or even specific pages,
    • Little overhead since SCSS is compiled when it’s going to be used,
    • The Editor is only available if you have privileges to edit your theme,
    • Only the CSS needed for your site is loaded in the frontend,
    • Lightweight,
    • Cleanly coded in WordPress standards

    Having Trouble with the Plugin?

    Head over to the support tab and check out the FAQs, or submit a support ticket!

    Enjoying the Plugin?

    Be sure to leave a rating and review and show us some love.

    Check out Our Other Stuff

    Video & Parallax Backgrounds For Visual Composer

    CSS Animator add-on for Visual Composer

    4k Icons add-on for Visual Composer

    Updates

    Version 1.0

    * Initial release

    Purchase $16.00
  • Recent LESS / SCSS Compiler (Utilities)

    Recent LESS / SCSS Compiler (Utilities)

    Purchase $13.00

    About

    Automatically compile and cache your .LESS and .SCSS files on both frontend and backend

    Main Features

    • Automatically watches and compiles .LESS and .SCSS files (.SASS syntax is not supported) that you have added directly via <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_style">wp_enqueue_style</a>
    • Works in themes, plugins, on both frontend and wp-admin
    • Integrated cache, compiles only after a change is detected
    • Create new LESS/SCSS variables on the fly with WordPress hooks – great for generating CSS from backend options
    • Does not have any GUI (Graphical User Interface)

    Including .LESS and .SCSS files

    In order to automatically watch and compile your .LESS and .SCSS files, you need to add them directly via wp_enqueue_style

    Example LESS:

    wp_enqueue_style('design', get_template_directory_uri().'/assets/css/design.less');

    Example SCSS:

    wp_enqueue_style('design', get_template_directory_uri().'/assets/css/design.scss');

    Create LESS/SCSS variables with WordPress hooks

    add_action('ff_css_variables', 'my_css_variables');

function my_css_variables( $variables) 
    $variables->addVariable('design', 'backgroundcolor', '#000000'); //'wp_enqueue_style handle', 'variable name', 'variable value'

    Attributions & Credits

    Purchase $13.00