scss setup

-

Project 4: Web Style Guide

Sections of this Guide:

  • How to approach this project includes detailed guidance to help you think about how to organize your code, project and files.

  • How to succeed at this project A final checklist to go over before submitting your project.

    How to Approach this Project

    For this fourth project, you will use the starter CSS found in resources/css/styles.css and convert it to Sass!

    Getting started

  • ❑  Download the project starter files.

    • ❑  Related resources: Web Style Guide Project Instructions

    • ❑  Open the resources/index.html file in your browser of choice. This will serve as the mockup

      for the project.

  • ❑  Set up a new GitHub repo and push the project files to it. ❑ Related video: Share Your Projects with GitHub
    ❑ Related video: Introduction to Git

  • ❑  Install Dart Sass if you haven’t done so already.
    ❑ Related video: Process Sass with Scout-App
    ❑ Related resources: Install Dart Sass CLI: Mac | Windows

  • ❑  Create your scss directory and styles.scss file.

    • ❑  Related video: Separate Your Stylesheet Into Partials

    • ❑  Create an scss folder inside of your project's root folder. All of your scss partial files,

      including sub-folders to organize them will go in here.

    • ❑  Create a styles.scss file inside of your newly created scss folder.

      Setting up your partials

Front End Techdegree

❑ Create your partial sub-folders inside the scss directory. ❑ Related video: Breaking the Stylesheet Into Partials
❑ Create a utilities folder inside of your scss folder.
❑ Create a base folder inside of your scss folder.

❑ Create a components folder inside of your scss folder. ❑ Create your partial files inside the partial sub-folders.

❑ Related video: Breaking the Stylesheet Into Partials

The utilities folder:
❑ Create an file inside of your folder.

_normalize.scss

Front End Techdegree

  • ❑  Create a

  • ❑  Create a

file inside of your folder. file inside of your folder.

_index.scss

_variables.scss

The base folder:

  • ❑  Create an file inside of your base folder.

  • ❑  Copy the
    folder, then rename it to .

  • ❑  Create a

    The components folder:

  • ❑  Create an

  • ❑  Create a

  • ❑  Create a

  • ❑  Create a

  • ❑  Create a

  • ❑  Create a

  • ❑  Create a

    Import your partial files

utilities

_mixins.scss

utilities

_index.scss

normalize.css

file from the folder and paste it into the base file inside of your base folder.

_typography.scss

_index.scss

file inside of your file inside of your

folder. folder.

folder. folder.

folder. folder.

folder.

file inside of your file inside of your

file inside of your file inside of your

file inside of your

❑ Import the individual files in each partial folder via the _index.scss files. ❑ Related video: Finishing and Importing Our Partials

The utilities folder _index.scss:
❑ Open the _index.scss file inside of your folder. ❑ Copy and paste the code below into the file:

utilities

resources/css/

components

_grid.scss

components

_navigation.scss

components

_buttons.scss

components

_forms.scss

components

_images.scss

components

_media-queries.scss

components

utilities

_index.scss

Front End Techdegree

/* ============================================= */ /* Utilities Imports */
/* ============================================= */

@import 'variables'; @import 'mixins';

The base folder _index.scss:
❑ Open the _index.scss file inside of your base folder.
❑ Copy and paste the code below into the _index.scss file:

/* ============================================= */ /* Base Imports */
/* ============================================= */

@import 'normalize'; @import 'typography';

The components folder _index.scss:
❑ Open the _index.scss file inside of your ❑ Copy and paste the code below into the

folder. file:

components

_index.scss

/* ============================================= */ /* Components Imports */

/* ============================================= */

@import 'buttons'; @import 'forms'; @import 'navigation'; @import 'images';

@import 'grid';
@import 'media-queries';

Import your partials sub-folders index files

The scss folder styles.scss:
❑ Open the styles.scss file inside of your scss folder.
❑ Copy and paste the code below into the styles.scss file:

/* ============================================= */ /* Sub-Folder Imports */

/* ============================================= */

@import 'utilities/index'; @import 'base/index';

@import 'components/index';

Move the starter css to your scss partials

❑ Open the resources/css/styles.css file.
❑ Make note of the different code blocks separated by code comment headings, for example:

Front End Techdegree

/* /* /*

/* /* /*

/* /* /*

/* /*

============================================= */ Base styles */

============================================= */

============================================= */ Typography */

============================================= */

============================================= */ Grid System */

============================================= */

============================================= */ Navigation */

/* ============================================= */

Move the starter css to your scss partials (cont.)

❑ Copy the CSS code from the resources/css/styles.css file into your scss partials.

  • ❑  Copy the code that is under _typography.scss partial file.

  • ❑  Copy the code that is under

  • ❑  Copy the code that is under

    file.

  • ❑  Copy the code that is under

  • ❑  Copy the code that is under

  • ❑  Copy the code that is under

  • ❑  Copy the code that is under

    partial file.

both the Base styles and Typography code comments to your

the the

the the the the

code comment to your code comment to your

Buttons code comment to you
Forms code comment to your
Images code comment to your
Media Queries code comment to your

partial file. partial

partial file. partial file.

partial file.

Grid System

_grid.scss

Navigation

_navigation.scss

r _buttons.scss

_forms.scss

_images.scss

_media-queries.scss

Start converting the starter CSS to Sass

❑ Start creating your Sass variables.

  • ❑  Open your _variables.scss partial file.

  • ❑  Create at least 5 color variables.

  • ❑  Create at least 1 variable for the media query breakpoint.

  • ❑  Go through each of your scss partial files and replace the hard coded css values with your

    variables.

  • Related video: Declaring and Using Variables

  • Related video: Naming Variables

  • Related video: Color Variables

  • Related video: Font and Asset Variables

  • Related video: Media Queries and Breakpoint Variables


