Also, for anyone watching who hasn’t looked into the basics of the bootstrao framework, remember if you add a bootstrap component into a page, bootstrap has default styling, so this important to remember - don’t be scared of removing any of the default bootstrap styling by clicking “x” next to the css class (using the pinegrow panel)
In the case of the carousel - you’re adding to the default bootstrap styling by creating a new style sheet and adding your own classes.
Here is a good example of my previous post.
This is a typical “latest news” block broken down into three columns using the default bootstrap content thumbnail and you will see what happens when I remove the default bootstrap styling and then styling the content thumbnail, ready for further styling when you have actual content.
Also you see how rapid the development is and as always I haven’t touched a single line of html code.
Uhhhhhhh… at least use captions or something… come on! ha ha ha
Here is a sneak preview.
All done in pinegrow, pure css and beautiful colour scheme and there may even be sound in this video!
I was hoping to finish this tonight and upload the video, but I need to make further adjustments - I’m about 60% complete - I have to decide on certain elements, and I’m making things more difficult for myself as I’m working with filler content! - anyway enough of the excuses!
I am actually on holiday but as I’m clearly in mad designer mode lol I’ve uploaded another simple video.
You will notice currently my videos tend to use the same basic styling - but this is because sometimes all you need are the basics.
These type of icons are quite popular, many create them with css and other icon sets but this is a simple way to create them using css & the font awesome icon.
And as always apologies for any errors (that I quickly correct) but when you’re designing in rapid mode, you often make basic mistakes.
One basic mistake I would correct would be instead of naming the first icon as .social-twitter - I would name the class as .Social-Icon and that class would contain the rounded border, dashed styling and margin right. I can then duplicate that element.
I would then add separate classes for each of the icons, such as .social-twitter & social-facebook with the relevant background colour, meaning I wouldn’t have the .social-margin.
I’m now starting to pay more attention to how I create a class or the naming system as I’m aware I exclusively use classes (no id’s) but this is because i’m building blocks, rather than a complete website.
This is one block I’m currently working on but yet to decide if its a content block to break up the layout or a header.
This is one of my early designs using the bootstrap blocks included with pinegrow - showing how you can use your creativity to turn the default blocks into your own custom design.
One other tip - whenever I know I’m going to duplicate a column or a thumbnail because it contains many of the same elements/classes - I always style the first column and then once that is styled, I duplicate, meaning it saves having to add the class from the css panel.
Also you don’t have to use the “section” tag - you can use div but as section is for a generic section of the website, i prefer (and as do others) to break down each block into a section and you add a div on top of a section to style - add an overlay etc.
I also don’t pay much attention to the font, as when I create a complete website, I set the font size within the body css and then I would control the font size using %, always % because of mobile web design, especially if you want your website to pass googles mobile testing system.
If you drop a container into a div (such as a div that is an overlay) and you want to control the content that sits inside your column - remember container-row column - make sure you style the row, if you’re using margin top px.
One other tip. if you drop a div inside a section, you don’t actually have to control both the section/div min height, because if the div is sitting inside the section, it stretches the height of the section (which may have a background image)
I think I’m going to crack up if I have to say div anymore…div div lol
@Jack nice work on making the Bootstrap block not look like a Bootstrap Block element, goes to show what can be done with a little bit of effort and can result in a very unique design.
Cheers Rob.
One advantage I have is until early this year I had never heard of Bootstrap! I of course knew of Twitter but had zero knowledge of modern web trends and frameworks.
This is one of reasons I’m in control of bootstrap, he is my son and I’m the daddy lol
A blank page is blank page and wouldn’t matter if I was using gimp, Photoshop,bootstrap or foundation - visually the end result would be the same.
Talking of foundation - I loaded a new page within Pinegrow and I can see why some prefer the foundation framework to bootstrap.
I didn’t realise Pinegrow allowed you to save smart components within foundation or any html element (with resources added)- I’ve been so focused on Bootstrap, but this makes things interesting!
I may put bootstrap up for adoption lol - bang goes my holiday of switching off from web design!
I can also see why foundation isn’t as popular - just from exploring it more - looking at the components - it’s suited to people aren’t interested in the more heavy styling (out of the box) bootstrap - which is geared towards designing websites that are visually more advanced looking.
Bootstrap is definitely more suited to people who enjoy design - foundation I can see would require more effort - more time, but if you’re not as focused with the visual/design aspect, foundation would be a better option for certain websites, while if you wanted to make the effort, you can of course design within the foundation framework.
@Jack Foundation uses less css styling so that users can design their sites with less of a requirement to overwrite default framework styles. The theory being it is actually easy to design a site from scratch.
That is a good point Rob.
Foundation may be a better option for certain websites I have planned - especially as the more I design, the more I’m realising its mostly css i’m working with - I use very few default bootstrap components other than say the navbar , which is fully responsive out of the box.
I will have to decide how important bootstrap smart components are to my plans because that is one of the awesome aspects of bootstrap and Pinegrow but I must admit already I’m starting to see why Foundation is superior in certain areas, plus it forces me to be cleaner with my css, rather than rely on quickly using bootstrap options.
@Rob - Fontawesome doesn’t load for any new sites created (regardless of framework) but I just downloaded this icon set:
http://zurb.com/playground/foundation-icon-fonts-3
In my designer playground lol I used the xbox icon and started styling it with css.
@Jack that’s weird that FontAwesome isn’t working for you, I’ve tried it here with both Bootstrap and Foundation and it works fine. Must be a local issue you’re having. See screenshots.
It’s a great way to learn more about Pinegrow, HTML, CSS and frameworks. Looks like you’re having fun!
Its a problem my end - as fontawesome doesn’t load, nor does the google fonts or googlemaps within pinegrow.
However if I start a new site with Pinegrow blocks (font awesome loads) and if I use bootstrap studio it works.
Not that it matters as I prefer the foundation icon set!
edit - ok I know why it works with the pgblocks as they load the resources such as the icon set locally but if you activate the icon set on a new page they call this https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css and something is blocking it my end!
Here is a “block” of Social Icons using the Foundation Icon set.
Background linear-gradient(135deg, #ebeff1, #37434d);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
If anyone owns bootstrap studio - one nice feature is it allows you to select linear gradients within the css styling with a colour picker and see the result as you mix the colours, you can then copy and paste the code into pinegrow.
