Κώδικας

Πώς να ξεκινήσετε το HTML σας

Ένας πρωταρχικός στόχος όλων των προγραμματιστών είναι η ταχύτερη ανάπτυξη, ιδιαίτερα η γρήγορη εκκίνηση. Υπάρχουν δεκάδες πλαίσια που έχουν διατεθεί τα τελευταία δύο χρόνια και έχουν ως στόχο να έχουν τα πρωτότυπα μας μέσα σε λίγα λεπτά.

Δυστυχώς πολλά από αυτά τα πλαίσια έρχονται ταχέως, καθώς οι απαιτήσεις για το έργο εξελίσσονται και πρέπει να ανανεωθούν ή να αντικατασταθούν.

Αν αναζητάτε ένα πρόσφατο πλαίσιο που επιλύει τα προβλήματα που αντιμετωπίζουν οι παλαιότερες λύσεις, ενώ παράλληλα μεγιστοποιείτε τη ροή εργασίας σας, δεν μπορείτε να πάτε πολύ λάθος με HTML Kickstart.

Το πλέγμα

Το πλέγμα είναι μια από τις πιο σημαντικές πτυχές οποιουδήποτε πλαισίου, ειδικά επειδή ένα εύκαμπτο πλέγμα καθορίζει πόσο ευαίσθητος μπορεί να είναι ένας ιστότοπος.

Το HTML Kickstart μας παρέχει την επιλογή ενός εύκαμπτου πλέγματος ή ενός τυποποιημένου (μη ευέλικτου) πλέγματος - αν και δεν είναι σαφές πότε θα χρησιμοποιούσατε το τελευταίο δεδομένης της αυξανόμενης κυριαρχίας των κινητών συσκευών.

Για να δημιουργήσετε ένα εύκαμπτο πλέγμα με δύο στήλες ίσου μεγέθους, θα χρησιμοποιήσαμε: 

Content Here
Content Here

Όπως μπορείτε να δείτε, το μόνο που έχουμε κάνει είναι να προσθέσουμε μερικές απλές τάξεις σε τρία divs. Εάν προτιμάτε το μη ευέλικτο πλέγμα, το μόνο που χρειάζεται να κάνετε είναι να αφαιρέσετε το εύχρηστο classname από το εξωτερικό div.

(Σημειώστε ότι το εύκαμπτο πλέγμα θα τεντωθεί στο πλάτος ολόκληρης της οθόνης, ενώ το μη εύκαμπτο πλέγμα έχει μέγιστο πλάτος 1024ppx).

Εκτός από τις βασικές κατηγορίες παραπάνω, υπάρχουν και ορισμένες βοηθητικές κλάσεις που μπορούμε να χρησιμοποιήσουμε, για παράδειγμα:

  • show-desktop και hide-desktop με αυτές τις κατηγορίες μπορείτε να αποφασίσετε εάν θέλετε το πλέγμα να είναι ορατό σε επιτραπέζιο υπολογιστή.
  • show-tablet και hide-tablet η ίδια ιδέα ισχύει εδώ, αλλά για συσκευές tablet.
  • show-phone και hide-phone για άλλη μια φορά, αυτές οι κατηγορίες υπαγορεύουν την ορατότητα, αυτή τη φορά για έξυπνα τηλέφωνα.

Αν θέλαμε να αποκρύψουμε το πλέγμα των δύο στηλών για smartphones, για παράδειγμα, θα χρησιμοποιούσαμε κώδικα όπως αυτό: 

...

Πλοήγηση

Το HTML Kickstart μας δίνει τρεις επιλογές μενού: κάθετη αριστερά, κάθετη δεξιά και οριζόντια.

