You can also get a SASS project for Font Awesome too and import it at the beginning of your SCSS with your Bootstrap. Here is what the beginning of my SCSS looks like:
/*************** IMPORT STYLES ***************/ //Twitter Bootstrap @import 'bootstrap'; //Font Awesome Icons @import '../../bower_components/font-awesome-sass/assets/stylesheets/font-awesome'; //Bourbon @import '../../bower_components/bourbon/app/assets/stylesheets/bourbon'; //Defined Variables @import 'vars'; //Defined Animations @import 'animations'; And then in my 'bootstrap' file, I import only the necessary modules: // Core variables and mixins @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables"; @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; // Reset and dependencies @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize"; //@import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/print"; //@import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; // Core CSS @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/type"; //@import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/code"; @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/grid"; @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/tables"; //*****REST OF IMPORTS LEFT OUT FOR EXAMPLE PURPOSES******// On Thursday, September 3, 2015 at 5:09:01 PM UTC-4, Donald Silveira wrote: > > I never really stopped to think about using only the necessary modules of > Bootstrap without loaded all unnecessarily. > I'll try it and include other components like Font Awesome SASS in my > builder. Because Im loading font-awesome in separate file too. > > The library loadCSS was all I needed, as well the solution of the > spinner/pre-loader. > > Thanks Craig by cleaned my mind. > > Em quinta-feira, 3 de setembro de 2015 13:11:15 UTC-3, Craig McMurray > escreveu: >> >> "Critical CSS" is generally anything needed to render any Elements that >> appear "above the fold". It allows the browser to start rendering those >> Elements after the initial request instead of making additional (blocking) >> request(s) for your CSS. You mentioned you are using SASS, and then >> include a separate Bootstrap stylesheet. You could take your code a step >> further even and use the Bootstrap SASS project and only import the >> necessary components you need at the beginning of your SCSS file. Doing so >> will 1) reduce the number of requests for external resources and 2) reduce >> the overall size of CSS by only importing what you need instead of just >> including every single Bootstrap component. For example, I use Font >> Awesome so I don't import glyphicons in my build, and I don't use popovers >> or tooltips so those aren't imported either. I'm actually only using 20 of >> the 39 components that are included with the Bootstrap SASS project so it >> cuts down on my overall file size significantly. If you are able to >> successfully cherry pick the "Critical CSS" into the head, you could then >> use the loadCSS library build by the Filament Group and asynchronously load >> to bundled CSS which would prevent it from being a blocking resource >> altogether. Alternatively, you could use a spinner/pre-loader as mentioned >> above and then still use the loadCSS library to achieve a similar effect. >> >> On Thursday, September 3, 2015 at 10:47:00 AM UTC-4, Donald Silveira >> wrote: >>> >>> Hello Craig. >>> >>> I'm with a similar problem. >>> In my application I'm using SASS/Gulp for concat and minify my CSS. >>> >>> Example how I structured: >>> >>> <link rel="stylesheet" href="assets/css/bootstrap.min.css >>> <http://www.foustleague.com.br/assets/css/owl.carousel.min.css>"> <link >>> rel="stylesheet" href="assets/css/styles.min.css >>> <http://www.foustleague.com.br/assets/css/styles.min.css>"> // my SASS >>> files compressed >>> >>> On this case, what you consider "Critical CSS"? >>> >>> >>> >>> Em sexta-feira, 17 de abril de 2015 23:24:18 UTC-3, Craig McMurray >>> escreveu: >>>> >>>> Putting "critical CSS" in the <head> is definitely great for quickly >>>> rendering above the fold content in the initial HTTP request. Just be >>>> careful about "flipping the switch", if done incorrectly it will result in >>>> the great FOUC which is rather unsavory >>>> >>>> On Friday, April 3, 2015 at 5:14:46 AM UTC-4, Sander Elias wrote: >>>>> >>>>> Reydi, >>>>> >>>>> Just look for a small css-spinner >>>>> <https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css-spinner> >>>>> >>>>> and put that inside a style tag in the head. I have done just that a >>>>> couple >>>>> of times. >>>>> Then use a tool to dynamically load your css, and 'flip the switch' >>>>> after it's done. >>>>> >>>>> Regards >>>>> Sander >>>>> >>>> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
