Very nice, I'll structure my project like this. Thank you again!!
Em quinta-feira, 3 de setembro de 2015 18:25:45 UTC-3, Craig McMurray escreveu: > > 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.
