Search results for: CSS Grid
66 results found.
Introducing the Visual CSS Grid Editor
Pinegrow Web Editor includes a powerful collection of visual tools for working with CSS Grid.
Summer Nights 2 – Creating a CSS Grid layout in Pinegrow
CSS Grid has gained much wider support, with virtually all modern browsers supporting it. Page layout is significantly easier than using traditional floats and widths, and best of all, Pinegrow has a variety of visual tools to help out!
In this tutorial I’m going to walk through putting together a simple web page using CSS Grid using the visual tools of the Pinegrow Web Editor. Along the way we will also look at some tricks and tips for using CSS Grid, as well as looking at the drawbacks.
Using Multiple Track Names to Create Responsive CSS Grid Layout
In this quick CSS Grid tutorial we’ll use multiple track names to create a responsive CSS Grid layout.
Lines define the grid
CSS Grid lets us position HTML elements into a 2-dimensional layout. We’ll create a simple grid and explore lines that define the grid, as well as play with distances between the lines.
Fantico – Creating a landing page with TailwindCSS and Tailwind Visual Editor
A step by step tutorial about building a landing page with TailwindCSS.
Pinegrow Web Editor 6.1 – July 28, 2021
Design panel with improved backgrounds, filters, harmonic colors and local web fonts – New templates and blocks – SVG icons for every project – Code editor with intelisense, new color themes and better performance – Bootstrap and Tailwind CSS updates – and more!
Implementing user controls in Pinegrow
Accessibility controls are important in web design. This tutorial walks through one method to add controls to your navbar and gives a review of CSS Grid.
Summer Nights CSS Grid Tutorial
A step by step tutorial on creating a responsive CSS grid layout with fallback for older browsers.
CSS Grid
CSS Grid is a game-changing approach to creating flexible and responsive layouts for the web. And with the new Pinegrow you can use powerful visual tools to work with all aspects of the Grid.
The mystery of the Fraction unit
We’ll add a image gallery to the page, using a nested CSS grid. In the process we’ll discover (and handle) the unexpected behaviour of images and Fraction units.
Pinegrow Web Editor 7 with 7.0x – Nov 28 and Dec, 2022
Updates – Mac M1 build – Layout tools – Improved CSS editor – Class previews – Responsive interactions and more.
Pinegrow 5 – Nov 20, 2018
“Focus on…” mode, Handling inline styles and other styling improvements, Drag files from the Project panel and more.
Summer recap 2022
See what we did this summer: three releases, a bunch of tutorials and articles.
Introducing Pinegrow Web Editor 6
Do more with less UI.
Positioning with named lines and improving the design – Updated
We’ll add a poster image to page header and position it with named lines. Then, we’ll do some CSS styling to make the page more attractive. Make sure to watch the video update as well.
Learn CSS Grid with Pinegrow
The goal is to quickly learn enough about the CSS grid so that we can start using it in our projects.
Release 4.1 – Dec 11, 2017
Pinegrow 4.1 is available for download.
Release 4.91 – 28 August, 2018
CSS Gradients, Bootstrap 4.1.3 and improved CSS Grid Editor & SASS support.
Journeying to improved profitability with Pinegrow
I’m Tim Bowerbank, Director, www.pendigital.co.uk and I am a recently converted advocate of Pinegrow. I have been using Pinegrow for 18 months now. It’s transformed our web development business into a more productive, and hence, profitable venture. I want to tell you about our journey to improved profit with Pinegrow.
CSS Grid Has Never Been Easier: With Pinegrow Web Editor
According to Adam LOWE, one of the most interesting features of Pinegrow has nothing to do with WordPress. It’s actually the CSS grid editor.
Dynamic rows with grid-auto-rows
We’ll define our gallery grid without specifying a fixed number of rows.
NEW: Bootstrap Blocks
Use the new Bootstrap Blocks library and a simple three step process to easily create uniquely designed websites.
Using the iziModal library in your web project
Pinegrow makes adding a JavaScript library into our projects easy! Here is an example of using the “iziModal” library to add modals to a plain HTML project.
Pinegrow WordPress Starter Theme 2 documentation
If you want to create your own WordPress theme with Pinegrow PRO/WP but you do not yet have all the necessary knowledge OR if you simply want to optimize your process and start from a solid foundation and focus on the essentials, using the ST2 is the best opportunity to get started quickly and efficiently.
Using SVG images in Pinegrow
Scalable Vector Graphics (SVG) are a light-weight way to display vector images that can be displayed at any resolution and manipulated by both CSS and JavaScript methods.
Quick Introduction to the Pinegrow Web Editor
The Pinegrow Web Editor is a powerful tool, but it can also be a bit daunting. This tutorial will provide a quick walk-through of the main features of Pinegrow that will let you start designing you web project quickly!
5 Essential Tips to Make Your WordPress Theme Project a Success
A well thought out and well prepared WordPress project is a successful project.
There are many different situations in which you may want to create a WordPress theme. The following tips are specifically for users who wish to use Pinegrow or Pinegrow Theme Converter to create a theme for their own site.
Pinegrow Live update log
The exciting story of Pinegrow Live updates.
Pinegrow Web Editor 5.971, 5.972 and 5.973 – July 29, 2020
Work with customized Tailwind themes in Tailwind Visual Editor – Faster CSS Grid editor – Bug fixes
Release 1.107, April 23 2014
New Pinegrow Web Designer 1.107 is available for download on pinegrow.com with many improvements that will make your work with Pinegrow quicker and more reliable.
Learn CSS Grid with Pinegrow
A free online course about CSS Grid that will help you to quickly start using grid in your projects.
Pinegrow Web Editor 6.6 – July 6, 2022
Picture element – Lazy loading – CSS Grid context menu – SASS performance – WordPress & WooCommerce improvements
Newsletter #9 – July 30, 2020
Customized TailwindCSS themes – Fantico Tailwind CSS landing page tutorial – WordPress FAQ – Master pages tutorial – Pinegrow 5.971
Pinegrow Web Editor 7.1 – January 10, 2023
Recent classes – CSS media size tabs – Aspect ratio – WordPress improvements – Build you first block tutorial
Show Posts
Show Posts action loops through a collection of posts. Post smart actions can then be used on and inside the Show Posts element to display post content.
Vue Designer — a Visual Editor for Building Vue Applications
Introducing the new visual IDE for Vue, by Pinegrow.
Dynamic column sizing with minmax
We’ll create additional spacing with new columns and rows. Then we’ll make the size of the main content column dynamic within the minimum and maximum range.
Release 5.2 – 6. Feb, 2019
CSS Grid editor validates input values, element in the status bar, pick colors with system color picker, WordPress Builder improvements and more.
Release 5.1 – 24. Jan, 2019
Open panels in floating windows and arrange them on multiple screens. Easily update Bootstrap, fixed Master pages, WordPress improvements, Starter Theme 2 update and more.
Pinegrow Web Editor 5.6 – June 26, 2019
Protect locked stylesheets from editing, improved Google Fonts and bug fixes.
Pinegrow Web Editor 5.7 – July 31, 2019
Improved Style editor, Components and Master pages… Plus, a healthy dose of bug fixes.
Interview : Tuukka Rantala, Graphic Designer at Porkka & Kuutsa (Finland)
Tuukka Rantala is a talented graphic designer working at Porkka & Kuutsa a very well known brand identity design agency from Finland.
We asked him to share a bit of his experience with Pinegrow and WordPress theme development.
Special Offer for Users of WordPress Page Builders
Come onboard Pinegrow 747!
Creating an animated revealing menu – Interactions tutorial
A step-by-step tutorial about creating an animated website navigation menu with Pinegrow Interactions.
Bootstrap Design Panel
The Pinegrow Design panel for the Bootstrap framework allows you to easily set up a custom theme without editing any base files or setting up a complex compiler. It also allows you to test alternative designs for your whole project quickly and easily.
Snipcart eCommerce WordPress integration with Pinegrow
Roel Van Eyken, a graphic/Web designer from Belgium offers us an excellent guide to integrate Snipcart in your WordPress themes created with Pinegrow.
Snipcart is a powerful, developer-first HTML/JavaScript shopping cart platform with a full back-office management dashboard to track abandoned carts, sales, orders, customers and more…
This article was originally posted on the Pinegrow Forum
Pinegrow Web Editor 7.3 – 28. March, 2023
Improved AI Assistant with chat and its own panel – Class Tree inspector for Tailwind CSS – Bug fixes
Versão 5.3 – 27 de fev de 2019
Abra o painel de edição de Grid CSS e outros em janelas flutuantes, Retrair e Expandir tudo no painel de Árvore, carrossel de Bootstrap e mais.
Release 5.3 – 27. Feb. 2019
Open CSS Grid Editor and other tools in floating windows, Collapse / Expand all in the Tree panel, Bootstrap Carousel and more.
Foundation
See how Pinegrow can help you to work with Foundation 5 and Foundation 6.
Pinegrow Web Editor 5.94 – February 24, 2020
Create custom WordPress blocks, improved CSS Grid editor and projects.
Release 4 – Nov 22, 2017
Pinegrow 4 is available for download.
Introducing Pinegrow Online
Pinegrow Online is a cloud version of Pinegrow Web Editor that runs in your browser.
Dynamic columns with repeat and auto-fit
We’ll improve the image gallery by making the number and size of the columns adjust to the available space.
Building the page
We’ll create a simple page structure with header, content, sidebar and footer.
Release 2.31 – 18. Nov 2015
Download Pinegrow 2.31 Did you miss the launch of Pinegrow PRO? We discovered a bug that prevented exporting WordPress themes in trial mode. We also added a bunch of useful goodies that will make your web development life easier: Auto fixing broken links in project Use Fix links in PRJ context menu to fix broken
Bootstrap Visual Editor
No more guessing the correct Bootstrap class name and copy-pasting code from Bootstrap docs. Pinegrow includes everything you need to easily work with Bootstrap-based projects.
Show at Start
Place Show at start on elements that need to be displayed when page loads so that you can hide them with interactions.
Release 2.1 – May 26. 2015
Pinegrow 2.1 with Page tabs, WP goodies and more Hi, Matjaz here, the author of Pinegrow Web Editor. Pinegrow 2.1 is available for download. The update is free if it falls within one year from your license purchase (no problem if that’s not the case – you can get additional year of updates for half
Developers
API documentation for extending Pinegrow Web Editor with custom plugins.
Troubleshooting
Because the conversion from HTML to WordPress is not a black box process, there are sometimes edge cases that you will need to take into consideration upfront in order to ensure the successful conversion of your HTML template into a fully functional WordPress theme.
Newsletter #10 – August 14, 2020
Interactive image hotspots – The ultimate Pinegrow FAQ – Pinegrow Web Editor 5.972
Class Tree inspector
Visual controls for Tailwind CSS are nice, but for more experienced users working with them requires too much clicking and scrolling around.
The Library of Bootstrap components
Use the Library panel to add Bootstrap components to the page.
Release 4.911 – 25. September, 2018
Pinegrow 4.911 is available for download.