Comments

Post a Comment

Popular posts from this blog

how to code a weather forecast web

-
Image
  Let's work through the example we saw at the beginning: the weather forecast. The first step is to make the forecast look good on a small screen. The app at a narrow width. Next, resize the browser until there is too much white space between the elements, and the forecast simply doesn't look as good. The decision is somewhat subjective, but above  600px  is certainly too wide. The app at a point where we feel we should tweak the design. To insert a breakpoint at  600px , create two media queries at the end of your CSS for the component, one to use when the browser is  600px  and below, and one for when it is wider than  600px . @media ( max-width : 600px ) { } @media ( min-width : 601px ) { } Finally, refactor the CSS. Inside the media query for a  max-width  of  600px , add the CSS which is only for small screens. Inside the media query for a  min-width  of  601px  add CSS for larger screens. Pick minor break...
Read more

What Build Tools Do JavaScript Developers Use?

-
Image
  When starting a new JavaScript project, developers usually set up a build system using tools that help manage all of the moving parts of the project, and just about everything needed to build and run their application. Package Managers Many JavaScript applications rely on external dependencies like libraries, frameworks and other time-saving tools, which help developers avoid having to rewrite their own solutions to common problems. Libraries, frameworks and software are created and shared by the JavaScript community and brought into a project using a  package manager . A project could have tens or hundreds of external dependencies, and in many cases, some dependencies rely on other installed dependencies. Package managers install and keep track of all the dependencies of a project. They also simplify the process of upgrading, configuring and removing dependencies. The most popular JavaScript package manager is  npm  (node package manager). Another commonly used pa...
Read more

WordPress Theme Development From Scratch - 3. Enqueuing CSS and JS to W...

-
Image
full screen view:  https://youtu.be/KtMwTBl-j8I functions.php file: <?php // Create the function function load_css () { // Register the style wp_register_style( ' my-style ', get_template_directory_uri() . ' /style.css ', array(), false, 'all' ); // Name, get template URL + CSS filename, dependencies, version number, media // Enqueue the style wp_enqueue_style('my-style'); } // Execute the function add_action('wp_enqueue_scripts', 'load_css'); Yellow hight portion can be customized. 'my-style' string name, could be any. '/style.css' string location, could be /css/style.css. depend on your style.css file location. *link functions file with pages, still need some work: 1. add <?PHP wp_head(); ?> right beyond the end of </head> in the single.php file(similar as HTML file) <?php wp_head (); ? > </ head > < body <?php body_class (); ? > id = "top" > <?p...
Read more

how to use :focus

-
  The browser uses the   outline   CSS property in its default style sheet to add the   :focus   styles to focused elements. In order to remove that and add your own   :focus   styles, all you have to do is add   outline: 0;   to the element whose   :focus   style you want to change, and then add your own. For example: a :focus { outline : 0 ; /* then add your own styles here */ } Outlines are similar to borders, but they’re not quite the same. You can read more about outlines and how they differ from borders in the  outline  property entry. When you’re styling links using  :focus  it is recommended that you provide the  :focus  styles after  :link  and  :visited  styles, otherwise the  :focus  styles would be overridden by those of  :link  and  :visited . In addition to these three pseudo-classes, the  :hover  and  :a...
Read more

unit3.online registration form tricks: input field box align right and placeholder text right, but input text left.

-
Image
TrickA: align the input field box to right 1. make the input field to right  the trick is: not float input field to right, you need to give the label margin-right:auto;  then push the input field to right .      .container label{          margin-right:auto; } 2. but after that, the label is not level with input filed. you have to fix it with: .container label{     justify-content:center;     align-self:center; } then you will see the perfect picture: 3. but not end, you will find new issue: the postcode area is also pushed to right, and the project require the postcode field short than others. you will need a little math to fix it: for example:  your input area width is 80%;  label is 15%,  100-80-15=5 then you can set 5% between by: label[for="postcode"]{ margin-right:5% } after that, you will get perfect picture. TrickB the place holder text showing on the right. you can simply align the text to right...
Read more

how to screenshot a drop down menu on mac

-
  macOS In  macOS , to take a screenshot (including any menus you may have selected), press  Command -Shift-3 . You will hear a camera shutter click, and an image of your current screen will be saved to your desktop in  PNG  format. It will be named with the date and time that you take the screen shot. To take a screenshot of only a portion of the screen: Press  Command-Shift-4 . Your mouse pointer will change into crosshairs. Note: If you want to cancel at any point in this process, press  Esc . Move your mouse to the upper-left corner of the area you want to capture. Hold down the mouse button, drag the mouse to the lower-right corner of the area you want to capture, and then release the mouse button. You can also take screenshots of individual windows, menus, and icons: If you want to take a screenshot of a menu, select it. If you want to take a screenshot of a window, click it to bring it into focus. Press  Command-Shift-4 , and then press the...
Read more

Numbers in JavaScript introduction

-
  By  Guil Hernandez Note:  To get the most out of instruction steps, be sure to write all of your code and avoid copying/pasting from the examples. Numbers in JavaScript are as straightforward as they sound; you don’t need any special syntax for numbers, you write them straight into JavaScript. In JavaScript, numbers can be whole numbers (called integers ). For example: 5 0 - 100 9999 Or numbers with decimal points to represent fractions of a whole number like: 3.14 - 9.88888 .0000009 Numbers like these with decimal points are also called " floating point numbers ." JavaScript even lets you use scientific notation to represent really large or really small numbers: 9 e - 6 // same as .000009 9 e + 6 // same as 9000000 Storing Numbers in Variables Just as with string values, you can put a number in a variable, or "assign" a number to a variable using the equals sign (or assignment operator): let score = 0 ; const pi = 3.141592653589793 ; const abs...
Read more