How to learn more about LESS
-
-
- Houston
- Elite Rocketeer
- Posts: 1077
- Thanks: 2
-
I am really not understanding all this talk about LESS. Can someone direct me to a website that would explain this from a layman's point of view.
Many thanks,
Houston - Houston Brown -
www.splitlightdesigns.com
Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
mySQL Version = 5.5.21
Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
you have seen this already?
lesscss.org
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
I liked this too
verekia.com/less-css/dont-read-less-css-...ial-highly-addictive
-
-
-
- Houston
- Elite Rocketeer
- Posts: 1077
- Thanks: 2
-
Henning,
Thank you for the links that is most helpful. Although I get the basics and I see where all this is going it will take some more time to learn all of this what I am really needing to know at this point is what files I need to modify or add in RocketThemes to makes changes such as the ones discussed in this article .
I really love the new Cerulean template but the one thing that is really annoying about it is that it left hardly any room for a logo. I don't think I have any clients that would accept a logo that would fit into this area. But this is just an opinion. What I really need to figure out is how I can change the.less code so I can make my navigation adjust to the different window sizes. Much like Ali is talking about in the referenced forum post above.
Many thanks,
Houston - Houston Brown -
www.splitlightdesigns.com
Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
mySQL Version = 5.5.21
Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
My advice ...
The "Less"-css-preprocessor offers great options but it can be a pain to debug.
You will get a better idea of the things going on if you
a.) turn off less compression
b.) switch on the debug header option
Now you can see on top of the master-xxx-files which Less files have been compiled.
If you want to try/learn Less I suggest to start with simple things.
That doesn't have to be real stuff. Just play around a bit.
You can use stuff like
codepen.io
jsfiddle.net/AaronLayton/B5zCu/
or
leafo.net/lessphp/
if you are on mac you can also try incident57.com/less/ or
incident57.com/codekit/
but you don't really need these apps as Gantry does already compile Less to css.
For most little to intermediate changes I suggest not to use Less files.
It's faster to use just css for that.
tweaking/changing -> use css in a custom-css file
developing -> use less (there are different ways to use it)
So don't panic! Just using css is still a good thing!
So how do I work with tweaking responsive stuff?
1st thing!
You need to understand @media queries!
There is a lot on the web about this topic. For now you just need to know the basics.
You could take this as a template for dealing with responsive stuff:
@media only screen and (min-width: 1200px) { ... some css code ... }
@media only screen and (min-width: 960px) and (max-width: 1199px) { ... some css code ... }
@media only screen and (min-width: 768px) and (max-width: 959px) { ... some css code ... }
@media only screen and (min-width: 481px) and (max-width: 767px) { ... some css code ... }
@media only screen and (max-width: 480px) { ... some css code ... }
It will help you to apply changes only for certain viewports. It covers all "breakpoints" in rt-templates
So know I would inspect the element you want to change like the logo with a tool of your choice like Firebug or the web inspector in Chrome.
Let's say you find this rule.
.logo-type-metropolis #rt-logo {width: 121px;height: 97px;}
Just copy it and add a little css specificity to override it like
body.logo-type-metropolis div#rt-logo {width: 80px;height: 50px;}
now use a custom css file and use our little "template":
@media only screen and (min-width: 1200px) {
body.logo-type-metropolis div#rt-logo {width: 80px;height: 50px;}
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
body.logo-type-metropolis div#rt-logo {width: 60px;height: 40px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
body.logo-type-metropolis div#rt-logo {width:50px;height: 30px;}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
body.logo-type-metropolis div#rt-logo {width: 40px;height: 30px;}
}
@media only screen and (max-width: 480px) {
body.logo-type-metropolis div#rt-logo {width: 80px;height: 50px;}
}
(Note: this is really just a rough example)
A little extra note about Cerulean. Because the template is a little wider there are slightly different "breakpoints"
@media only screen (min-width: 1315px) {}
@media only screen and (min-width: 1075px) and (max-width: 1314px) {}
@media only screen and (min-width: 883px) and (max-width: 1074px) {}
@media only screen and (min-width: 595px) and (max-width: 882px) {}
@media only screen and (max-width: 594px) {}
I hope this helps you to get started.
-
-
-
- Houston
- Elite Rocketeer
- Posts: 1077
- Thanks: 2
-
Huge help here Mr. Henning. I will get started on this later this evening. I will let post back with results of my success or disaster.
Many thanks,
Houston - Houston Brown -
www.splitlightdesigns.com
Apache Version = 2.2.2 / PHP Version = 5.2.17 or 5.3.15 (dual)
mySQL Version = 5.5.21
Joomla Version = 2.5.8 / Web Servers OS Version = CentOS 6
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
-
-
- earthdog
- Jr. Rocketeer
- Posts: 35
- Thanks: 0
-
Henning wrote:
i have seen that and i have created a
rt_metropolis-custom.css file with this inside:
@media screen and (max-width: 480px) { #rt-logo { background-image: url(http://mypathtoimage) } }
but it doesnt switch when i view it on my phone...
do i have to put it to css-compiled?
-
Time to create page: 0.062 seconds