I am developing a new template for joomla and decided to use the Gantry framework. The mai problem of using it, is that i don't really understand the css/less structure. I need to understand it so i can make it more dry and easy to maintain. I find different overrides in difeerent css/less files. I don't really understand the logic. Can someone explain me how the css/less is structured?
Here is the global less file:(hope this gives an ideea about the structure)
#import "jui/less/mixins.less";
// Core variables and mixins
#import "variables.less";
#import "mixins/index.less";
// Core and Grid
#import "gantry-core.less";
#import "joomla-core.less";
// Template core styling and layout
#import "template.less";
#import "style.less";
#import "header-#{headerstyle}.less";
#import "jui/less/font-awesome/font-awesome.less";
#import "utilities.less";
#import "prettify.less";
#import "offline.less";
#import "error.less";
#import "jui/less/bootstrap-overrides.less";
Thanks.
It's a mess, I agree. It's clearly not been authored with end-users in mind, and it certainly isn't DRY. In my experience Gantry's LESS is very badly written, demonstrating a fundamental lack of understanding about how to use pre-processors responsibly or efficiently and creating some horrible outputs in the process.
If you want lightweight and maintainable LESS you'd be better writing it yourself, from scratch.
Last template I built with Gantry I disabled their LESS compiler, removed their LESS files and dropped in my own Sass framework instead.
The line #import "header-#{headerstyle}.less"; gives us a clue that from global.less you are able to load different themes depending on user selection in backend.
Basically you can follow the files inheritance by seeing what is being imported by each file.
Related
I've started working on a project that has bunch of css files eg. 15-20 css files which is not the right approach i wanted to use Sass framework but these bunch of css files have confused me. I want to make sure i dont break anything before start writing sass for these css file so wanted to know What's the best strategy i should adapt to integrate sass framework in a project considering we already have bunch of css files??
Valid css is valid sass so to start you could just change the extension to .scss and compile them along with your new sass files. So if you were generating just one main.css for example:
//main.scss
#import "existing-file-one";
#import "existing-file-two";
#import "existing-file-three";
#import "new-file";
This would then add all your existing styles.
I am trying to arrive at a strategy to add branding(style) to web components (angular 2 components in my case).I want to arrive at a consensus where there is a possibility of same component repeating multiple times on a page. Want to avoid duplication while packaging styles across components and abstract it. How do i arrive at a solution when the style needs to be atomic to the component and when to abstract it and how do i need to go about it. Thanks much
In my experience it's really useful to have several style files that handle specific areas. In my case I called those template. This is an example of my main.scss file in my main project:
#import 'templates/menu.scss';
#import 'templates/forms.scss';
#import 'templates/pagination.scss';
#import 'templates/general.scss';
#import 'templates/type.scss';
#import 'templates/labels.scss';
#import 'templates/navbar.scss';
#import 'templates/sidebar.scss';
#import 'templates/buttons.scss';
#import 'templates/tables.scss';
#import 'templates/panels.scss';
#import 'templates/alerts.scss';
#import 'templates/loading.scss';
#import 'templates/calendar.scss';
#import 'templates/comment-input.scss';
I've been created these on demand. It's like writing any kind of reusable code. When you or some one in your team notice that what is about to be created already exists. It's better to remove from the style of the component and place it on a style file that has larger scope.
We are in a team of 5 developers and it has been working really well. Components have their specific behavior isolated but the behaviors that they share are available to any component to use.
Another approach that I've though about using is to only import the template files as another styleUrl in the component. This way I would guarantee even more the style encapsulation.
Let's say you have a component that have its specific behavior, but you also want it to have the labels.scss available to it. You would do this:
#Component({
selector: 'my-component',
templateUrl: 'my-component.component.html'
styleUrls: ['my-component.component.css', '../shared/styles/labels.css']
})
I really like this second approach, but as the project gets really big you can have some nasty relative paths to be handled when importing the shared styles.
I hope this helps.
Bootstrap has allocated many keywords that we use when we develop web projects. Such as: container, navbar, nav, etc.. Sometimes I use these keywords for some of my projects. But for some other projects I don't need any feature of these keywords but I need the names. Is there any way to disable these keywords without overwriting them?
These keywords are important because these are what we call good practice. I don't like using menu or navigation-bar instead of navbar. So, is there any way to disable css of these keywords?
Thank you.
This is one of the downfalls of using a framework, and you have to ask yourself at one point whether it's worth your time building your own boilerplate for projects.
As for your question, I don't believe there's a "safe" way to do that with the vanilla css file, but if you have ruby installed and you download the SASS version you may be able to remove some of the other stuff you don't need by selectively commenting out components in _bootstrap.scss:
#import "bootstrap/component-animations";
#import "bootstrap/dropdowns";
#import "bootstrap/button-groups";
#import "bootstrap/input-groups";
// #import "bootstrap/navs";
#import "bootstrap/navbar";
#import "bootstrap/breadcrumbs";
#import "bootstrap/pagination";
#import "bootstrap/pager";
I couldn't find anywhere which less files are required for a minimum Bootstrap website design.
I just want to download the LESS files from github, modify to get my own theme and compile the CSS.
The website should be responsive of course and have only navigation, grid system, typography and buttons.
What are the minimum required LESS files to compile the right CSS? No fuss such as panels, wells, tables etc is needed!
Many thanks for any recommendations.
As you have it in its sources as well, they are the following:
// Core variables and mixins
#import "variables.lessimport";
#import "mixins.lessimport";
// Reset
#import "normalize.lessimport";
#import "print.lessimport";
// Core CSS
#import "scaffolding.lessimport";
#import "type.lessimport";
#import "code.lessimport";
#import "grid.lessimport";
#import "tables.lessimport";
#import "forms.lessimport";
#import "buttons.lessimport";
So you'd only have to comment out the rest of the file and recompile the whole thing. And you should get the desired results
In several examples (i.e. Railscasts episode, this Stackoverflow question, etc), I see "compass" being imported before "compass/reset" like so:
#import "compass";
#import "compass/reset";
Could someone explain to me why reset shouldn't come first? Or does the reset order not matter with respect to the base compass import?
#import "compass/reset";
#import "compass";
In the case of Compass, it does not matter what order you do your imports because it is just a collection of mixins, functions, and variables. Compass does not emit any styles unless you tell it to.
This may or may not be the case with other libraries, so make sure you always read the documentation.