Η έκδοση που θα θέλετε πιο συχνά, είναι το οριζόντιο μενού. Για να το κωδικοποιήσουμε, χρειαζόμαστε απλώς αόριστες λίστες: 

  • Σημείο 3

    • Αν θέλετε ένα κατακόρυφο αριστερό μενού, απλά προσθέστε κατακόρυφα στην ουρά άνοιγμα και αν θέλετε ένα κατακόρυφο δεξί μενού, προσθέστε κατακόρυφα δεξιά , όπως έτσι: 

      ...
      ...

    Είναι πραγματικά τόσο εύκολο να κωδικοποιήσετε μενού με το HTML Kickstart.

    Προεπιλεγμένα στυλ

    Το HTML Kickstart σας δίνει μερικές μεγάλες βασικές μορφές από το off. Προφανώς θα θελήσετε να τα βελτιώσετε για το έργο σας, αλλά για τα γρήγορα πρωτότυπα, είναι περισσότερο από αρκετό.

    Όταν πρόκειται για την τυπογραφία που χρησιμοποιεί το HTML KickStart Steve Matteson 'μικρό Arimo γραμματοσειρά από προεπιλογή. Μπορείτε να δείτε το πλήρες φάσμα των ρυθμίσεων τύπου εδώ.

    Τα κουμπιά στυλ είναι πάντα το κέντρο πολλών προσοχών σε οποιοδήποτε πλαίσιο, και το HTML Kickstart έρχεται με κουμπιά σε όλα τα σχήματα και μεγέθη. Δεν χρειάζεται καν να χρησιμοποιήσετε τάξεις για αυτό, απλά δημιουργήστε μια ετικέτα κουμπιού και τα στυλ θα εφαρμοστούν αυτόματα.

    Αν προτιμάτε να εφαρμόζονται τα στυλ κουμπιών σε μια ετικέτα άγκυρας, απλά πρέπει να προσθέσετε την κλάση κουμπιών σε αυτήν:

    Υπάρχουν επίσης διάφορα διαφορετικά στυλ που μπορούμε να εφαρμόσουμε: 

         Κρότος

    Τέλος, έχουμε επίσης τη δυνατότητα δημιουργίας μιας γραμμής κουμπιών, με μια σύνταξη παρόμοια με το οριζόντιο μενού:

    Εικόνες

    Το Kickstart HTML βοηθά στη βελτίωση του UX δημιουργώντας αναδυόμενα παράθυρα για γκαλερί και εικόνες για εσάς. Είναι μια πολύ καλύτερη λύση από το άνοιγμα ενός νέου παραθύρου.

    Για να δημιουργήσετε μια πλήρως λειτουργική γκαλερί pop-up με βάση το JavaScript, το μόνο που χρειάζεται είναι ο ακόλουθος κώδικας:

    Είναι απλό να το εφαρμόσετε και δεν χρειάζεστε μια μόνο γραμμή JavaScript.

    Οι εικόνες έχουν επίσης μερικές σπουδαίες κατηγορίες βοηθών, όπως η λεζάντα. Αυτή η κατηγορία που εφαρμόζεται σε μια εικόνα εμφανίζει τον τίτλο της εικόνας ως υπότιτλο στυλ:

    Έχουμε επίσης τάξεις ευθυγράμμισης-δεξιότητας και ευθυγράμμισης-αριστερά που μπορούμε να χρησιμοποιήσουμε για να πλέουμε εικόνες αριστερά και δεξιά. (Το HTML Kickstart θα προσθέσει μικρό περιθώριο ώστε οι εικόνες να μην είναι αντίθετες με το κείμενο.)

    Και φυσικά, το HTML Kickstart μας παρέχει και απλές παρουσιάσεις. Χρησιμοποιεί BXSlider για να το χειριστείτε.

    Ο κώδικας για ένα απλό ρυθμιστικό θα φαίνεται κάπως έτσι: 

    • A Content Slider
      This slider handles HTML content as well as images.

    Ο ρυθμιστής είναι ενεργοποιημένος με αφής για κινητές συσκευές και για άλλη μια φορά δεν χρειάζεστε μια μόνο γραμμή JavaScript.

    Έντυπα

    Το τελευταίο πράγμα που θέλω να σας παρουσιάσω είναι μορφές. Τα έντυπα είναι ζωτικής σημασίας για οποιοδήποτε πλαίσιο, επειδή είναι ένα από τα πιο δύσκολα πράγματα στο ύφος σε μια ιστοσελίδα.

    Το HTML Kickstart διατηρεί την απλότητα του όταν πρόκειται για μορφές και μια κάθετη μορφή μπορεί να δημιουργηθεί απλά ως:

    Όπως μπορείτε να δείτε, δύσκολα έπρεπε να χρησιμοποιήσω οποιεσδήποτε κλάσεις για αυτή τη φόρμα. Το μόνο που έχω κάνει είναι να προσθέσω την κλάση κατακόρυφη στην κορυφή, έτσι ώστε τα στοιχεία της φόρμας να μην αντιμετωπίζονται ως inline.

    Ένα από τα αγαπημένα μου μέρη του HTML Kickstart είναι οι απλές ειδοποιήσεις σφάλματος που χρησιμοποιούνται με τις φόρμες: 

      Σημείωση σφάλματος 
      Προειδοποίηση
      Σημείωση επιτυχίας

    συμπέρασμα

    Υπάρχουν τόνοι των επιλογών που έρχονται με HTML Kickstart, έχουμε πραγματικά μόνο γδαρμένο την επιφάνεια? υπάρχει ένα τεράστιο σύνολο εικονιδίων, εργαλείων και ακόμη και καρτελών.

    Η πραγματική δύναμη του HTML Kickstart είναι η απλότητα του κώδικα του. Η έλλειψη εξωγήινων διαιρέσεων και κατηγοριών το καθιστά εξαιρετικό χρόνο εξοικονόμησης, λιγότερος κώδικας σημαίνει λιγότερα λάθη. Αν ψάχνετε για να ξεκινήσετε την κωδικοποίηση της HTML σας από το μηδέν, ή αν ψάχνετε για ένα απλό πλαίσιο για γρήγορο πρωτότυπο ενός σχεδίου HTML Kickstart είναι μια μεγάλη επιλογή.

    Χρησιμοποιήσατε HTML Kickstart; Προτιμάτε διαφορετικό πλαίσιο; Ενημερώστε μας στα σχόλια.

    html πλαίσια ξεκινώντας html html κώδικα html βοηθοί html kickstart html πρωτότυπα learning html